// About page

function AboutPage({ setPage }) {
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="eyebrow" style={{ marginBottom: 22 }}>ABOUT FBO</div>
        <h1 className="h-section" style={{ margin: 0, maxWidth: 1180 }}>
          Built by candidates who got the offer, <em>for candidates still chasing one.</em>
        </h1>
      </section>

      <section className="container" style={{ paddingTop: 40, paddingBottom: 100 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }} data-mobile="stack">
          <div className="placeholder-img" style={{ height: 520 }}>FOUNDERS' PORTRAIT · DROP IMAGE HERE</div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>THE STORY</div>
            <h2 className="h-block" style={{ margin: 0, marginBottom: 24, fontSize: 36 }}>
              We sat the same interviews. Then we wrote them down.
            </h2>
            <div style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-2)", display: "flex", flexDirection: "column", gap: 16 }}>
              <p style={{ margin: 0 }}>FBO started on Xiaohongshu in 2023, when a small group of London-based students began trading what they remembered from their summer-internship online tests. The notes spread. The notes got better. People started paying.</p>
              <p style={{ margin: 0 }}>Three cycles later we cover 83 firms across investment banking, consulting, Big 4, quant, asset management, tech and industry — with original write-ups from the candidates who actually sat the interview, not from recruiters guessing what’s typical.</p>
              <p style={{ margin: 0 }}>The product is the bank. Not a course. Not a community. Not a 'mindset' funnel. The actual questions, written down, with model answers from people who used to grade them.</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)", background: "var(--bg-soft)" }}>
        <div className="container" style={{ paddingTop: 100, paddingBottom: 100 }}>
          <SectionHeader eyebrow="OUR PRINCIPLES" title={<>Four <em>non-negotiables.</em></>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }} data-mobile="stack">
            {[
              { n: "I.", t: "The bank stays clean.", d: "No leaked test files. Ever. We pay candidates to write up themes and structure, never to share proprietary material. The line is bright and we don’t cross it." },
              { n: "II.", t: "Refresh or refund.", d: "Every bank refreshes on a 90-day cycle. If we miss a refresh window without notice, every customer on that bank gets a full credit." },
              { n: "III.", t: "Coaches are practitioners.", d: "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." },
              { n: "IV.", t: "Direct delivery, no upsells.", d: "Buy the bank, get the bank. We will never email you a course, a bootcamp or an upgrade tier you didn’t ask for." },
            ].map(p => (
              <div key={p.n} style={{ display: "flex", gap: 24 }}>
                <div className="serif-italic" style={{ fontSize: 56, color: "var(--accent)", lineHeight: 0.9, minWidth: 60 }}>{p.n}</div>
                <div>
                  <h3 className="h-block" style={{ margin: 0, marginBottom: 12, fontSize: 26 }}>{p.t}</h3>
                  <p style={{ margin: 0, color: "var(--text-2)", fontSize: 14.5, lineHeight: 1.6 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="container" style={{ paddingTop: 100, paddingBottom: 80 }}>
        <SectionHeader eyebrow="THE TEAM" title={<>The people <em>behind the bank.</em></>} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            { n: "M.", role: "Founder", bio: "Ex-IBD analyst. Ran the first OT pack out of a Notion doc." },
            { n: "Y.", role: "Head of Catalogue", bio: "Ex-MBB. Curates every consulting case, every refresh." },
            { n: "K.", role: "Quant Lead", bio: "Ex-Optiver. Designs the mental math and trading drills." },
            { n: "S.", role: "Coaching Lead", bio: "Ex-Big 4 partner. Recruits and trains the coach roster." },
          ].map(p => (
            <div key={p.n} className="card" style={{ padding: 0, overflow: "hidden" }}>
              <div className="placeholder-img" style={{ height: 280, borderRadius: 0, borderLeft: "none", borderRight: "none", borderTop: "none" }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: 80, fontStyle: "italic", color: "var(--accent)" }}>{p.n}</span>
              </div>
              <div style={{ padding: 24 }}>
                <div style={{ fontSize: 13, color: "var(--accent)", fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>{p.role.toUpperCase()}</div>
                <div className="serif-italic" style={{ fontSize: 24, marginTop: 8, marginBottom: 10 }}>{p.n} · Anonymous</div>
                <p style={{ margin: 0, color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.5 }}>{p.bio}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, fontSize: 12, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
          † Identities held back so coaches can still operate at their day-jobs. Every coach is vetted; references on request via email.
        </div>
      </section>

      <section style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--border)" }}>
        <div className="container" style={{ paddingTop: 100, paddingBottom: 100 }}>
          <SectionHeader eyebrow="WHERE TO FIND US" title={<>Find FBO <em>where you actually are.</em></>} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} data-mobile="split2">
            {[
              { ch: "Xiaohongshu", h: "@FBO · 小红书", v: "32.4k followers", note: "Daily prep notes, refresh announcements, candidate Q&A." },
              { ch: "闲鱼 (Xianyu)", h: "FBO Shop", v: "Verified seller", note: "Original distribution channel — still active for legacy buyers." },
              { ch: "WeChat", h: "fbo_offer", v: "Customer support", note: "Add for direct support, custom requests, bundle codes." },
              { ch: "Email", h: "hi@forbestoffer.co", v: "Replies within 12h", note: "For coaching, bundle pricing, partnership enquiries." },
            ].map((c, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div className="eyebrow" style={{ marginBottom: 14 }}>{c.ch}</div>
                <div className="serif-italic" style={{ fontSize: 26, lineHeight: 1.1, marginBottom: 6 }}>{c.h}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.06em", marginBottom: 14 }}>{c.v.toUpperCase()}</div>
                <p style={{ margin: 0, color: "var(--text-2)", fontSize: 13, lineHeight: 1.5 }}>{c.note}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="container" style={{ paddingTop: 100, paddingBottom: 40 }}>
        <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 }}>READY?</div>
            <h2 className="h-section" style={{ margin: 0 }}>Pick the firm. <em>Get the bank.</em></h2>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="btn btn-primary" onClick={() => setPage("shop")}>Browse catalogue →</button>
            <button className="btn btn-ghost" onClick={() => setPage("pricing")}>See pricing</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });