// Coaching page — 1:1 sessions & mock interviews

function CoachingPage({ setPage, cart, fmt, ccy }) {
  return (
    <div className="page-enter page-in">
      <CoachingHero setPage={setPage} />
      <CoachingServices cart={cart} fmt={fmt} />
      <CoachingHow />
      <CoachesRoster />
      <CoachingTestimonials />
      <CoachingFAQ />
      <CoachingCTA setPage={setPage} />
    </div>
  );
}

function CoachingHero({ setPage }) {
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", top: -200, left: -100, width: 600, height: 600,
        background: "radial-gradient(circle at center, rgba(212,160,74,0.16), transparent 60%)",
        pointerEvents: "none",
      }} />
      <div className="container" style={{ paddingTop: 80, paddingBottom: 80, position: "relative" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40 }}>
          <div className="chip chip-dot">Every coach sat the seat</div>
          <div className="chip">38 active coaches · 6-day average turnaround</div>
        </div>
        <h1 className="h-section" style={{ margin: 0, maxWidth: 1200 }}>
          Mock interviews with people who <em>used to grade them.</em>
        </h1>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginTop: 40, gap: 40, flexWrap: "wrap" }}>
          <p style={{ fontSize: 18, color: "var(--text-2)", lineHeight: 1.55, margin: 0, maxWidth: 620 }}>
            Every coach has sat on the other side of the table at the firm they coach for. No motivational speakers. No career counsellors. Just former interviewers running you through the format with rubric in hand.
          </p>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-primary" onClick={() => document.getElementById("svc-grid")?.scrollIntoView({ behavior: "smooth" })}>Book a session →</button>
            <button className="btn btn-ghost" onClick={() => document.getElementById("svc-coaches")?.scrollIntoView({ behavior: "smooth" })}>Meet the coaches</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function CoachingServices({ cart, fmt }) {
  return (
    <section className="container" id="svc-grid" style={{ paddingTop: 60, paddingBottom: 80 }}>
      <SectionHeader eyebrow="FOUR FORMATS" title={<>Pick the stage you're <em>actually in.</em></>}
        sub="Every session is recorded, every coach files a written rubric within 24 hours. No reps, no sales calls, no upsells." />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }} data-mobile="stack">
        {D.services.map(s => (
          <div key={s.id} style={{
            position: "relative",
            background: s.popular ? "linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%)" : "var(--surface)",
            border: "1px solid",
            borderColor: s.popular ? "var(--accent-dim)" : "var(--border)",
            borderRadius: 16,
            padding: 36,
            display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32, alignItems: "start",
          }}>
            {s.popular && <span style={{ position: "absolute", top: -12, left: 28, padding: "4px 12px", background: "var(--accent)", color: "var(--accent-fg)", borderRadius: 999, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", fontWeight: 600 }}>RECOMMENDED</span>}
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <div className="placeholder-img" style={{ width: 48, height: 48, fontSize: 11, background: "linear-gradient(135deg, rgba(212,160,74,0.15), transparent)", borderColor: "var(--accent-dim)", color: "var(--accent)" }}>{s.ticker}</div>
                <span className="chip">{s.sub.toUpperCase()}</span>
              </div>
              <h3 className="serif-italic" style={{ fontSize: 32, margin: 0, marginBottom: 14, lineHeight: 1.15 }}>{s.name}</h3>
              <p style={{ margin: 0, color: "var(--text-2)", fontSize: 14.5, lineHeight: 1.6, marginBottom: 24 }}>{s.desc}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 20px" }}>
                {[
                  "Live 1:1 video",
                  "Recorded replay",
                  "Written rubric in 24h",
                  "Drill plan for the week",
                ].map((x, i) => (
                  <li key={i} style={{ fontSize: 13, color: "var(--text-2)", display: "flex", gap: 8 }}>
                    <span style={{ color: "var(--accent)", flexShrink: 0 }}>✓</span>{x}
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%", borderLeft: "1px solid var(--border)", paddingLeft: 32 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>PRICE</div>
                <div className="serif" style={{ fontSize: 56, lineHeight: 0.9, letterSpacing: "-0.02em" }}>{fmt(s.gbp)}</div>
                <div style={{ fontSize: 12, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.05em", marginTop: 6 }}>£{s.gbp} GBP · one-time</div>
              </div>
              <button onClick={() => cart.addService(s)} className={s.popular ? "btn btn-primary" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center", marginTop: 28 }}>
                Add to cart →
              </button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CoachingHow() {
  const steps = [
    { n: "01", t: "Pick the session.", d: "VI, case, quant or the full pre-AC sprint. Add to the same cart as your question banks if you’re running both." },
    { n: "02", t: "We match a coach.", d: "Within 12 hours you get the name, firm, year and a 30-second video intro. Reject any match — no questions, no charge." },
    { n: "03", t: "Run the session.", d: "Live video, in your firm’s exact format. Recorded for replay. Honest feedback at the end. We don’t sugarcoat." },
    { n: "04", t: "Get the rubric.", d: "Written scoring rubric in your inbox within 24 hours. Drill plan for the week ahead. Slack channel stays open for follow-ups." },
  ];
  return (
    <section style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container" style={{ paddingTop: 100, paddingBottom: 100 }}>
        <SectionHeader eyebrow="HOW IT WORKS" title={<>From cart to <em>coach</em> in 12 hours.</>} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} data-mobile="split2">
          {steps.map((s, i) => (
            <div key={i} style={{ padding: "0 24px 0 0", borderLeft: i === 0 ? "none" : "1px solid var(--border)", paddingLeft: i === 0 ? 0 : 24 }}>
              <div className="mono" style={{ fontSize: 12, color: "var(--accent)", letterSpacing: "0.1em", marginBottom: 22 }}>{s.n}</div>
              <h3 className="h-block" style={{ margin: 0, marginBottom: 14, fontSize: 26 }}>{s.t}</h3>
              <p style={{ margin: 0, color: "var(--text-2)", fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CoachesRoster() {
  const coaches = [
    { initial: "A.",  firm: "Goldman Sachs",   role: "Ex-VP, IBD TMT",          years: "8 yrs", focus: "VI · Case · Behavioural", langs: "EN · ZH" },
    { initial: "M.",  firm: "McKinsey",        role: "Ex-Engagement Manager",   years: "6 yrs", focus: "Case · Partner round",    langs: "EN · ZH · FR" },
    { initial: "R.",  firm: "Optiver",         role: "Ex-Senior Trader",        years: "5 yrs", focus: "Mental math · Trading",   langs: "EN · NL" },
    { initial: "S.",  firm: "Bain",            role: "Ex-Senior Associate",     years: "4 yrs", focus: "Case · Group AC",         langs: "EN · ZH" },
    { initial: "T.",  firm: "EY-Parthenon",    role: "Ex-Senior Consultant",    years: "5 yrs", focus: "Case · Strategy",         langs: "EN" },
    { initial: "L.",  firm: "Blackstone",      role: "Ex-PE Associate",         years: "4 yrs", focus: "PE Case · Modelling",     langs: "EN · ZH" },
    { initial: "K.",  firm: "DBS",             role: "Ex-Management Associate", years: "3 yrs", focus: "VI · AC · Group case",    langs: "EN · ZH · MS" },
    { initial: "J.",  firm: "Amazon",          role: "Ex-Bar Raiser",           years: "6 yrs", focus: "Behavioural · STAR drill",langs: "EN" },
  ];
  return (
    <section className="container" id="svc-coaches" style={{ paddingTop: 100, paddingBottom: 80 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 40, gap: 24 }}>
        <SectionHeader eyebrow="THE ROSTER · 38 ACTIVE" title={<>Coaches, <em>by the seat they sat.</em></>}
          sub="Names held back so coaches can keep operating at their day-jobs. Identities verified, references on request." />
        <div style={{ fontSize: 12, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>SHOWING 8 OF 38</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }} data-mobile="split2">
        {coaches.map((c, i) => (
          <div key={i} className="card" style={{ padding: 22 }}>
            <div className="placeholder-img" style={{ height: 160, marginBottom: 16, borderRadius: 8 }}>
              <span style={{ fontFamily: "var(--serif)", fontSize: 64, fontStyle: "italic", color: "var(--accent)" }}>{c.initial}</span>
            </div>
            <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em", marginBottom: 6 }}>{c.firm.toUpperCase()}</div>
            <div className="serif-italic" style={{ fontSize: 22, lineHeight: 1.1, marginBottom: 10 }}>{c.initial} · Anonymous</div>
            <div style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5 }}>{c.role}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.04em", color: "var(--text-3)" }}>
                <span>EXP</span><span>{c.years.toUpperCase()}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.04em", color: "var(--text-3)" }}>
                <span>FOCUS</span><span style={{ textAlign: "right", maxWidth: "70%" }}>{c.focus.toUpperCase()}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.04em", color: "var(--text-3)" }}>
                <span>LANG</span><span>{c.langs}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CoachingTestimonials() {
  const list = [
    { q: "The case mock was harder than the actual MBB round. By the time I sat the partner I was bored, in the best way.", n: "Aarav P.", s: "Warwick → Bain AC" },
    { q: "My coach told me to stop opening with the framework. Three weeks later, offer.", n: "Sophia C.", s: "LSE → GS IBD" },
    { q: "Mental math at speed is a different skill. The Optiver coach broke me down and rebuilt me in 90 minutes.", n: "Yuki T.", s: "Imperial → Optiver" },
  ];
  return (
    <section style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="container" style={{ paddingTop: 100, paddingBottom: 100 }}>
        <SectionHeader eyebrow="POST-OFFER" title={<>The feedback we get <em>after</em> the offer drops.</>} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} data-mobile="stack">
          {list.map((t, i) => (
            <figure key={i} className="card" style={{ margin: 0, padding: 32, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div className="serif" style={{ fontSize: 80, lineHeight: 0.3, color: "var(--accent)", marginBottom: 24 }}>"</div>
              <blockquote style={{ margin: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.3, letterSpacing: "-0.01em" }}>{t.q}</blockquote>
              <figcaption style={{ marginTop: 28, paddingTop: 16, borderTop: "1px solid var(--border)", fontSize: 13 }}>
                <div>{t.n}</div>
                <div style={{ color: "var(--text-3)", fontSize: 12, marginTop: 2 }}>{t.s}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function CoachingFAQ() {
  const faqs = [
    { q: "How do I know my coach actually worked there?",
      a: "Every coach is verified by us with proof-of-employment and at least two references. We share their LinkedIn under NDA after booking. If the match doesn’t convince you, we re-match for free." },
    { q: "What if the session doesn’t click?",
      a: "If the coach isn’t right inside the first ten minutes, end the call. We refund and re-match. It has happened twice this year — both times the coach was removed from the roster." },
    { q: "Can I book a coach for a firm you don’t list?",
      a: "Often yes. Email the firm and role and we’ll check the roster. If we don’t have someone, we’ll tell you within 24 hours rather than waste your time." },
    { q: "Are sessions only in English?",
      a: "Most are. We also run sessions in Mandarin, Cantonese, French, Dutch and Malay. A language filter is on the way." },
    { q: "Can I bundle coaching with question banks?",
      a: "Yes — same cart, same checkout. Many candidates buy the bank plus a single 90-minute case mock the week before assessment centre. That combination has the highest hit rate we see." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 60 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 80 }} data-mobile="stack">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>COACHING FAQ</div>
          <h2 className="h-section" style={{ margin: 0 }}>Things people <em>actually</em> ask.</h2>
          <p style={{ color: "var(--text-2)", marginTop: 24, fontSize: 15.5, lineHeight: 1.55 }}>
            Still got a question? Drop us a line at <span style={{ color: "var(--accent)" }}>hi@forbestoffer.co</span>.
          </p>
        </div>
        <div>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderTop: "1px solid var(--border)", padding: "24px 0" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", textAlign: "left" }}>
                <span style={{ fontSize: 19, fontFamily: "var(--serif)", fontStyle: open === i ? "italic" : "normal" }}>{f.q}</span>
                <span style={{ color: "var(--accent)", fontSize: 18, transform: open === i ? "rotate(45deg)" : "rotate(0)", transition: "transform 0.2s" }}>+</span>
              </button>
              <div style={{ maxHeight: open === i ? 240 : 0, overflow: "hidden", transition: "all 0.3s" }}>
                <p style={{ color: "var(--text-2)", fontSize: 14.5, lineHeight: 1.6, marginTop: 14, marginBottom: 0, maxWidth: 640 }}>{f.a}</p>
              </div>
            </div>
          ))}
          <div style={{ borderBottom: "1px solid var(--border)" }} />
        </div>
      </div>
    </section>
  );
}

function CoachingCTA({ setPage }) {
  return (
    <section className="container" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div style={{
        background: "linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%)",
        border: "1px solid var(--border)",
        borderRadius: 16, padding: "72px 56px",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 40, flexWrap: "wrap",
      }}>
        <div style={{ maxWidth: 640 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>ONE SESSION CAN MOVE THE OFFER</div>
          <h2 className="h-section" style={{ margin: 0 }}>Get on a call <em>this week.</em></h2>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-primary" onClick={() => document.getElementById("svc-grid")?.scrollIntoView({ behavior: "smooth" })}>Book a session →</button>
          <button className="btn btn-ghost" onClick={() => setPage("shop")}>Browse question banks</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CoachingPage });