// Admin / seller dashboard — separate layout from the customer site

function AdminApp({ setPage, fmt }) {
  const [view, setView] = useState("orders");
  const groups = [
    { label: "OPERATIONS", items: [
      { id: "orders",    label: "Orders",            n: "01" },
      { id: "products",  label: "Catalogue",         n: "02" },
      { id: "coaches",   label: "Coach Roster",      n: "03" },
      { id: "refresh",   label: "Refresh Calendar",  n: "04" },
    ]},
    { label: "ANALYTICS", items: [
      { id: "dashboard", label: "Overview",          n: "05" },
      { id: "analytics", label: "Deep dive",         n: "06" },
    ]},
  ];
  return (
    <div style={{ minHeight: "100vh", display: "grid", gridTemplateColumns: "240px 1fr", background: "var(--bg)" }} data-mobile="stack">
      {/* Sidebar */}
      <aside style={{ borderRight: "1px solid var(--border)", padding: "32px 24px", display: "flex", flexDirection: "column", gap: 24, background: "var(--bg-soft)" }}>
        <div>
          <Logo size={20} />
          <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.12em", marginTop: 8 }}>ADMIN · INTERNAL</div>
        </div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          {groups.map(g => (
            <div key={g.label}>
              <div className="eyebrow" style={{ fontSize: 9.5, marginBottom: 8, paddingLeft: 12 }}>{g.label}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                {g.items.map(it => (
                  <button key={it.id} onClick={() => setView(it.id)} style={{
                    textAlign: "left", padding: "10px 12px", borderRadius: 6, fontSize: 13.5,
                    background: view === it.id ? "var(--surface)" : "transparent",
                    color: view === it.id ? "var(--text)" : "var(--text-2)",
                    border: "1px solid", borderColor: view === it.id ? "var(--border)" : "transparent",
                    display: "flex", alignItems: "center", gap: 12,
                  }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--text-3)" }}>{it.n}</span>
                    {it.label}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </nav>
        <div style={{ marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--border)" }}>
          <button className="btn btn-dark btn-sm" style={{ width: "100%", justifyContent: "center" }} onClick={() => setPage("home")}>
            ← Back to storefront
          </button>
        </div>
      </aside>

      {/* Main */}
      <main style={{ padding: "32px 40px", minWidth: 0 }}>
        {view === "dashboard" && <AdminDashboard fmt={fmt} setView={setView} />}
        {view === "analytics" && <AdminAnalytics fmt={fmt} />}
        {view === "products"  && <AdminProducts  fmt={fmt} />}
        {view === "orders"    && <AdminOrders    fmt={fmt} />}
        {view === "coaches"   && <AdminCoaches />}
        {view === "refresh"   && <AdminRefresh />}
      </main>
    </div>
  );
}

function AdminDashboard({ fmt, setView }) {
  const [range, setRange] = useState("30d");
  const ranges = [
    { id: "7d",   label: "7d",   n: 7  },
    { id: "30d",  label: "30d",  n: 30 },
    { id: "90d",  label: "90d",  n: 90 },
    { id: "365d", label: "1y",   n: 52 },
    { id: "ytd",  label: "YTD",  n: 20 },
  ];
  const rng = ranges.find(r => r.id === range);

  // Generate deterministic but range-varying series
  const rev = useMemo(() => {
    const r = seedRand(rng.n * 17);
    return Array.from({ length: rng.n }, (_, i) => Math.floor(800 + r() * 1400 + Math.sin(i / 4) * 250 + i * 8));
  }, [rng.n]);
  const revPrev = useMemo(() => {
    const r = seedRand(rng.n * 31);
    return Array.from({ length: rng.n }, () => Math.floor(700 + r() * 1100));
  }, [rng.n]);
  const labels = Array.from({ length: rng.n }, (_, i) => `${i + 1}`);

  const totalRev  = rev.reduce((s, x) => s + x, 0);
  const totalPrev = revPrev.reduce((s, x) => s + x, 0);
  const revDelta  = ((totalRev - totalPrev) / totalPrev) * 100;

  const orders = Math.round(totalRev / 22);
  const aov = totalRev / orders;
  const signups = Math.round(orders * 0.41);
  const refundRate = 1.2;

  const kpis = [
    { l: "REVENUE",      v: fmt(totalRev),  d: `${revDelta > 0 ? "+" : ""}${revDelta.toFixed(1)}%`, spark: rev.slice(-12),       up: revDelta > 0 },
    { l: "ORDERS",       v: orders.toLocaleString(), d: "+12.1%",                                  spark: rev.slice(-12).map(x => x / 22), up: true },
    { l: "AVG ORDER",    v: fmt(Math.round(aov)),    d: "+2.4%",                                   spark: [22, 23, 22, 24, 24, 25, 24, 26, 25, 27, 26, 27], up: true },
    { l: "NEW SIGN-UPS", v: signups.toLocaleString(),d: "+22%",                                    spark: [4, 5, 6, 5, 7, 8, 7, 9, 10, 11, 12, 13], up: true },
    { l: "REFUND RATE",  v: `${refundRate}%`,         d: "−0.3pp",                                  spark: [1.6, 1.5, 1.7, 1.4, 1.5, 1.3, 1.4, 1.3, 1.2, 1.3, 1.2, 1.2], up: false, color: "var(--text-3)" },
  ];

  return (
    <div>
      <AdminHeader title="Overview" sub="Live operations across the catalogue, coach roster and refresh calendar.">
        <div style={{ display: "flex", gap: 4, border: "1px solid var(--border)", borderRadius: 999, padding: 3 }}>
          {ranges.map(r => (
            <button key={r.id} onClick={() => setRange(r.id)} style={{
              padding: "5px 12px", fontSize: 12, borderRadius: 999,
              background: range === r.id ? "var(--text)" : "transparent",
              color: range === r.id ? "var(--bg)" : "var(--text-2)",
              fontFamily: "var(--mono)", letterSpacing: "0.06em",
            }}>{r.label.toUpperCase()}</button>
          ))}
        </div>
        <button className="btn btn-dark btn-sm">Export</button>
      </AdminHeader>

      {/* KPI row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, marginBottom: 24 }} data-mobile="split2">
        {kpis.map((k, i) => (
          <div key={i} className="card" style={{ padding: 20 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div className="eyebrow" style={{ fontSize: 10 }}>{k.l}</div>
              <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: k.up === false ? "var(--text-3)" : k.up ? "var(--success, #7ea15a)" : "var(--danger, #d97757)", letterSpacing: "0.06em" }}>{k.d}</span>
            </div>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 34, lineHeight: 1, marginTop: 10, letterSpacing: "-0.02em" }}>{k.v}</div>
            <div style={{ marginTop: 14, marginLeft: -4 }}>
              <Sparkline data={k.spark} color={k.color || "var(--accent)"} />
            </div>
          </div>
        ))}
      </div>

      {/* Revenue chart — full width */}
      <div className="card" style={{ padding: 24, marginBottom: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
          <div>
            <div className="eyebrow">REVENUE · {range.toUpperCase()}</div>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 36, lineHeight: 1, marginTop: 8, letterSpacing: "-0.02em" }}>{fmt(totalRev)}</div>
            <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 6 }}>
              <span style={{ display: "inline-block", width: 10, height: 2, background: "var(--accent)", verticalAlign: 2, marginRight: 8 }} />This period
              <span style={{ display: "inline-block", width: 10, height: 2, background: "var(--text-3)", verticalAlign: 2, marginLeft: 18, marginRight: 8 }} />Previous period
            </div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="btn btn-dark btn-sm" style={{ fontSize: 11.5 }}>By day</button>
            <button className="btn btn-dark btn-sm" style={{ fontSize: 11.5 }}>By category</button>
            <button className="btn btn-dark btn-sm" style={{ fontSize: 11.5 }}>By region</button>
          </div>
        </div>
        <AreaChart data={rev} comparison={revPrev} labels={labels} />
      </div>

      {/* Two-col: Funnel + Category donut */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 24 }} data-mobile="stack">
        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 22 }}>
            <div>
              <div className="eyebrow">CONVERSION FUNNEL</div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, marginTop: 6 }}>Visitor → buyer</div>
            </div>
            <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>3.2% overall</span>
          </div>
          <Funnel stages={[
            { label: "Visitors",     value: 18420 },
            { label: "Browsed firm", value: 9810  },
            { label: "Add to cart",  value: 2640  },
            { label: "Checkout",     value: 1080  },
            { label: "Paid",         value: 591   },
          ]} />
        </div>
        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>REVENUE BY CATEGORY</div>
          <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <Donut data={[
              { label: "Investment Banking", value: 4842 },
              { label: "Consulting",         value: 3128 },
              { label: "Big Four",           value: 1862 },
              { label: "Quant & Trading",    value: 1240 },
              { label: "Asia Banks",         value: 820  },
              { label: "Other",              value: 480  },
            ]} size={160} thickness={22} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6, fontSize: 12 }}>
              {[
                ["Investment Banking", "38%"],
                ["Consulting",         "25%"],
                ["Big Four",           "15%"],
                ["Quant & Trading",    "10%"],
                ["Asia Banks",         "7%"],
                ["Other",              "5%"],
              ].map(([n, p], i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", color: "var(--text-2)" }}>
                  <span style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: ["var(--accent)", "color-mix(in oklab, var(--accent) 70%, var(--text))", "var(--text)", "color-mix(in oklab, var(--text) 70%, var(--text-3))", "var(--text-3)", "var(--border-strong)"][i] }} />
                    {n}
                  </span>
                  <span className="mono" style={{ color: "var(--text-3)" }}>{p}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Three-col: top firms + geography + variants */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} data-mobile="stack">
        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>TOP FIRMS</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)", marginBottom: 4 }}>BY REVENUE · {range.toUpperCase()}</div>
          {[
            { n: "Goldman Sachs",      v: 8640, c: 312 },
            { n: "McKinsey & Company", v: 6912, c: 248 },
            { n: "Bain & Company",     v: 5832, c: 219 },
            { n: "Optiver",            v: 4416, c: 184 },
            { n: "Barclays",           v: 3456, c: 162 },
            { n: "Citi",               v: 3804, c: 148 },
          ].map(f => <BarRow key={f.n} label={f.n} value={fmt(f.v)} max={9000} sub={`${f.c} orders`} accent="var(--accent)" />)}
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>GEOGRAPHY</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)", marginBottom: 4 }}>BY COUNTRY · {range.toUpperCase()}</div>
          {[
            { n: "United Kingdom",  v: 38 },
            { n: "United States",   v: 24 },
            { n: "Hong Kong",       v: 14 },
            { n: "Singapore",       v: 11 },
            { n: "Australia",        v: 6  },
            { n: "Other",            v: 7  },
          ].map(f => <BarRow key={f.n} label={f.n} value={`${f.v}%`} max={40} accent="color-mix(in oklab, var(--accent) 75%, var(--text))" />)}
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>VARIANT MIX</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--text-3)", marginBottom: 4 }}>WHAT BUYERS PICK</div>
          {[
            { n: "Full Pack · £30",       v: 62 },
            { n: "VI Module · £18",       v: 22 },
            { n: "OT Module · £15",       v: 12 },
            { n: "Coaching — case mock",   v: 8  },
            { n: "Coaching — VI mock",     v: 5  },
            { n: "Pre-AC sprint",           v: 3  },
          ].map(f => <BarRow key={f.n} label={f.n} value={`${f.v}%`} max={65} accent="var(--text)" />)}
        </div>
      </div>

      <button onClick={() => setView("analytics")} className="btn btn-ghost" style={{ marginTop: 28 }}>
        Open deep-dive analytics →
      </button>
    </div>
  );
}

// ─── Full Analytics view ────────────────────────────────────────────
function AdminAnalytics({ fmt }) {
  const [range, setRange] = useState("90d");

  // Hour-of-day & day-of-week heatmap
  const days = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
  const hours = ["00", "03", "06", "09", "12", "15", "18", "21"];
  const heat = useMemo(() => {
    const r = seedRand(42);
    return days.map((d, i) => ({
      label: d,
      values: hours.map((_, h) => {
        const peak = h >= 3 && h <= 6 ? 80 : h === 2 || h === 7 ? 50 : 20;
        const wk = (i === 5 || i === 6) ? 0.6 : 1;
        return Math.round(peak * wk + r() * 30);
      }),
    }));
  }, []);

  const cohort = useMemo(() => {
    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    return months.map((m, i) => ({
      label: `${m} 2026`,
      values: months.map((_, j) => {
        if (j < i) return null;
        if (j === i) return 100;
        const decay = [88, 64, 48, 38, 32][j - i - 1] || 28;
        return Math.max(20, decay - i * 2);
      }),
    }));
  }, []);

  return (
    <div>
      <AdminHeader title="Analytics workspace" sub="Cohort retention, hour-of-day demand, refund reasons and acquisition channels.">
        <div style={{ display: "flex", gap: 4, border: "1px solid var(--border)", borderRadius: 999, padding: 3 }}>
          {["30d", "90d", "365d"].map(r => (
            <button key={r} onClick={() => setRange(r)} style={{
              padding: "5px 12px", fontSize: 12, borderRadius: 999,
              background: range === r ? "var(--text)" : "transparent",
              color: range === r ? "var(--bg)" : "var(--text-2)",
              fontFamily: "var(--mono)", letterSpacing: "0.06em",
            }}>{r.toUpperCase()}</button>
          ))}
        </div>
        <button className="btn btn-dark btn-sm">Schedule report</button>
      </AdminHeader>

      {/* Cohort retention */}
      <div className="card" style={{ padding: 24, marginBottom: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <div className="eyebrow">COHORT RETENTION</div>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, marginTop: 6 }}>% of cohort returning to buy a second bank</div>
          </div>
          <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>M+3 RETENTION → 48%</span>
        </div>
        <CohortGrid
          cols={["M+0", "M+1", "M+2", "M+3", "M+4", "M+5"]}
          rows={cohort}
        />
      </div>

      {/* Three-col: peak hour heatmap + acquisition + refund reasons */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 16, marginBottom: 24 }} data-mobile="stack">
        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>DEMAND BY HOUR × DAY (UK TIME)</div>
          <CohortGrid cols={hours.map(h => `${h}:00`)} rows={heat} />
          <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 14, lineHeight: 1.5 }}>
            Peak demand sits 09:00–18:00 weekdays. Notable spike Sunday evening (assessment-centre week).
          </div>
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>ACQUISITION SOURCE</div>
          {[
            { n: "Direct",            v: 38 },
            { n: "Search (organic)",  v: 22 },
            { n: "Xiaohongshu repost",v: 12 },
            { n: "Referral",          v: 11 },
            { n: "University Slack",  v: 8  },
            { n: "Other",             v: 9  },
          ].map(f => <BarRow key={f.n} label={f.n} value={`${f.v}%`} max={40} />)}
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>REFUND REASONS</div>
          {[
            { n: "Bought wrong firm",        v: 42 },
            { n: "Decided not to apply",      v: 28 },
            { n: "Found cheaper alternative", v: 14 },
            { n: "Quality concern",           v: 10 },
            { n: "Other",                     v: 6  },
          ].map(f => <BarRow key={f.n} label={f.n} value={`${f.v}%`} max={45} accent="var(--text-3)" />)}
          <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 14, lineHeight: 1.5 }}>
            Action item: better firm clarity in cart could cut 42% of refunds.
          </div>
        </div>
      </div>

      {/* Two-col: time-to-purchase + LTV */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 24 }} data-mobile="stack">
        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
            <div>
              <div className="eyebrow">TIME TO FIRST PURCHASE</div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 30, marginTop: 6 }}>4.2 days</div>
              <div style={{ fontSize: 12, color: "var(--text-3)" }}>median, from sign-up to first paid order</div>
            </div>
            <span className="mono" style={{ fontSize: 11, color: "var(--success, #7ea15a)" }}>−0.8d vs prev</span>
          </div>
          <AreaChart data={[7.1, 6.8, 6.4, 5.9, 5.6, 5.2, 4.9, 4.7, 4.5, 4.3, 4.2, 4.2]} height={140} labels={["jan", "feb", "mar", "apr", "may"]} accent="color-mix(in oklab, var(--accent) 60%, var(--text))" />
        </div>
        <div className="card" style={{ padding: 24 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
            <div>
              <div className="eyebrow">CUSTOMER LIFETIME VALUE</div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 30, marginTop: 6 }}>{fmt(64)}</div>
              <div style={{ fontSize: 12, color: "var(--text-3)" }}>median across all customers, all-time</div>
            </div>
            <span className="mono" style={{ fontSize: 11, color: "var(--success, #7ea15a)" }}>+11% YoY</span>
          </div>
          <AreaChart data={[42, 44, 47, 49, 52, 55, 56, 58, 60, 61, 63, 64]} height={140} labels={["jan", "feb", "mar", "apr", "may"]} />
        </div>
      </div>

      {/* Coaching analytics */}
      <div className="card" style={{ padding: 24, marginBottom: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <div className="eyebrow">COACHING PERFORMANCE</div>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, marginTop: 6 }}>Top coaches by session count & rating</div>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }} data-mobile="split2">
          {[
            { i: "M.", firm: "McKinsey",  sess: 98, rating: 4.9, util: 92 },
            { i: "A.", firm: "Goldman",   sess: 142, rating: 4.8, util: 88 },
            { i: "R.", firm: "Optiver",   sess: 76,  rating: 4.7, util: 81 },
            { i: "S.", firm: "Bain",      sess: 64,  rating: 4.8, util: 74 },
          ].map(c => (
            <div key={c.i} style={{ background: "var(--bg-soft)", border: "1px solid var(--border)", borderRadius: 8, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
                <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, color: "var(--accent)" }}>{c.i}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>★ {c.rating}</span>
              </div>
              <div style={{ fontSize: 14 }}>{c.firm}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--text-3)", marginTop: 4, letterSpacing: "0.06em" }}>{c.sess} SESSIONS</div>
              <div style={{ marginTop: 14 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--text-3)", letterSpacing: "0.06em", marginBottom: 4 }}>UTILISATION {c.util}%</div>
                <div style={{ height: 4, background: "var(--surface-2)", borderRadius: 2 }}>
                  <div style={{ height: "100%", width: `${c.util}%`, background: "var(--accent)" }} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AdminProducts({ fmt }) {
  const [q, setQ] = useState("");
  const filtered = D.companies.filter(c => `${c.n} ${c.t}`.toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <AdminHeader title="Catalogue" sub="83 firms · 240+ roles · 720+ active SKUs. Click any firm to manage its roles and variants.">
        <button className="btn btn-primary btn-sm">+ Add firm</button>
        <button className="btn btn-dark btn-sm">Import CSV</button>
        <button className="btn btn-dark btn-sm">Export</button>
      </AdminHeader>
      <div style={{ marginBottom: 16, display: "flex", gap: 10 }}>
        <input className="input" placeholder="Search firm name or ticker…" value={q} onChange={e => setQ(e.target.value)} style={{ maxWidth: 320 }} />
        <select className="input" style={{ maxWidth: 200 }}>
          {["All categories", ...Object.values(D.cat).map(c => c.label)].map(x => <option key={x}>{x}</option>)}
        </select>
        <select className="input" style={{ maxWidth: 180 }}>
          {["All status", "Live", "Draft", "Refresh due"].map(x => <option key={x}>{x}</option>)}
        </select>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.6fr 2fr 1fr 0.7fr 0.7fr 0.8fr 0.6fr", gap: 0, padding: "14px 20px", background: "var(--bg-soft)", borderBottom: "1px solid var(--border)" }}>
          {["TICKER", "FIRM", "CATEGORY", "ROLES", "SKUS", "LAST REFRESH", ""].map(h => (
            <span key={h} className="eyebrow" style={{ fontSize: 10 }}>{h}</span>
          ))}
        </div>
        {filtered.slice(0, 18).map((c, i) => (
          <div key={c.t} style={{ display: "grid", gridTemplateColumns: "0.6fr 2fr 1fr 0.7fr 0.7fr 0.8fr 0.6fr", gap: 0, padding: "14px 20px", borderTop: i > 0 ? "1px solid var(--border)" : "none", alignItems: "center", fontSize: 13.5 }}>
            <span className="mono" style={{ fontSize: 12, color: "var(--text-2)", letterSpacing: "0.05em" }}>{c.t}</span>
            <span>{c.n}</span>
            <span style={{ color: "var(--text-3)", fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.05em" }}>{D.cat[c.c].short}</span>
            <span style={{ color: "var(--text-2)" }}>{c.roles.length}</span>
            <span style={{ color: "var(--text-2)" }}>{c.roles.length * 3}</span>
            <span style={{ color: "var(--text-3)", fontSize: 12 }}>{[14, 21, 7, 30, 12, 18, 4, 28, 9][i % 9]}d ago</span>
            <span style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
              <button style={{ fontSize: 12, color: "var(--accent)" }}>Edit</button>
              <button style={{ fontSize: 12, color: "var(--text-3)" }}>···</button>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AdminOrders({ fmt }) {
  const rows = [
    { id: "FBO-4291-2026", c: "sophia.c@lse.ac.uk",     items: "Goldman · Full Pack",       total: 30, status: "Delivered" },
    { id: "FBO-4290-2026", c: "daniel.h@ucl.ac.uk",     items: "McKinsey · Full Pack",      total: 30, status: "Delivered" },
    { id: "FBO-4289-2026", c: "j.owen@oxford.ac.uk",    items: "Barclays · OT",             total: 15, status: "Delivered" },
    { id: "FBO-4288-2026", c: "yuki.t@imperial.ac.uk",  items: "Optiver · VI",              total: 18, status: "Delivered" },
    { id: "FBO-4287-2026", c: "aarav.p@warwick.ac.uk",  items: "Bain · Full Pack + Coach",  total: 120, status: "Coach pending" },
    { id: "FBO-4286-2026", c: "li.m@hku.hk",            items: "EY · OT",                   total: 15, status: "Delivered" },
    { id: "FBO-4285-2026", c: "chen.j@nyu.edu",         items: "Blackstone · Full Pack",    total: 30, status: "Refunded" },
    { id: "FBO-4284-2026", c: "ana.r@imperial.ac.uk",   items: "Citi · Full Pack",          total: 30, status: "Delivered" },
  ];
  return (
    <div>
      <AdminHeader title="Orders" sub="Recent transactions across the platform. Click any row to view fulfillment detail.">
        <button className="btn btn-dark btn-sm">Export</button>
      </AdminHeader>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.6fr 2fr 0.6fr 0.9fr 0.5fr", padding: "14px 20px", background: "var(--bg-soft)", borderBottom: "1px solid var(--border)" }}>
          {["REFERENCE", "CUSTOMER", "ITEMS", "TOTAL", "STATUS", ""].map(h => <span key={h} className="eyebrow" style={{ fontSize: 10 }}>{h}</span>)}
        </div>
        {rows.map((r, i) => (
          <div key={r.id} style={{ display: "grid", gridTemplateColumns: "1.2fr 1.6fr 2fr 0.6fr 0.9fr 0.5fr", padding: "14px 20px", borderTop: i > 0 ? "1px solid var(--border)" : "none", fontSize: 13.5, alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 12, color: "var(--text-2)" }}>{r.id}</span>
            <span style={{ color: "var(--text-2)", fontSize: 13 }}>{r.c}</span>
            <span>{r.items}</span>
            <span className="mono">{fmt(r.total)}</span>
            <span><StatusPill status={r.status} /></span>
            <span style={{ textAlign: "right", color: "var(--text-3)" }}>···</span>
          </div>
        ))}
      </div>
    </div>
  );
}
function StatusPill({ status }) {
  const colors = {
    "Delivered":      { fg: "var(--success, #7ea15a)", bg: "rgba(126,161,90,0.12)" },
    "Coach pending":  { fg: "var(--accent)",           bg: "rgba(212,160,74,0.12)" },
    "Refunded":       { fg: "var(--text-3)",           bg: "var(--surface-2)" },
  };
  const c = colors[status] || colors.Delivered;
  return <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, padding: "3px 9px", borderRadius: 999, background: c.bg, color: c.fg, letterSpacing: "0.08em", textTransform: "uppercase" }}>{status}</span>;
}

function AdminCoaches() {
  const rows = [
    { i: "A.", firm: "Goldman Sachs",     yrs: 8, sess: 142, rating: 4.8, status: "Live" },
    { i: "M.", firm: "McKinsey",          yrs: 6, sess: 98,  rating: 4.9, status: "Live" },
    { i: "R.", firm: "Optiver",           yrs: 5, sess: 76,  rating: 4.7, status: "Live" },
    { i: "S.", firm: "Bain",              yrs: 4, sess: 64,  rating: 4.8, status: "Live" },
    { i: "T.", firm: "EY-Parthenon",      yrs: 5, sess: 51,  rating: 4.6, status: "On hold" },
    { i: "L.", firm: "Blackstone",        yrs: 4, sess: 42,  rating: 4.9, status: "Live" },
    { i: "K.", firm: "DBS",               yrs: 3, sess: 38,  rating: 4.7, status: "Live" },
    { i: "J.", firm: "Amazon",            yrs: 6, sess: 71,  rating: 4.5, status: "Live" },
  ];
  return (
    <div>
      <AdminHeader title="Coach Roster" sub="38 active coaches. Manage availability, verify credentials and track session quality.">
        <button className="btn btn-primary btn-sm">+ Onboard coach</button>
      </AdminHeader>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "0.5fr 1.6fr 0.7fr 0.8fr 0.8fr 0.8fr 0.5fr", padding: "14px 20px", background: "var(--bg-soft)", borderBottom: "1px solid var(--border)" }}>
          {["", "FIRM", "YEARS", "SESSIONS", "RATING", "STATUS", ""].map(h => <span key={h} className="eyebrow" style={{ fontSize: 10 }}>{h}</span>)}
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "0.5fr 1.6fr 0.7fr 0.8fr 0.8fr 0.8fr 0.5fr", padding: "14px 20px", borderTop: i > 0 ? "1px solid var(--border)" : "none", fontSize: 13.5, alignItems: "center" }}>
            <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 24, color: "var(--accent)" }}>{r.i}</span>
            <span>{r.firm}</span>
            <span style={{ color: "var(--text-2)" }}>{r.yrs}</span>
            <span style={{ color: "var(--text-2)" }}>{r.sess}</span>
            <span className="mono" style={{ color: "var(--accent)" }}>★ {r.rating}</span>
            <span><StatusPill status={r.status === "Live" ? "Delivered" : "Refunded"} /></span>
            <span style={{ textAlign: "right", color: "var(--text-3)" }}>···</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AdminRefresh() {
  const due = [
    { firm: "Goldman Sachs IBD",   nextRefresh: "in 14 days", contrib: 4, status: "On track"     },
    { firm: "McKinsey BA Case",    nextRefresh: "in 9 days",  contrib: 2, status: "Needs review" },
    { firm: "Barclays Spring Wk",  nextRefresh: "in 3 days",  contrib: 6, status: "Ready" },
    { firm: "Bain AC",             nextRefresh: "in 21 days", contrib: 3, status: "On track" },
    { firm: "Optiver Trader",      nextRefresh: "in 6 days",  contrib: 1, status: "Needs review" },
    { firm: "Blackstone PE",       nextRefresh: "in 18 days", contrib: 2, status: "On track" },
  ];
  return (
    <div>
      <AdminHeader title="Refresh Calendar" sub="Every bank refreshes on a 90-day cycle. Track contributions and verification before the next ship date.">
        <button className="btn btn-dark btn-sm">Open calendar view</button>
      </AdminHeader>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 0.5fr", padding: "14px 20px", background: "var(--bg-soft)", borderBottom: "1px solid var(--border)" }}>
          {["BANK", "NEXT REFRESH", "NEW CONTRIBS", "STATUS", ""].map(h => <span key={h} className="eyebrow" style={{ fontSize: 10 }}>{h}</span>)}
        </div>
        {due.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 0.5fr", padding: "14px 20px", borderTop: i > 0 ? "1px solid var(--border)" : "none", fontSize: 13.5, alignItems: "center" }}>
            <span>{r.firm}</span>
            <span style={{ color: "var(--text-2)", fontFamily: "var(--mono)", fontSize: 12 }}>{r.nextRefresh.toUpperCase()}</span>
            <span style={{ color: "var(--accent)" }}>+{r.contrib}</span>
            <span><StatusPill status={r.status === "Ready" ? "Delivered" : r.status === "Needs review" ? "Coach pending" : "Refunded"} /></span>
            <span style={{ textAlign: "right", color: "var(--text-3)" }}>···</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AdminHeader({ title, sub, children }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, paddingBottom: 24, borderBottom: "1px solid var(--border)", gap: 16, flexWrap: "wrap" }}>
      <div>
        <h1 style={{ margin: 0, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 40, letterSpacing: "-0.02em", lineHeight: 1.05 }}>{title}</h1>
        {sub && <p style={{ margin: "10px 0 0", color: "var(--text-2)", fontSize: 13.5, maxWidth: 720 }}>{sub}</p>}
      </div>
      {children && <div style={{ display: "flex", gap: 8 }}>{children}</div>}
    </div>
  );
}

Object.assign(window, { AdminApp });