// Pricing page

function PricingPage({ setPage, cart, fmt, ccy }) {
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="eyebrow" style={{ marginBottom: 22 }}>PRICING — TRANSPARENT, NO TIERS BY VOLUME</div>
        <h1 className="h-section" style={{ margin: 0, maxWidth: 1100 }}>
          One price per firm. <em>Lifetime access included.</em>
        </h1>
        <p style={{ marginTop: 28, fontSize: 17, color: "var(--text-2)", maxWidth: 640, lineHeight: 1.55 }}>
          Buy the bank for the firm you're chasing. Quarterly refreshes roll in automatically. Looking for 1:1 coaching? <button onClick={() => setPage("coaching")} style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>See the Coaching page →</button>
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 32 }}>
          <span style={{ fontSize: 13, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>PRICES IN</span>
          <CurrencySwitch ccy={ccy} setCode={(c) => { localStorage.setItem("fbo-ccy", c); window.location.reload(); }} />
          <span style={{ fontSize: 12, color: "var(--text-3)" }}>· Auto-converted from GBP at live rate</span>
        </div>
      </section>

      <BankPricing fmt={fmt} setPage={setPage} />
      <ComparisonTable fmt={fmt} />
    </div>
  );
}

function BankPricing({ fmt, setPage }) {
  return (
    <section className="container" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} data-mobile="stack">
        {D.variants.map(v => (
          <div key={v.id} style={{
            position: "relative",
            background: v.popular ? "linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%)" : "var(--surface)",
            border: "1px solid",
            borderColor: v.popular ? "var(--accent-dim)" : "var(--border)",
            borderRadius: 16,
            padding: 36,
            display: "flex", flexDirection: "column",
          }}>
            {v.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 }}>MOST POPULAR</span>
            )}
            <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.1em", marginBottom: 14 }}>{v.id.toUpperCase()} MODULE</div>
            <h3 className="serif-italic" style={{ fontSize: 36, margin: 0, lineHeight: 1 }}>{v.name}</h3>
            <div style={{ marginTop: 20, marginBottom: 24, display: "flex", alignItems: "baseline", gap: 10 }}>
              <span className="serif" style={{ fontSize: 64, lineHeight: 0.9, letterSpacing: "-0.02em" }}>{fmt(v.gbp)}</span>
              <span style={{ fontSize: 13, color: "var(--text-3)" }}>per firm · one-time</span>
            </div>
            <p style={{ color: "var(--text-2)", fontSize: 14.5, lineHeight: 1.55, margin: 0, marginBottom: 22 }}>{v.desc}</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, flex: 1, marginBottom: 24 }}>
              {(v.id === "ot" ? [
                "All four test families (num/verb/log/sit)",
                "Full walkthroughs for every question",
                "Mock test mode with timer",
                "Quarterly refresh, lifetime access",
              ] : v.id === "vi" ? [
                "Verbatim prompts (HireVue/Pymetrics/Sonru)",
                "Model answers — 60/90/120 sec versions",
                "Scoring rubric scorers actually use",
                "Camera, audio & pacing playbook",
                "Quarterly refresh, lifetime access",
              ] : [
                "Everything in OT and VI",
                "Assessment Centre — group + written case",
                "Partner-round prompts with rubric",
                "Numerical re-test pack (if applicable)",
                "Quarterly refresh, lifetime access",
                "Priority email support",
              ]).map((f, i) => (
                <li key={i} style={{ fontSize: 13.5, color: "var(--text-2)", display: "flex", gap: 10 }}>
                  <span style={{ color: "var(--accent)", flexShrink: 0 }}>✓</span>{f}
                </li>
              ))}
            </ul>
            <button onClick={() => setPage("shop")} className={v.popular ? "btn btn-primary" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center" }}>
              Pick a firm →
            </button>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 32, padding: 28, background: "var(--bg-soft)", border: "1px dashed var(--border-strong)", borderRadius: 12, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>BUNDLE OFFER</div>
          <div style={{ fontSize: 16 }}>Buying packs for 3+ firms? Email us — we'll send a 15% bundle code by return.</div>
        </div>
        <button className="btn btn-dark">hi@forbestoffer.co</button>
      </div>
    </section>
  );
}

