/* global React, BgGear, IconArrow */

function AboutPage({ navigate, onCTA }) {
  return (
    <div className="route">
      {/* ============ HERO, split ============ */}
      <section className="hero" style={{ paddingBottom: 80 }}>
        <BgGear style={{ top: -160, right: -200 }} size={600} opacity={0.04} />
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div className="split-portrait">
            <div className="portrait-frame fade-up">
              <img
                src="assets/sarah-portrait.png"
                alt="Sarah, founder of People Cake"
                className="portrait-frame__img" />
              
              <span className="portrait-frame__tag">Sarah · Founder</span>
            </div>
            <div className="fade-up fade-up-delay-1">
              <div className="t-label eyebrow eyebrow--yellow">About Sarah</div>
              <h1 className="t-h1" style={{ marginBottom: 32 }}>
                25 years in HR taught me<br />
                <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>one thing</em> above all else.
              </h1>
              <p className="t-body-lg" style={{ maxWidth: 540 }}>
                Strategy without execution is just intention.
                I've spent my career inside businesses, not advising from the outside,
                which means I know what it actually takes to make change land.
              </p>
              <div className="cta-row">
                <button className="btn btn--secondary" onClick={onCTA}>
                  Get in touch <IconArrow />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ JOURNEY ============ */}
      <section className="section bg-off-white">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 96 }} className="journey-grid">
            <div>
              <div className="t-label eyebrow">A brief history</div>
              <h2 className="t-h1">The journey.</h2>
            </div>
            <div className="stack-24" style={{ maxWidth: 640 }}>
              <p className="t-body-lg">
                My career has taken me through corporate HR, scaling tech businesses, and
                fast-growth SMEs, working with leaders at every stage from first hire to first IPO.
                I've seen what works, and what quietly doesn't, when companies scale fast without
                the people infrastructure to carry it.
              </p>
              <p className="t-body-lg">
                After more than a decade in senior leadership roles, I set up People Cake to
                offer the kind of strategic HR capability that most scaling businesses can't
                justify full-time, but can't afford to be without. A fractional HR Director,
                embedded where it matters.
              </p>
              <p className="t-body-lg">
                Alongside the consultancy practice, I coach senior HR leaders through career
                transitions and crossroads, work that started informally with peers reaching
                out for sounding-board conversations, and now runs as four distinct coaching programmes.
              </p>
              <div className="divider" style={{ margin: "16px 0" }} />
              <p className="t-small text-mid" style={{ fontStyle: "italic" }}>
                A fuller biography and case studies are being added, check back, or
                <a className="text-purple" style={{ cursor: "pointer", borderBottom: "1px solid currentColor" }} onClick={onCTA}> get in touch directly</a>.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ============ CREDENTIALS ============ */}
      <section className="section bg-white">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 64 }}>
            <div className="t-label eyebrow">How I work</div>
            <h2 className="t-h1">Credentials & approach.</h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 24,
            maxWidth: 920,
            margin: "0 auto"
          }} className="creds-grid">
            {[
            {
              num: "01", title: "25+ years in HR",
              body: "Across scaling businesses and corporate environments, covering every stage of the employee lifecycle."
            },
            {
              num: "02", title: "10+ years senior leadership",
              body: "Operating at HR Director and equivalent levels, embedded in commercial decision-making, not advising from outside it."
            },
            {
              num: "03", title: "TalentPredix\u00a9 Accredited Coach",
              body: "Help individuals and teams optimise their unique strengths, motivators, and values for better performance and career success."
            },
            {
              num: "04", title: "Four coaching programmes",
              body: "Distinct programmes designed for HR leaders in different stages of transition or growth."
            },
            {
              num: "05", title: "Associate coaching",
              body: "Associate coach with third-party corporate partners, extending reach through trusted networks."
            },
            {
              num: "06", title: "Always commercially grounded",
              body: "Every recommendation tied to business outcomes, not theoretical models or HR jargon."
            }].
            map((c) =>
            <div key={c.num} className="card" style={{
              display: "flex", gap: 24,
              padding: "32px",
              background: "var(--color-off-white)",
              border: "1px solid var(--color-border)"
            }}>
                <div className="t-h2" style={{
                color: "var(--color-purple)",
                fontFamily: "var(--font-display)",
                flexShrink: 0,
                lineHeight: 1
              }}>{c.num}</div>
                <div>
                  <h3 className="t-h3" style={{ marginBottom: 8 }}>{c.title}</h3>
                  <p className="text-mid">{c.body}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ============ PHILOSOPHY PULL QUOTE ============ */}
      <section className="bg-black" style={{ padding: "80px 0", position: "relative", overflow: "hidden" }}>
        <BgGear style={{ top: -240, left: "50%", marginLeft: -300 }} size={600} opacity={0.04} />
        <div className="container" style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
          <span className="pullquote__mark">&ldquo;</span>
          <p className="pullquote" style={{ margin: "0 auto" }}>
            Most organisations can articulate their strategy.
            Far fewer can execute it through their people.
            The gap between leadership intent and day-to-day employee behaviour
            is where growth stalls, and where the cost is highest.
            <span className="pullquote__mark pullquote__mark--close">&rdquo;</span>
          </p>
          <div style={{ marginTop: 48, opacity: 0.6, fontSize: 14, letterSpacing: "0.14em", textTransform: "uppercase" }}>
            Sarah · Founder, People Cake
          </div>
        </div>
      </section>

      {/* ============ FINAL CTA ============ */}
      <section className="section-sm bg-white text-center">
        <div className="container">
          <h2 className="t-h2" style={{ maxWidth: 640, margin: "0 auto 24px" }}>
            If any of this feels like the right fit, let's talk.
          </h2>
          <p className="text-mid t-body-lg" style={{ maxWidth: 540, margin: "0 auto 32px" }}>
            A short conversation is the best way to find out if there's something to work on together.
          </p>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn--primary btn--lg" onClick={onCTA}>Start a conversation <IconArrow /></button>
            <button className="btn btn--ghost btn--lg" onClick={() => navigate("diagnostic")}>Try the free diagnostic</button>
          </div>
        </div>
      </section>
    </div>);

}

const aboutPageStyle = document.createElement("style");
aboutPageStyle.textContent = `
  @media (max-width: 920px) {
    .journey-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .creds-grid { grid-template-columns: 1fr !important; }
  }
`;
document.head.appendChild(aboutPageStyle);

window.AboutPage = AboutPage;