/* global React, BgGear, IconArrow, IconCheck, Testimonial */

function ConsultancyPage({ navigate, onCTA }) {
  return (
    <div className="route">
      {/* ============ HERO ============ */}
      <section className="hero" style={{ paddingBottom: 120 }}>
        <BgGear style={{ top: -180, right: -180 }} size={620} opacity={0.05}/>
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ maxWidth: 920 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-purple)" }}>
              <span className="pill pill--dot" style={{ borderColor: "var(--color-purple)" }}>
                HR Consultancy
              </span>
              <span style={{ marginLeft: 16 }}>For Scaling Businesses</span>
            </div>
            <h1 className="t-hero fade-up fade-up-delay-1" style={{ marginTop: 32 }}>
              Your people operations are your<br/>
              <em style={{ fontStyle: "italic", color: "var(--color-purple)" }}>biggest source</em> of hidden cost.
            </h1>
            <p className="t-body-lg hero__lead fade-up fade-up-delay-2" style={{ marginTop: 32, maxWidth: 680 }}>
              As businesses scale, the gap between what leadership intends and what
              actually happens on the ground widens, quietly, and expensively.
              Misaligned tools, underdeveloped managers, unclear strategy, and poor
              onboarding don't announce themselves. They compound.
            </p>
            <div className="cta-row fade-up fade-up-delay-3">
              <button className="btn btn--primary btn--lg" onClick={onCTA}>
                Talk to Sarah <IconArrow/>
              </button>
              <button className="btn btn--secondary btn--lg" onClick={() => navigate("diagnostic")}>
                Take the diagnostic
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============ THREE PROBLEMS ============ */}
      <section className="section bg-off-white">
        <div className="container">
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="t-label eyebrow eyebrow--purple">Three problems we see most</div>
            <h2 className="t-h1">If you recognise any of these, we should talk.</h2>
          </div>
          <div className="problem-grid">
            {[
              {
                title: "Execution is harder than it should be.",
                body: "If your business is growing but delivery feels increasingly fragmented, the issue isn't your strategy. It's that your people infrastructure wasn't designed for the stage you're at. The tools, processes and management structures that worked at 50 people will not scale to 200+."
              },
              {
                title: "Your leadership team may not be as strong as you think.",
                body: "Teams have a natural propensity to become dysfunctional, it rarely happens all at once. Trust quietly erodes. Conflict gets avoided rather than resolved. Commitment starts to show up less. Often the person closest to the team is the last to see it."
              },
              {
                title: "You're scaling without a people strategy.",
                body: "Hiring fast, onboarding inconsistently, and managing reactively is a pattern most fast-growth businesses know well. Without a coherent people strategy underneath, the cost compounds every quarter. I help you get ahead of it."
              }
            ].map((p, i) => (
              <div key={i} className="problem-card">
                <div className="problem-card__num">0{i + 1}</div>
                <h3 className="problem-card__title">{p.title}</h3>
                <p className="problem-card__body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ HOW I WORK ============ */}
      <section className="section bg-white">
        <div className="container">
          <div style={{ marginBottom: 80, maxWidth: 920 }}>
            <div className="t-label eyebrow eyebrow--purple">How I work</div>
            <h2 className="t-h1">
              The fractional model, <em style={{ fontStyle: "italic" }}>strategic depth</em>,
              without the full-time overhead.
            </h2>
          </div>
          <div className="split-2">
            <div className="stack-24">
              <p className="t-body-lg">
                I embed alongside your leadership team as a fractional HR Director,
                bringing the experience, seniority, and commercial awareness of an
                executive hire, structured around what your business actually needs.
              </p>
              <p className="t-body-lg">
                This isn't retained advice from the outside. I get inside the business,
                understand your specific context, and build solutions that stick.
              </p>
              <div style={{ marginTop: 24, paddingTop: 32, borderTop: "1px solid var(--color-border)" }}>
                <div className="t-label" style={{ color: "var(--color-mid-grey)", marginBottom: 16 }}>
                  Engagement models
                </div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {["Flexible retainer", "Project-based", "Day rate available"].map(m => (
                    <span key={m} className="pill" style={{
                      background: "var(--color-off-white)",
                      borderColor: "var(--color-border)",
                      color: "var(--color-black)"
                    }}>{m}</span>
                  ))}
                </div>
              </div>
            </div>
            <div style={{
              background: "var(--color-off-white)",
              padding: 48,
              borderRadius: "var(--r-card)",
              border: "1px solid var(--color-border)"
            }}>
              <div className="t-label" style={{ color: "var(--color-purple)", marginBottom: 16 }}>
                What this can include
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  "People strategy design and execution",
                  "Leadership team diagnostics and development",
                  "Hiring, onboarding, and performance infrastructure",
                  "Management capability building",
                  "HR tech and automation review",
                  "Standalone project work",
                  "Team Diagnostic workshops (Lencioni framework)",
                ].map(item => (
                  <li key={item} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{ color: "var(--color-purple)", marginTop: 4 }}><IconArrow size={14}/></span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ============ TESTIMONIALS (DARK) ============ */}
      <section className="bg-black" style={{ padding: "80px 0", position: "relative", overflow: "hidden" }}>
        <BgGear style={{ top: -260, right: -200 }} size={600} opacity={0.04}/>
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-yellow)" }}>Client voices</div>
            <h2 className="t-h1" style={{ color: "var(--color-white)" }}>
              The change is in the outcomes, not the proposals.
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="consultancy-tests">
            {[
              {
                q: "Sarah played an important role in helping identify focus areas for the broader leadership group and championing actionable improvements informed by data insights such as attrition trends and hiring outcomes. These efforts contributed to meaningful changes, including revamped hiring and onboarding practices and the introduction of clearer sales competencies.",
                n: "Mike Elliot", r: "Regional Sales Director"
              },
              {
                q: "Sarah was key in developing the benefits system here at Jetstone. She arrived with a clear mission, to improve employee engagement and satisfaction, and took the lead in canvassing and listening to employees, then relaying this back to management. This greatly aided employee retention.",
                n: "Calum McLatchie", r: "COO"
              },
              {
                q: "Sarah proved herself invaluable when COVID forced us into lockdown and remote working. Sarah was the cohesion we needed as a business.",
                n: "James Seymour", r: "CTO"
              },
              {
                q: "Sarah is a highly experienced HR Director and business partner. Sarah always brings a balance of commercial awareness, experience, and personal sensitivity.",
                n: "Rob Jenkins", r: "VP"
              },
            ].map((t, i) => (
              <div key={i} style={{
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.08)",
                borderRadius: "var(--r-card)",
                padding: "48px 32px 32px",
                display: "flex", flexDirection: "column", gap: 24,
                position: "relative"
              }}>
                <span aria-hidden="true" style={{
                  position: "absolute",
                  top: 32, left: 24,
                  fontFamily: "var(--font-display)",
                  fontWeight: 700,
                  fontSize: 56,
                  lineHeight: 0,
                  color: "var(--color-yellow)"
                }}>&ldquo;</span>
                <p style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 22,
                  lineHeight: 1.4,
                  color: "var(--color-white)",
                  paddingLeft: 16
                }}>
                  {t.q}
                  <span aria-hidden="true" style={{
                    fontFamily: "var(--font-display)",
                    fontWeight: 700,
                    fontSize: 56,
                    lineHeight: 0,
                    color: "var(--color-yellow)",
                    marginLeft: 6,
                    verticalAlign: "-0.45em",
                    display: "inline-block"
                  }}>&rdquo;</span>
                </p>
                <div style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, paddingLeft: 16 }}>
                  <span style={{ color: "var(--color-white)", fontWeight: 500 }}>{t.n}</span> · {t.r}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ DIAGNOSTIC CTA ============ */}
      <section className="section bg-off-white text-center">
        <div className="container">
          <div className="t-label eyebrow eyebrow--purple">Not sure where to start?</div>
          <h2 className="t-h1" style={{ maxWidth: 720, margin: "0 auto 24px" }}>
            Take the Team Diagnostic.
          </h2>
          <p className="t-body-lg text-mid" style={{ maxWidth: 640, margin: "0 auto 40px" }}>
            Grounded in Lencioni's Five Dysfunctions of a Team, it surfaces the invisible
            gaps that may be quietly eroding your leadership team's performance, in under 5 minutes.
          </p>
          <button className="btn btn--primary btn--lg" onClick={() => navigate("diagnostic")}>
            Take the Free Diagnostic <IconArrow/>
          </button>
        </div>
      </section>

      {/* ============ FINAL BOOKING ============ */}
      <section className="bg-black" style={{ padding: "80px 0", textAlign: "center" }}>
        <div className="container">
          <h2 className="t-hero" style={{ marginBottom: 24 }}>
            Let's <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>talk.</em>
          </h2>
          <p className="t-body-lg" style={{ color: "rgba(255,255,255,0.8)", maxWidth: 560, margin: "0 auto 40px" }}>
            No lengthy proposals. A conversation first, to understand your context and
            work out whether there's a fit.
          </p>
          <button className="btn btn--primary btn--lg" onClick={onCTA}>
            Book a call with Sarah <IconArrow/>
          </button>
        </div>
      </section>
    </div>
  );
}

const consultancyPageStyle = document.createElement("style");
consultancyPageStyle.textContent = `
  @media (max-width: 920px) {
    .consultancy-tests { grid-template-columns: 1fr !important; }
  }
`;
document.head.appendChild(consultancyPageStyle);

window.ConsultancyPage = ConsultancyPage;