/* ========================================================================
   screens-system.jsx — Settings, Export centre, Pricing/billing, Admin
   ====================================================================== */

const SettingsScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="settings" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ width: 18, height: 1, background: "#EFFF00" }} />SETTINGS</div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 24px", color: "#FFF" }}>Workspace · Joel</h1>

        <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 20 }}>
          {/* settings nav */}
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {[
              { l: "Account",         on: true,  i: "user" },
              { l: "Workspace",       on: false, i: "briefcase" },
              { l: "Brand defaults",  on: false, i: "palette" },
              { l: "AI &amp; OpenAI",     on: false, i: "brain" },
              { l: "Supabase &amp; Storage", on: false, i: "globe" },
              { l: "Usage &amp; limits",  on: false, i: "trend" },
              { l: "Billing",         on: false, i: "receipt" },
              { l: "Team &amp; seats",    on: false, i: "users" },
              { l: "Data export",     on: false, i: "download" },
              { l: "Danger zone",     on: false, i: "alert" },
            ].map(it => (
              <div key={it.l} style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 12px", background: it.on ? "#EFFF00" : "#201E18", color: it.on ? "#1A1813" : "#C8C8C5", border: it.on ? "1px solid #ADC700" : "1px solid #3A372F", fontSize: 12, fontWeight: 700 }}>
                <Icon name={it.i} size={13} stroke={2} />
                <span dangerouslySetInnerHTML={{ __html: it.l }} />
              </div>
            ))}
          </div>

          {/* settings body */}
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="card has-corners" style={{ padding: 20 }}>
              <div className="card-title" style={{ marginBottom: 14 }}>Profile</div>
              <div style={{ display: "grid", gridTemplateColumns: "auto 1fr 1fr", gap: 14, alignItems: "center" }}>
                <div style={{ width: 64, height: 64, borderRadius: 99, background: "#EFFF00", color: "#1A1813", display: "grid", placeItems: "center", fontFamily: "'Anton', Impact, sans-serif", fontSize: 26 }}>JL</div>
                <div>
                  <label className="field-label">Display name</label>
                  <input className="input" defaultValue="Joel · BoltKit" />
                </div>
                <div>
                  <label className="field-label">Email</label>
                  <input className="input" defaultValue="joel@boltkit.co.uk" />
                </div>
              </div>
            </div>

            <div className="card" style={{ padding: 20 }}>
              <div className="card-title" style={{ marginBottom: 12 }}>Sync &amp; storage</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
                {[
                  { l: "Supabase",         v: "Connected · joel-boltkit",      st: "sync" },
                  { l: "Storage bucket",   v: "boltkit-assets · 4.2 / 5 GB",   st: "sync" },
                  { l: "OpenAI key",       v: "sk-•••• ZYx2",                    st: "sync" },
                  { l: "Sora rendering",   v: "Not enabled · add billing key",   st: "local" },
                  { l: "Anthropic key",    v: "Not connected",                   st: "local" },
                  { l: "Instagram Graph",  v: "Not connected · waiting on Meta", st: "fail" },
                ].map(t => (
                  <div key={t.l} style={{ padding: 12, background: "#201E18", border: "1px solid #3A372F" }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase" }}>{t.l}</span>
                      <SyncChip state={t.st} />
                    </div>
                    <div style={{ marginTop: 8, color: "#FFF", fontSize: 12.5 }}>{t.v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="card" style={{ padding: 20 }}>
              <div className="card-title" style={{ marginBottom: 12 }}>AI defaults</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div>
                  <label className="field-label">Default model</label>
                  <select className="select"><option>GPT-5 · gpt-5-2026-09 (recommended)</option></select>
                </div>
                <div>
                  <label className="field-label">Brand-lock strictness</label>
                  <select className="select"><option>High · refuse off-brand outputs</option></select>
                </div>
                <div>
                  <label className="field-label">Default tone</label>
                  <select className="select"><option>Builder · punchy · premium</option></select>
                </div>
                <div>
                  <label className="field-label">Founder voice</label>
                  <select className="select"><option>Trained · v2 · 124 posts</option></select>
                </div>
              </div>
            </div>

            {/* danger */}
            <div style={{ border: "1px solid rgba(255,77,94,0.3)", background: "rgba(255,77,94,0.04)", padding: 20 }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", color: "#FF4D5E", fontWeight: 800, textTransform: "uppercase", marginBottom: 8 }}>DANGER ZONE</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 10, alignItems: "center", padding: "10px 0", borderBottom: "1px dashed #333" }}>
                <span style={{ fontSize: 13, color: "#FFF" }}>Export workspace data (JSON + assets)</span>
                <button className="btn btn-secondary btn-sm">Export</button>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 10, alignItems: "center", padding: "10px 0" }}>
                <span style={{ fontSize: 13, color: "#FFF" }}>Delete workspace permanently</span>
                <button className="btn btn-secondary btn-sm" style={{ color: "#FF4D5E", borderColor: "rgba(255,77,94,0.4)" }}>Delete</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const ExportCentreScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="exports" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ width: 18, height: 1, background: "#EFFF00" }} />EXPORT CENTRE</div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 22px", color: "#FFF" }}>Ship the folder.</h1>

        {/* main export cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
          {[
            { i: "zip",  l: "Full Launch ZIP",       d: "Markdown · CSV · JSON · all assets", c: "EXPORT NOW", hl: true },
            { i: "md",   l: "Markdown bundle",       d: "All packs as .md files",             c: "EXPORT" },
            { i: "csv",  l: "Content calendar CSV",  d: "Schedule rows · platform · date",    c: "EXPORT" },
            { i: "json", l: "Project JSON",          d: "Raw project data for backup",        c: "EXPORT" },
          ].map(t => (
            <div key={t.l} style={{ padding: 20, background: t.hl ? "#EFFF00" : "#26241E", color: t.hl ? "#1A1813" : "#FFF", border: t.hl ? "1px solid #ADC700" : "1px solid #3A372F", position: "relative", overflow: "hidden" }}>
              {t.hl && <div style={{ position: "absolute", top: 10, right: 10, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: "2px 6px", background: "#1A1813", color: "#EFFF00", letterSpacing: "0.18em", fontWeight: 800 }}>HERO</div>}
              <div style={{ width: 38, height: 38, background: t.hl ? "#1A1813" : "#2C2A23", border: t.hl ? "1px solid #1A1813" : "1px solid #3A372F", display: "grid", placeItems: "center", color: t.hl ? "#EFFF00" : "#EFFF00" }}>
                <Icon name={t.i} size={16} stroke={2} />
              </div>
              <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 26, marginTop: 12, letterSpacing: "0.02em", textTransform: "uppercase" }}>{t.l}</div>
              <div style={{ fontSize: 12, marginTop: 4, opacity: t.hl ? 0.8 : 1, color: t.hl ? "#1A1813" : "#8A8A8A" }}>{t.d}</div>
              <button className={"btn " + (t.hl ? "btn-dark" : "btn-primary")} style={{ marginTop: 14, width: "100%" }}>
                <Icon name="download" size={12} stroke={2} /> {t.c}
              </button>
            </div>
          ))}
        </div>

        {/* zip preview + history */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 16 }}>
          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>ZIP structure preview</div>
            <pre className="tree" style={{ margin: 0 }}>{`📁 BoltKit Export · Renoo · v3.2/
├── 📄 brand-summary.md
├── 📄 launch-pack.md
├── 📄 instagram-posts.md     · 30 captions
├── 📄 video-scripts.md       · 12 reels
├── 📄 paid-ads.md            · 28 A/B
├── 📄 app-store-copy.md
├── 📄 landing-page-copy.md
├── 📄 seo-pack.md
├── 📄 claude-prompts.md
├── 📄 codex-prompts.md
├── 📄 content-calendar.csv
├── 📄 project-data.json
└── 📁 assets/ · 64 files`}</pre>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>Export history</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {[
                { l: "Renoo-v3.2-export.zip",        sz: "4.2 MB · 132 files", t: "09:02 today", st: "READY" },
                { l: "Renoo-v3.1-export.zip",        sz: "4.0 MB · 124 files", t: "Thu 08:41",  st: "READY" },
                { l: "Atelier-launch-pack.zip",      sz: "2.8 MB · 96 files",  t: "Wed 17:14",  st: "READY" },
                { l: "content-calendar-NOV.csv",     sz: "12 KB",              t: "Mon 11:02",  st: "READY" },
                { l: "Lofti-export.zip",             sz: "1.8 MB · 64 files",  t: "Sun 22:11",  st: "EXPIRED" },
              ].map(h => (
                <div key={h.l} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 10, padding: "8px 10px", background: "#201E18", border: "1px solid #3A372F", alignItems: "center" }}>
                  <div style={{ width: 30, height: 30, background: "#1A1813", border: "1px solid #3A372F", display: "grid", placeItems: "center", color: h.st === "READY" ? "#EFFF00" : "#5C5C5C" }}>
                    <Icon name="zip" size={13} stroke={2} />
                  </div>
                  <div>
                    <div style={{ fontSize: 12, color: "#FFF", fontWeight: 700 }}>{h.l}</div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 2 }}>{h.sz} · {h.t}</div>
                  </div>
                  <span className={"pill " + (h.st === "READY" ? "pill-yellow" : "pill-dark")} style={{ fontSize: 9 }}>{h.st}</span>
                  <button className="icon-btn"><Icon name="download" size={12} stroke={2} /></button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const PricingBillingScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="billing" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8 }}><span style={{ width: 18, height: 1, background: "#EFFF00" }} />PLANS &amp; CREDITS</div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 0", color: "#FFF" }}>Pick your plan</h1>
          </div>
          <Pill tone="amber">PAYMENTS COMING SOON</Pill>
        </div>

        {/* current usage banner */}
        <div className="ai-surface" style={{ padding: 18, marginBottom: 18, display: "grid", gridTemplateColumns: "1fr auto", gap: 18, alignItems: "center" }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>YOUR USAGE · OCTOBER</div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 30, color: "#FFF", textTransform: "uppercase", lineHeight: 1.05, marginTop: 4 }}>11 packs · 132 assets · 28 scheduled posts</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginTop: 14 }}>
              {[
                { l: "PACKS",       v: 11,  m: 25 },
                { l: "AI CALLS",    v: 1842, m: 5000 },
                { l: "VIDEO CREDS", v: 12, m: 60 },
                { l: "STORAGE",     v: 4.2, m: 5, u: "GB" },
              ].map(t => (
                <div key={t.l}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", color: "#8A8A8A", fontWeight: 800 }}>{t.l}</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 2 }}>
                    <span style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#FFF" }}>{t.v}{t.u ? " " + t.u : ""}</span>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#5C5C5C" }}>/ {t.m}{t.u || ""}</span>
                  </div>
                  <div style={{ height: 4, background: "#2C2A23", marginTop: 4 }}>
                    <div style={{ width: (t.v / t.m * 100) + "%", height: "100%", background: "#EFFF00" }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
          <button className="btn btn-primary">Upgrade to Pro <Icon name="arrow_right" size={12} stroke={2.4} /></button>
        </div>

        {/* plan cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {[
            { n: "Free",    p: "0",  per: "ever",       u: ["1 project","Basic launch pack","Limited exports","Local fallback mode"], cta: "Current plan", hl: false, cur: true },
            { n: "Starter", p: "12", per: "mo",         u: ["5 projects","Social + store packs","Export ZIP","Brand kit","Calendar"], cta: "Choose Starter", hl: false },
            { n: "Pro",     p: "29", per: "mo",         u: ["Unlimited projects","Full launch packs","Video scripts","Claude / Codex prompts","Advanced exports","60 video credits / mo"], cta: "Upgrade to Pro", hl: true },
            { n: "Agency",  p: "89", per: "mo · seat",  u: ["Client workspaces","Multi-brand vault","Team features","White-label exports","Priority support","300 video credits / mo"], cta: "Talk to us", hl: false },
          ].map(t => (
            <div key={t.n} style={{ padding: 22, background: t.hl ? "#EFFF00" : "#26241E", border: t.hl ? "1px solid #ADC700" : "1px solid #3A372F", color: t.hl ? "#1A1813" : "#FFF", position: "relative" }}>
              {t.hl && <div style={{ position: "absolute", top: -10, right: 14, background: "#1A1813", color: "#EFFF00", padding: "3px 8px", fontSize: 9, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.18em", fontWeight: 800 }}>POPULAR</div>}
              {t.cur && <div style={{ position: "absolute", top: -10, left: 14, background: "#FFF", color: "#1A1813", padding: "3px 8px", fontSize: 9, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.18em", fontWeight: 800 }}>CURRENT</div>}
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800, opacity: t.hl ? 0.7 : 1, color: t.hl ? "#1A1813" : "#EFFF00" }}>{t.n}</div>
              <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 64, lineHeight: 1, marginTop: 6 }}>£{t.p}<span style={{ fontSize: 14, marginLeft: 4, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.1em", opacity: 0.7 }}>/ {t.per}</span></div>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 18px", display: "flex", flexDirection: "column", gap: 7 }}>
                {t.u.map(li => <li key={li} style={{ display: "flex", gap: 7, alignItems: "flex-start", fontSize: 12.5 }}><Icon name="check" size={12} stroke={2.6} /> {li}</li>)}
              </ul>
              <button className={"btn " + (t.hl ? "btn-dark" : t.cur ? "btn-secondary" : "btn-primary")} style={{ width: "100%" }} disabled={t.cur}>{t.cta}</button>
            </div>
          ))}
        </div>

        {/* video credits */}
        <div style={{ marginTop: 18, background: "#26241E", border: "1px solid #3A372F", padding: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 12 }}>
            <div>
              <div className="card-title">Video credit wallet</div>
              <div style={{ color: "#8A8A8A", fontSize: 12, marginTop: 4 }}>Used for Sora / OpenAI rendering. 25 credits ≈ one 10s reel.</div>
            </div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 38, color: "#EFFF00" }}>48</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            {[
              { c: 50,  p: "£8",   pop: false },
              { c: 200, p: "£28",  pop: true  },
              { c: 600, p: "£72",  pop: false },
            ].map(p => (
              <div key={p.c} style={{ padding: 16, background: p.pop ? "rgba(239,255,0,0.08)" : "#1A1813", border: p.pop ? "1px solid rgba(239,255,0,0.3)" : "1px solid #3A372F", position: "relative" }}>
                {p.pop && <span className="pill pill-yellow" style={{ position: "absolute", top: 10, right: 10, fontSize: 9 }}>BEST</span>}
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 30, color: "#FFF" }}>{p.c} credits</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase", marginTop: 4 }}>{p.p}</div>
                <button className="btn btn-secondary btn-sm" style={{ width: "100%", marginTop: 12 }}>Add pack</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </div>
);

const AdminScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    {/* admin uses a distinct red-accented sidebar to make ownership obvious */}
    <div style={{ width: 220, background: "#080000", borderRight: "1px solid #2A0000", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "16px 14px", borderBottom: "1px solid #2A0000", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ width: 30, height: 30, background: "#FF4D5E", color: "#FFF", display: "grid", placeItems: "center", borderRadius: 4 }}>
          <Icon name="shield" size={16} stroke={2} />
        </div>
        <div>
          <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 18, color: "#FFF" }}>ADMIN · CRM</div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, color: "#FF4D5E", letterSpacing: "0.16em", fontWeight: 800 }}>OWNER-ONLY</div>
        </div>
      </div>
      <div style={{ padding: 10 }}>
        {[
          { l: "Dashboard",       i: "grid",   on: true },
          { l: "Customers",       i: "users",  n: "182" },
          { l: "Projects",        i: "folder", n: "1.2k" },
          { l: "Credits / Plans", i: "receipt" },
          { l: "AI jobs",         i: "brain",  n: "12" },
          { l: "IG scheduler",    i: "insta" },
          { l: "Exports",         i: "download" },
          { l: "Feature flags",   i: "settings" },
          { l: "System health",   i: "trend" },
          { l: "Activity log",    i: "list" },
          { l: "Support notes",   i: "doc" },
        ].map(it => (
          <div key={it.l} style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 10px", borderRadius: 4, color: it.on ? "#1A1813" : "#C8C8C5", background: it.on ? "#FF4D5E" : "transparent", fontSize: 12, fontWeight: 700, marginBottom: 2 }}>
            <Icon name={it.i} size={13} stroke={2} />
            <span>{it.l}</span>
            {it.n && <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, padding: "1px 5px", background: it.on ? "#1A1813" : "#1A1A1A", color: it.on ? "#FF4D5E" : "#8A8A8A", borderRadius: 3, fontWeight: 700 }}>{it.n}</span>}
          </div>
        ))}
      </div>
    </div>

    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ height: 52, background: "rgba(20,0,0,0.6)", borderBottom: "1px solid #2A0000", display: "flex", alignItems: "center", padding: "0 16px", gap: 10 }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em", color: "#FF4D5E", fontWeight: 800, textTransform: "uppercase" }}>OWNER ADMIN · joel@boltkit.co.uk</span>
        <SyncChip state="sync" />
        <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800 }}>v1.4.2 · production</span>
      </div>
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#FF4D5E", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ width: 18, height: 1, background: "#FF4D5E" }} />ADMIN · INTERNAL</div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 22px", color: "#FFF" }}>System Overview</h1>

        <div className="mini-tiles">
          <div className="mini-tile" style={{ borderColor: "#2A0000" }}>
            <div className="l">CUSTOMERS</div>
            <div className="v">182</div>
            <div className="t"><span style={{ color: "#FF4D5E", fontWeight: 800 }}>+14</span> this week</div>
          </div>
          <div className="mini-tile" style={{ borderColor: "#2A0000" }}>
            <div className="l">PROJECTS</div>
            <div className="v">1,284</div>
            <div className="t">avg 7 per customer</div>
          </div>
          <div className="mini-tile" style={{ borderColor: "#2A0000" }}>
            <div className="l">AI CALLS · 24H</div>
            <div className="v">18.2<span className="u">K</span></div>
            <div className="t">12 jobs queued</div>
          </div>
          <div className="mini-tile" style={{ borderColor: "#2A0000" }}>
            <div className="l">REVENUE · MRR</div>
            <div className="v">£0</div>
            <div className="t">Payments not enabled</div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14, marginTop: 18 }}>
          <div className="card" style={{ padding: 18, borderColor: "#2A0000" }}>
            <div className="card-title" style={{ marginBottom: 12 }}>Customer activity</div>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
              <thead>
                <tr style={{ color: "#5C5C5C", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800 }}>
                  {["Customer","Plan","Projects","Packs","Last seen","Status"].map(h => <th key={h} style={{ textAlign: "left", padding: "8px 6px", borderBottom: "1px solid #2A0000" }}>{h}</th>)}
                </tr>
              </thead>
              <tbody>
                {[
                  { c: "joel@boltkit.co.uk",  p: "Owner",    pj: 6,  pk: 11, t: "now",       s: "ACTIVE" },
                  { c: "amy@studio42.io",     p: "Pro",      pj: 4,  pk: 8,  t: "12 m ago",  s: "ACTIVE" },
                  { c: "raj@halftone.app",    p: "Starter",  pj: 2,  pk: 3,  t: "1 h ago",   s: "ACTIVE" },
                  { c: "kai@lofti.live",      p: "Free",     pj: 1,  pk: 1,  t: "3 h ago",   s: "TRIAL" },
                  { c: "sam@atelier.design",  p: "Pro",      pj: 9,  pk: 22, t: "yesterday", s: "ACTIVE" },
                  { c: "mira@spritely.io",    p: "Free",     pj: 1,  pk: 1,  t: "4 d ago",   s: "STALE" },
                ].map(r => (
                  <tr key={r.c} style={{ borderBottom: "1px solid #1A0000" }}>
                    <td style={{ padding: "10px 6px", color: "#FFF" }}>{r.c}</td>
                    <td style={{ padding: "10px 6px", color: "#C8C8C5" }}>{r.p}</td>
                    <td style={{ padding: "10px 6px", color: "#C8C8C5" }}>{r.pj}</td>
                    <td style={{ padding: "10px 6px", color: "#C8C8C5" }}>{r.pk}</td>
                    <td style={{ padding: "10px 6px", color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace" }}>{r.t}</td>
                    <td style={{ padding: "10px 6px" }}>
                      <Pill tone={r.s === "ACTIVE" ? "green" : r.s === "TRIAL" ? "amber" : "dark"}>{r.s}</Pill>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* AI jobs */}
          <div className="card" style={{ padding: 18, borderColor: "#2A0000" }}>
            <div className="card-title" style={{ marginBottom: 10 }}>AI jobs · live</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {[
                { l: "Renoo · Full Launch Pack",   s: "RUN", p: 78 },
                { l: "Atelier · Instagram 90",     s: "RUN", p: 42 },
                { l: "Lofti · Video Scripts",      s: "QUEUE", p: 0 },
                { l: "Halftone · App Store",       s: "QUEUE", p: 0 },
                { l: "Renoo · Codex Prompts · v3", s: "DONE", p: 100 },
              ].map(j => (
                <div key={j.l} style={{ padding: "8px 10px", background: "#201E18", border: "1px solid #1A0000" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                    <span style={{ fontSize: 12, color: "#FFF" }}>{j.l}</span>
                    <span className={"pill " + (j.s === "RUN" ? "pill-yellow" : j.s === "QUEUE" ? "pill-dark" : "pill-green")} style={{ fontSize: 9 }}>{j.s}</span>
                  </div>
                  <div style={{ height: 3, background: "#1A0000" }}>
                    <div style={{ width: j.p + "%", height: "100%", background: j.s === "DONE" ? "#4ADE80" : "#EFFF00" }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { SettingsScreen, ExportCentreScreen, PricingBillingScreen, AdminScreen });