// Home page

function HomePage({ setPage, cart, fmt, ccy }) {
  return (
    <div className="page-enter page-in">
      <Hero setPage={setPage} fmt={fmt} ccy={ccy} />
      <PriceTicker />
      <FeaturedCompanies setPage={setPage} cart={cart} fmt={fmt} />
      <Numbers />
      <HowItWorks />
      <Differentiator />
      <CompanyMarquee />
      <TestimonialsBlock />
      <FAQ />
      <CTABlock setPage={setPage} />
    </div>
  );
}

// ----- Hero (editorial front-page) -----
function Hero({ setPage, fmt, ccy }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", borderBottom: "1px solid var(--border)" }}>
      <div className="grid-lines" style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
      <div className="container" style={{ paddingTop: 56, paddingBottom: 0, position: "relative" }}>

        {/* Top editorial bar */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingBottom: 24, borderBottom: "1px solid var(--border)" }}>
          <div className="eyebrow-rule">A CATALOGUE FOR THE GRADUATE INTERVIEW</div>
          <div style={{ display: "flex", gap: 14 }}>
            <span className="stamp">83 FIRMS</span>
            <span className="stamp">240+ ROLES</span>
            <span className="stamp">REFRESHED 14D AGO</span>
          </div>        </div>

        {/* Big editorial headline */}
          <div style={{ paddingTop: 56, paddingBottom: 56, display: "grid", gridTemplateColumns: "3fr 1fr", gap: 60 }}>
          <div>
            <h1 style={{
              margin: 0,
              fontFamily: "var(--serif)",
              fontWeight: 400,
              fontSize: "clamp(64px, 10vw, 168px)",
              lineHeight: 0.92,
              letterSpacing: "-0.035em",
            }}>
              The interview,<br />
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>written&nbsp;down.</span>
            </h1>
            <p style={{ marginTop: 40, marginBottom: 0, fontSize: 20, lineHeight: 1.45, maxWidth: 620, color: "var(--text-2)" }}>
              Question banks for every firm new grads actually apply to. OT, video and assessment-centre material, contributed by candidates who sat the interview in the last ninety days.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 36 }}>
              <button className="btn btn-primary" onClick={() => setPage("shop")}>Browse the catalogue <Arrow /></button>
              <button className="btn btn-ghost" onClick={() => setPage("coaching")}>1:1 coaching</button>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 28, paddingTop: 8 }}>
            <div style={{ borderTop: "1px solid var(--border)", paddingTop: 18 }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--text-3)", marginBottom: 8 }}>STARTING FROM</div>
              <div className="serif-italic" style={{ fontSize: 48, lineHeight: 1, color: "var(--text)" }}>{fmt(15)}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-3)", marginTop: 6 }}>per firm · lifetime access</div>
            </div>
            <div style={{ borderTop: "1px solid var(--border)", paddingTop: 18 }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--text-3)", marginBottom: 8 }}>THIS WEEK</div>
              <div style={{ fontSize: 14, lineHeight: 1.5 }}>
                <span style={{ color: "var(--accent)" }}>6 firms added.</span> Spring-week prompts in for Barclays, HSBC, Citi.
              </div>
            </div>
            <div style={{ borderTop: "1px solid var(--border)", paddingTop: 18 }}>
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--text-3)", marginBottom: 8 }}>FOR READERS</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "var(--text-2)" }}>
                Free sample: <button onClick={() => setPage("blog")} style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>HireVue tells →</button>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom editorial bar */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: "1px solid var(--border)" }}>
          {[
            { tag: "FROM THE TRADING FLOOR", title: "Optiver's 8-minute mental math test, mapped." },
            { tag: "FIELD NOTES",            title: "The pivot moment in the MBB final round." },
            { tag: "FOR THIS CYCLE",         title: "Six firms added this week. Spring-week is open." },
          ].map((b, i) => <HeroBlurb key={i} {...b} first={i === 0} />)}
        </div>

      </div>
    </section>
  );
}
function HeroBlurb({ tag, title, first }) {
  return (
    <div style={{
      padding: "32px 24px 36px",
      paddingLeft: first ? 0 : 24,
      paddingRight: 24,
      borderLeft: first ? "none" : "1px solid var(--border)",
      minHeight: 150,
      display: "flex", flexDirection: "column", gap: 14,
    }}>
      <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--text-3)" }}>{tag}</div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.25, letterSpacing: "-0.01em", textWrap: "balance" }}>{title}</div>
    </div>
  );
}
function Arrow() {
  return <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

// ----- Numbers strip (massive numerals) -----
function Numbers() {
  const stats = [
    { n: "12.4", unit: "K",     l: "offers landed across the catalogue" },
    { n: "94",   unit: "%",     l: "pass rate on OT modules in the bank" },
    { n: "83",   unit: "—",     l: "firms covered, refreshed every quarter" },
    { n: "90",   unit: "d",     l: "between refreshes — you’re never on last year’s test" },
  ];
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="section-label" style={{ marginBottom: 48 }}>
        <span className="num">II.</span>
        <span className="lbl">EDITION STATISTICS</span>
        <span style={{ flex: 1, height: 1, background: "var(--border)" }} />
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)", letterSpacing: "0.14em" }}>CYCLE 2026 · Q2</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} data-mobile="split2">
        {stats.map((s, i) => (
          <div key={i} style={{ padding: "0 32px 0 0", borderLeft: i === 0 ? "none" : "1px solid var(--border)", paddingLeft: i === 0 ? 0 : 32 }}>
            <div className="numeral-display">{s.n}<span className="unit">{s.unit}</span></div>
            <div style={{ marginTop: 24, color: "var(--text-2)", fontSize: 14, lineHeight: 1.45, maxWidth: 220 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ----- How it works -----
function HowItWorks() {
  const steps = [
    { n: "01", t: "Pick the firm.",       d: "Search 83 companies across 240+ roles. Filter by IB, consulting, Big 4, quant, asset management, tech." },
    { n: "02", t: "Choose the stage.",    d: "OT module, VI module, or the full pack with assessment centre — group case, written case, partner round." },
    { n: "03", t: "Download in seconds.", d: "Secure cloud link auto-delivered. Lifetime access. Every quarterly refresh rolls into your library automatically." },
    { n: "04", t: "Sit the round.",       d: "Optional 1:1 mock with a coach who's worked the desk. Honest feedback. Real polish. No reps, no upsells." },
  ];
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 80 }}>
      <SectionOpener num="III" label="THE PROCEDURE" title={<>Four steps from shortlist to <em>offer letter.</em></>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} data-mobile="split2">
        {steps.map((s, i) => (
          <div key={i} style={{ padding: "32px 28px 32px 0", borderLeft: i === 0 ? "none" : "1px solid var(--border)", paddingLeft: i === 0 ? 0 : 28 }}>
            <div className="mono" style={{ fontSize: 12, color: "var(--accent)", letterSpacing: "0.1em", marginBottom: 24 }}>{s.n}</div>
            <h3 className="h-block" style={{ margin: 0, marginBottom: 16, fontSize: 28 }}>{s.t}</h3>
            <p style={{ margin: 0, color: "var(--text-2)", fontSize: 14, lineHeight: 1.55 }}>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ----- Featured companies -----
function FeaturedCompanies({ setPage, cart, fmt }) {
  const hot = D.companies.filter(c => c.hot).slice(0, 6);
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 80 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 40, gap: 24 }}>
        <SectionOpener num="I" label="FEATURED THIS CYCLE" title={<>The firms everyone is chasing right now.</>} />
        <button className="btn btn-ghost" style={{ marginBottom: 56 }} onClick={() => setPage("shop")}>View all 83 →</button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
        {hot.map(c => <FeaturedCard key={c.t} c={c} setPage={setPage} fmt={fmt} />)}
      </div>
    </section>
  );
}
function FeaturedCard({ c, setPage, fmt }) {
  const cat = D.cat[c.c];
  return (
    <button onClick={() => setPage("shop")} style={{
      padding: 28, textAlign: "left", background: "var(--surface)", transition: "background 0.2s",
    }} onMouseOver={e => e.currentTarget.style.background = "var(--surface-2)"}
       onMouseOut={e => e.currentTarget.style.background = "var(--surface)"}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 32 }}>
        <div className="placeholder-img" style={{ width: 48, height: 48, fontSize: 11 }}>{c.t}</div>
        <span className="chip">{cat.short}</span>
      </div>
      <div className="serif-italic" style={{ fontSize: 26, lineHeight: 1.15, marginBottom: 8, minHeight: 60, textWrap: "balance" }}>{c.n}</div>
      <div style={{ color: "var(--text-3)", fontSize: 13 }}>{c.roles.length} roles · 3 variants each</div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--border)" }}>
        <span style={{ color: "var(--text-2)", fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>FROM {fmt(15)}</span>
        <span style={{ color: "var(--accent)", fontSize: 13 }}>Browse →</span>
      </div>
    </button>
  );
}

// ----- Differentiator -----
function Differentiator() {
  const items = [
    { n: "01", t: "Sourced from candidates, not recruiters.",
      d: "Every question is contributed by someone who sat the interview in the last ninety days. We pay for the write-up. We verify it. We re-test it." },
    { n: "02", t: "Three letters. Three full modules.",
      d: "OT, VI and AC. Most prep platforms cover one well. We cover all three, in the same depth, for every firm in the catalogue." },
    { n: "03", t: "Model answers from former interviewers.",
      d: "Walkthroughs written by ex-GS, MBB and Optiver staff. Not 'right answers' — the structure scorers look for." },
    { n: "04", t: "Quarterly refresh, lifetime access.",
      d: "Buy once. Every refresh rolls into your library automatically. You’re never prepping against last year’s test." },
  ];
  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 }}>
        <SectionOpener num="IV" label="WHY FBO" title={<>The bank is the product. Nothing else.</>}
          sub="No fluff videos. No 'mindset' modules. No certificates of completion. The actual questions, written down, in your hands." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
          {items.map(it => (
            <div key={it.n} style={{ background: "var(--bg)", padding: 40, display: "flex", gap: 28 }}>
              <div className="serif-italic" style={{ fontSize: 64, lineHeight: 0.9, color: "var(--accent)", flexShrink: 0 }}>{it.n}</div>
              <div>
                <h3 className="h-block" style={{ margin: 0, marginBottom: 14, fontSize: 26 }}>{it.t}</h3>
                <p style={{ margin: 0, color: "var(--text-2)", fontSize: 14.5, lineHeight: 1.55 }}>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- Testimonials -----
function TestimonialsBlock() {
  const [idx, setIdx] = useState(0);
  const list = D.testimonials;
  const next = () => setIdx((idx + 1) % list.length);
  const prev = () => setIdx((idx - 1 + list.length) % list.length);
  const t = list[idx];
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 80 }}>
      <SectionOpener num="V" label="POST-OFFER" title={<>What candidates say <em>after</em> the offer drops.</>} />
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "center" }}>
        <div>
          <div className="serif" style={{ fontSize: 200, lineHeight: 0.5, color: "var(--accent)", marginBottom: 32 }}>"</div>
          <blockquote style={{ margin: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "clamp(28px, 3.2vw, 44px)", lineHeight: 1.25, letterSpacing: "-0.015em", color: "var(--text)" }}>
            {t.quote}
          </blockquote>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 40 }}>
            <div className="placeholder-img" style={{ width: 52, height: 52, borderRadius: "50%" }}>
              <span style={{ fontFamily: "var(--mono)", fontSize: 13 }}>{t.name.split(" ").map(s => s[0]).join("")}</span>
            </div>
            <div>
              <div style={{ fontSize: 15 }}>{t.name}</div>
              <div style={{ color: "var(--text-3)", fontSize: 12.5 }}>{t.school} → <span style={{ color: "var(--accent)" }}>{t.firm}</span></div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 36 }}>
            <button onClick={prev} className="btn btn-dark btn-sm">←</button>
            <button onClick={next} className="btn btn-dark btn-sm">→</button>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: 8 }}>
              {list.map((_, i) => (
                <div key={i} style={{ width: i === idx ? 24 : 6, height: 2, background: i === idx ? "var(--accent)" : "var(--border-strong)", transition: "all 0.2s" }} />
              ))}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {list.map((tt, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{
              textAlign: "left", padding: 18,
              background: i === idx ? "var(--surface)" : "transparent",
              border: "1px solid", borderColor: i === idx ? "var(--accent-dim)" : "var(--border)",
              borderRadius: 8, transition: "all 0.2s",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ fontSize: 13, color: "var(--text)" }}>{tt.firm}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.06em" }}>{tt.offer.toUpperCase()}</span>
              </div>
              <div style={{ fontSize: 12, color: "var(--text-2)" }}>{tt.school}</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----- FAQ -----
function FAQ() {
  const faqs = [
    { q: "How fresh are the question banks?",
      a: "Every bank refreshes on a 90-day cycle. New contributions land continuously, and we re-verify against the latest interview cycle before each refresh ships. Buy once — all future refreshes are included." },
    { q: "What’s actually inside each pack?",
      a: "OT modules cover numerical, verbal, logical and situational batteries with full walkthroughs. VI packs include the prompts (HireVue, Pymetrics, Sonru) plus a scoring rubric. The Full Pack adds the assessment centre — group case brief, written case dossier, partner-round prompts." },
    { q: "Is this just leaked test material?",
      a: "No. We pay candidates to write up the structure and themes of what they faced — never proprietary test files. Every answer is original, written by ex-interviewers. The pattern repeats; the wording is ours." },
    { q: "Do I need the coaching add-on?",
      a: "Most candidates buy the bank only and self-prep. Coaching is for the final stretch — typically one 90-minute mock with honest feedback in the week before your assessment centre. Worth it if you’ve got an offer at stake." },
    { q: "How does delivery work?",
      a: "Auto-delivery the moment payment clears: a secure cloud link plus an offline-cached web reader. Lifetime access on the device you choose." },
    { q: "What about refunds?",
      a: "48 hours, no questions, as long as you haven’t downloaded. We can’t refund a downloaded bank, but we refund coaching sessions in full up to 24 hours before the slot." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 80 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80 }}>
        <div>
          <div className="section-label" style={{ marginBottom: 32 }}>
            <span className="num">VI.</span>
            <span className="lbl">FREQUENTLY ASKED</span>
          </div>
          <h2 className="h-section" style={{ margin: 0 }}>Direct answers.</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> — we read everything.
          </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 ? 200 : 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>
  );
}

// ----- CTA Block -----
function CTABlock({ setPage }) {
  return (
    <section className="container" style={{ paddingTop: 80, paddingBottom: 60 }}>
      <div style={{
        background: "linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%)",
        border: "1px solid var(--border)",
        borderRadius: 16,
        padding: "80px 60px",
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", top: -100, right: -50, width: 400, height: 400,
          background: "radial-gradient(circle, rgba(212,160,74,0.12), transparent 70%)",
          pointerEvents: "none",
        }} />
        <div style={{ position: "relative", maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 22 }}>READY WHEN YOU ARE</div>
          <h2 className="h-section" style={{ margin: 0, marginBottom: 28 }}>
            Your offer is sitting in someone’s inbox. <em>Make sure it’s yours.</em>
          </h2>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => setPage("shop")}>Browse the catalogue <Arrow /></button>
            <button className="btn btn-ghost" onClick={() => setPage("pricing")}>See pricing & coaching</button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });
