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

function HomePage({ navigate, onCTA }) {
  return (
    <div className="route">
      {/* ============ HERO ============ */}
      <section className="hero" style={{ textAlign: "center" }}>
        <BgGear style={{ top: -120, left: -200 }} size={700} opacity={0.05} />
        <BgGear style={{ bottom: -260, right: -200 }} size={700} opacity={0.04} />
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div className="t-label hero__label fade-up">People Operations. Reimagined.</div>
          <h1 className="t-hero fade-up fade-up-delay-1" style={{ maxWidth: 980, margin: "0 auto" }}>
            Where people strategy<br />
            meets <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>what actually works.</em>
          </h1>
          <p className="t-body-lg hero__lead fade-up fade-up-delay-2" style={{ margin: "32px auto 0" }}>
            People Cake works with rapidly scaling businesses and ambitious HR leaders,
            bringing the strategic depth of a seasoned HR Director to the problems that
            matter most, at the speed and flexibility your stage demands.
          </p>
          <div className="cta-row fade-up fade-up-delay-3" style={{ justifyContent: "center" }}>
            <button className="btn btn--primary btn--lg" onClick={() => navigate("consultancy")}>
              For Scaling Businesses <IconArrow />
            </button>
            <button className="btn btn--coaching btn--lg" onClick={() => navigate("coaching")}>
              For HR Leaders <IconArrow />
            </button>
          </div>
        </div>
      </section>

      {/* ============ CREDIBILITY BAR ============ */}
      <section className="bg-off-white">
        <div className="container">
          <CredBar items={[
          "25+ years in HR",
          "10+ years in senior leadership",
          "Trusted by scaling tech businesses",
          "TalentPredix\u00a9 Accredited Coach"]
          } />
          <div className="trusted-by">
            <div className="trusted-by__label t-label">Trusted by</div>
            <div className="trusted-by__row">
              {[
              { src: "assets/logos/crowdstrike.jpg", alt: "CrowdStrike" },
              { src: "assets/logos/box.jpg", alt: "Box" },
              { src: "assets/logos/vmware.jpg", alt: "VMware by Broadcom" },
              { src: "assets/logos/blackberry.jpg", alt: "BlackBerry" },
              { src: "assets/logos/syngenta.jpg", alt: "Syngenta" },
              { src: "assets/logos/sgi.jpg", alt: "SGI" }].
              map((l) =>
              <img key={l.alt} src={l.src} alt={l.alt} title={l.alt} className="trusted-by__logo" />
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ============ TWO SERVICE STREAMS ============ */}
      <section className="section bg-white">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 64 }}>
            <div className="t-label eyebrow">Two streams · one practice</div>
            <h2 className="t-h1" style={{ marginBottom: 24 }}>
              Choose the door that matches the moment you're in.
            </h2>
            <p className="t-body-lg text-mid">
              People Cake serves two distinct audiences with different needs.
              Find your stream below, or read more about each.
            </p>
          </div>
          <div className="split-2 split-2--stretch" style={{ gap: 32 }}>
            <div className="stream-card stream-card--purple" onClick={() => navigate("consultancy")}>
              <div className="stream-card__accent" style={{ background: "var(--color-purple)" }} />
              <div className="stream-card__bigletter" style={{ color: "var(--color-purple)" }}>HR</div>
              <div className="stream-card__label t-label">For Scaling Businesses</div>
              <h3 className="stream-card__headline">
                Your people infrastructure wasn't built for where you're going.
              </h3>
              <p className="stream-card__body">The systems, processes, and management structures that got you to 50 people will not get you to 200+. Most scaling businesses don't fail because of bad strategy, they fail because the operational foundations weren't built to carry it.



              </p>
              <span className="stream-card__cta">
                Explore HR Consultancy <IconArrow />
              </span>
            </div>

            <div className="stream-card stream-card--violet" onClick={() => navigate("coaching")}>
              <div className="stream-card__accent" style={{ background: "var(--color-violet)" }} />
              <div className="stream-card__bigletter" style={{ color: "var(--color-violet)" }}>CC</div>
              <div className="stream-card__label t-label">For HR Leaders</div>
              <h3 className="stream-card__headline">
                You're skilled at developing others. Who's developing you?
              </h3>
              <p className="stream-card__body">
                HR leaders are practised at advocating for everyone but themselves. When
                the next step isn't clear, whether you're in transition, at a crossroads,
                or simply ready for more, I provide the structure, honesty, and shared
                experience to help you move forward with confidence.
              </p>
              <span className="stream-card__cta">
                Explore Career Coaching <IconArrow />
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* ============ TESTIMONIALS ============ */}
      <section className="section bg-off-white">
        <div className="container">
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="t-label eyebrow">Words from people I've worked with</div>
            <h2 className="t-h1">
              Trust, built over years,<br />not pitched in a deck.
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}
          className="testimonials-row">
            <Testimonial
              quote="Sarah always strives to achieve results, often with few resources, and is able to lead, inspire and motivate others with empathy, humility and fairness. A strong collaborator and communicator, she builds trust and credibility quickly."
              name="Ahmad Butt" role="Co-Founder & CEO" />
            <Testimonial
              quote="Sarah has joined many of our weekly StartUp Talent Q&A sessions for a few years now and I've witnessed her give founders clear and useful guidance on tricky people issues. She blends strategic thinking with practical advice in a way that's easy to understand and implement."
              name="Anton Kooll" role="Founder" />
            <Testimonial
              quote="She saw my potential and pushed me to think outside the box, deal with situations outside of my comfort zone and to be confident in my abilities."
              role="Coaching client" />
          </div>
        </div>
      </section>

      {/* ============ DIAGNOSTIC CTA ============ */}
      <section className="diagnostic-cta">
        <BgGear style={{ top: -200, right: -200 }} size={600} opacity={0.05} />
        <BgGear style={{ bottom: -240, left: -180 }} size={500} opacity={0.04} />
        <div className="container diagnostic-cta__inner">
          <div className="t-label" style={{ color: "var(--color-yellow)" }}>Free tool</div>
          <h2 className="t-h1" style={{ maxWidth: 760 }}>
            Is your <span className="diagnostic-cta__highlight">leadership team</span><br />
            as strong as you think it is?
          </h2>
          <p className="t-body-lg" style={{ color: "rgba(255,255,255,0.8)", maxWidth: 640 }}>
            Teams don't fall apart overnight. As people and circumstances change, new
            behaviours quietly take hold, and because the decline is gradual, it's easy
            to miss, especially from the inside. The danger is that the effects compound.
            By the time it's visible, the damage to your business can already be significant.
          </p>
          <button className="btn btn--primary btn--lg" onClick={() => navigate("diagnostic")}>
            Take the Free Diagnostic <IconArrow />
          </button>
          <div className="diagnostic-cta__trust">
            <span><IconCheck size={14} /> No sales call required</span>
            <span><IconCheck size={14} /> Takes 5 minutes</span>
            <span><IconCheck size={14} /> Results sent by email</span>
          </div>
        </div>
      </section>
    </div>);

}

/* Mobile-responsive testimonials row */
const homePageStyle = document.createElement("style");
homePageStyle.textContent = `
  @media (max-width: 920px) {
    .testimonials-row { grid-template-columns: 1fr !important; }
  }
`;
document.head.appendChild(homePageStyle);

window.HomePage = HomePage;