/* global React, BgGear, IconArrow */

function CoachingPage({ navigate, onCTA }) {
  return (
    <div className="route">
      {/* ============ HERO, softer, dual column ============ */}
      <section className="hero" style={{
        background: "linear-gradient(180deg, #0f0d0b 0%, #1a1825 100%)",
        paddingBottom: 96
      }}>
        <BgGear style={{ top: -160, left: -200 }} size={620} opacity={0.05} />
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div className="split-portrait">
            <div className="fade-up fade-up-delay-1">
              <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>
                <span className="pill pill--dot" style={{ borderColor: "var(--color-violet)" }}>Career Coaching</span>
                <span style={{ marginLeft: 16 }}>For HR Leaders</span>
              </div>
              <h1 className="t-h1" style={{ margin: "32px 0", color: "rgb(251, 246, 246)" }}>
                You're skilled at developing others.<br />
                <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>Who's developing you?</em>
              </h1>
              <p className="t-body-lg" style={{ color: "var(--color-off-white)", maxWidth: 560 }}>
                HR leaders are often the last to invest in themselves. Transitions at
                senior level come with a particular kind of pressure, the expectation
                that you should already know what to do. You don't always.
                And that's exactly why having the right support matters.
              </p>
              <div className="cta-row">
                <button className="btn btn--coaching btn--lg" onClick={onCTA}>
                  Schedule your session <IconArrow />
                </button>
              </div>
            </div>
            <div className="portrait-frame fade-up">
              <img
                src="assets/sarah-coaching.png"
                alt="Sarah, coach at People Cake"
                className="portrait-frame__img" />
              
              <span className="portrait-frame__tag" style={{
                background: "var(--color-violet)",
                color: "var(--color-white)"
              }}>Sarah · Coach</span>
            </div>
          </div>
        </div>
      </section>

      {/* ============ WHO THIS IS FOR ============ */}
      <section className="section bg-off-white">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 96 }} className="who-grid">
            <div>
              <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>Who this is for</div>
              <h2 className="t-h1">
                You might be here because...
              </h2>
            </div>
            <div>
              <ul className="who-list">
                <li>You've reached a crossroads and the next step isn't obvious, even with all your experience behind you.</li>
                <li>A role has ended, through redundancy, restructure, or your own choice, and you're figuring out what's next.</li>
                <li>You know you want something different, but can't yet articulate what that is or how to get there.</li>
                <li>You're mid-transition and the process is taking longer, or feeling harder, than you expected.</li>
                <li>You're not in transition at all, but you know you're capable of more, and you're ready to move.</li>
              </ul>
              <div style={{
                marginTop: 48,
                padding: "32px",
                background: "var(--color-white)",
                borderLeft: "3px solid var(--color-violet)",
                borderRadius: "0 8px 8px 0"
              }}>
                <p className="t-body-lg" style={{ fontFamily: "var(--font-display)", fontStyle: "italic" }}>
                  This work is not about finding any next role. It's about finding the right one,
                  one that reflects where you are now, what you've built, and where you genuinely want to go.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ PROGRAMMES ============ */}
      <section className="section bg-white">
        <div className="container">
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>The work</div>
            <h2 className="t-h1">Two ways to begin.</h2>
            <p className="t-body-lg text-mid" style={{ marginTop: 24 }}>
              Some leaders want flexibility, others want a clear arc.
              Pick the shape that fits where you are.
            </p>
          </div>
          <div className="programme-grid">
            <div className="programme-card">
              <div className="t-label" style={{ color: "var(--color-violet)" }}>Option A · Flexible</div>
              <h3 className="t-h2">1:1 Coaching Sessions</h3>
              <p className="text-mid">
                Focused, confidential sessions built around you, your situation, your pace, your goals.
                We work through the practical and the personal, because career transitions require both.
              </p>
              <p className="text-mid">
                Sessions are held remotely and structured around where you are in your journey.
              </p>
              <div className="divider" style={{ margin: "8px 0" }} />
              <p className="t-small text-mid">
                Flexible & ongoing, no fixed programme required.
              </p>
              <button className="btn btn--coaching" onClick={onCTA}>
                Schedule your session now <IconArrow />
              </button>
            </div>
            <div className="programme-card" style={{
              background: "var(--color-black)",
              color: "var(--color-white)",
              borderTopColor: "var(--color-violet)"
            }}>
              <div className="t-label" style={{ color: "var(--color-yellow)" }}>Option B · Structured</div>
              <h3 className="t-h2" style={{ color: "var(--color-white)" }}>Structured Coaching Programme</h3>
              <p style={{ color: "rgba(255,255,255,0.78)" }}>
                For leaders who want a defined arc, from where you are now to a clear,
                confident next chapter.
              </p>
              <p style={{ color: "rgba(255,255,255,0.78)" }}>
                Programmes combine coaching sessions with practical tools, frameworks, and
                accountability to keep momentum through the harder stretches of a transition.
              </p>
              <div className="divider divider--dark" style={{ margin: "8px 0" }} />
              <p className="t-small" style={{ color: "rgba(255,255,255,0.6)" }}>
                Tailored to your specific requirements. Packages available.
              </p>
              <button className="btn btn--secondary" onClick={onCTA}>
                Contact us to find out more <IconArrow />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============ CREDENTIALS / STATS ============ */}
      <section className="section bg-off-white">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 64, maxWidth: 720, margin: "0 auto 64px" }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>Why work with Sarah?</div>
            <h2 className="t-h1">A coach who's actually been there.</h2>
          </div>
          <div className="stats" style={{ background: "var(--color-white)", marginBottom: 64 }}>
            <div className="stats__item">
              <div className="stats__num">25+</div>
              <div className="stats__label">Years in HR</div>
            </div>
            <div className="stats__item">
              <div className="stats__num">10+</div>
              <div className="stats__label">Years senior leadership</div>
            </div>
            <div className="stats__item">
              <div className="stats__num">4</div>
              <div className="stats__label">Coaching journeys</div>
            </div>
          </div>
          <div style={{ maxWidth: 720, margin: "0 auto" }} className="stack-24">
            <p className="t-body-lg">
              I've been a senior HR leader. I've navigated my own transitions. I know
              what it feels like to be the person everyone else comes to for answers,
              while quietly wondering about your own.
            </p>
            <p className="t-body-lg">
              I coach with honesty, structure, and the kind of support that comes from
              genuine shared experience, not just frameworks and theory.
            </p>
            <p className="t-small text-mid">
              <em>Associate coach with third-party corporate partners. Coaching credentials available on request.</em>
            </p>
          </div>
        </div>
      </section>

      {/* ============ COACHING TESTIMONIALS ============ */}
      <section className="section bg-white">
        <div className="container">
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>In their own words</div>
            <h2 className="t-h1">What coaching clients say.</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 48, maxWidth: 880, margin: "0 auto" }}>
            {[
            { q: "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.", align: "left" },
            { q: "I also appreciated the trust we built through open, coaching-style conversations around leadership, organisational context, and strategies for maintaining balance during demanding periods.", align: "right" },
            { q: "She will always be a reliable sounding board when required.", align: "left" }].
            map((t, i) =>
            <div key={i} style={{
              background: "var(--color-off-white)",
              borderLeft: t.align === "left" ? "3px solid var(--color-violet)" : "none",
              borderRight: t.align === "right" ? "3px solid var(--color-violet)" : "none",
              padding: "48px 40px 32px",
              borderRadius: "var(--r-card)",
              marginLeft: t.align === "right" ? "auto" : 0,
              marginRight: t.align === "left" ? "auto" : 0,
              maxWidth: 720,
              width: "100%",
              position: "relative"
            }}>
                <span aria-hidden="true" style={{
                position: "absolute",
                top: 32, left: 28,
                fontFamily: "var(--font-display)",
                fontWeight: 700,
                fontSize: 52,
                lineHeight: 0,
                color: "var(--color-yellow)"
              }}>&ldquo;</span>
                <p style={{
                fontFamily: "var(--font-display)",
                fontSize: 24,
                lineHeight: 1.4,
                fontStyle: "italic",
                paddingLeft: 24
              }}>
                  {t.q}
                  <span aria-hidden="true" style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: 700,
                  fontSize: 52,
                  lineHeight: 0,
                  color: "var(--color-yellow)",
                  marginLeft: 6,
                  verticalAlign: "-0.45em",
                  display: "inline-block",
                  fontStyle: "normal"
                }}>&rdquo;</span>
                </p>
                <div className="t-small text-mid" style={{ marginTop: 16, paddingLeft: 24 }}>Coaching client</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ============ FINAL BOOKING CTA ============ */}
      <section className="bg-black" style={{ padding: "80px 0", textAlign: "center", position: "relative", overflow: "hidden" }}>
        <BgGear style={{ top: -180, right: "50%", marginRight: -300 }} size={500} opacity={0.04} />
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <h2 className="t-hero" style={{ marginBottom: 24, maxWidth: 920, margin: "0 auto 24px" }}>
            Living your <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>next best life</em><br />
            begins today.
          </h2>
          <p className="t-body-lg" style={{ color: "rgba(255,255,255,0.8)", maxWidth: 560, margin: "0 auto 40px" }}>
            A single conversation can shift perspective. Let's start there.
          </p>
          <button className="btn btn--coaching btn--lg" onClick={onCTA}>
            Schedule your session now <IconArrow />
          </button>
          <p className="t-small" style={{ color: "rgba(255,255,255,0.6)", marginTop: 32 }}>
            Sessions held remotely. Flexible scheduling available.
          </p>
        </div>
      </section>
    </div>);

}

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

window.CoachingPage = CoachingPage;