function CoachingPricing({ fmt, cart }) {
  return (
    <section className="container" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {D.services.map(o => (
          <div key={o.id} style={{
            position: "relative",
            background: o.popular ? "linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%)" : "var(--surface)",
            border: "1px solid", borderColor: o.popular ? "var(--accent-dim)" : "var(--border)",
            borderRadius: 16, padding: 32, display: "flex", flexDirection: "column",
          }}>
            {o.popular && <span style={{ position: "absolute", top: -12, left: 24, 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 className="mono" style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.1em", marginBottom: 14 }}>{o.sub.toUpperCase()}</div>
            <h3 className="serif-italic" style={{ fontSize: 24, margin: 0, lineHeight: 1.15 }}>{o.name}</h3>
            <div style={{ marginTop: 18, marginBottom: 18, display: "flex", alignItems: "baseline", gap: 10 }}>
              <span className="serif" style={{ fontSize: 48, lineHeight: 0.9, letterSpacing: "-0.02em" }}>{fmt(o.gbp)}</span>
            </div>
            <p style={{ color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.55, margin: 0, flex: 1, marginBottom: 22 }}>{o.desc}</p>
            <button onClick={() => cart.addService(o)} className={o.popular ? "btn btn-primary" : "btn btn-ghost"} style={{ width: "100%", justifyContent: "center" }}>
              Book a coach →
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}

function ComparisonTable({ fmt }) {
  const rows = [
    { label: "Verbatim past questions", cols: ["✓", "✓", "✓"] },
    { label: "Model answers with rubric", cols: ["✓", "✓", "✓"] },
    { label: "Mock test mode", cols: ["✓", "—", "✓"] },
    { label: "HireVue / Pymetrics prompts", cols: ["—", "✓", "✓"] },
    { label: "Group case brief", cols: ["—", "—", "✓"] },
    { label: "Written case dossier", cols: ["—", "—", "✓"] },
    { label: "Partner-round prompts", cols: ["—", "—", "✓"] },
    { label: "Quarterly refresh", cols: ["✓", "✓", "✓"] },
    { label: "Lifetime access", cols: ["✓", "✓", "✓"] },
    { label: "Priority email support", cols: ["—", "—", "✓"] },
  ];
  return (
    <section className="container" style={{ paddingTop: 100, paddingBottom: 80 }}>
      <SectionHeader eyebrow="WHAT'S INCLUDED" title={<>The full <em>spec sheet.</em></>} />
      <div style={{ border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", background: "var(--bg-soft)", padding: "18px 28px", borderBottom: "1px solid var(--border)" }} data-mobile="hide">
          <div className="eyebrow">FEATURE</div>
          {D.variants.map(v => (
            <div key={v.id} style={{ textAlign: "center" }}>
              <div className="eyebrow" style={{ color: v.popular ? "var(--accent)" : "var(--text-3)" }}>{v.name}</div>
              <div className="mono" style={{ fontSize: 13, marginTop: 6 }}>{fmt(v.gbp)}</div>
            </div>
          ))}
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", padding: "16px 28px", borderBottom: i < rows.length - 1 ? "1px solid var(--border)" : "none", alignItems: "center" }}>
            <div style={{ fontSize: 14, color: "var(--text)" }}>{r.label}</div>
            {r.cols.map((v, j) => (
              <div key={j} style={{ textAlign: "center", fontSize: 16, color: v === "✓" ? "var(--accent)" : "var(--text-3)", fontFamily: v === "✓" ? "var(--sans)" : "var(--mono)" }}>{v}</div>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { PricingPage });