/* ========================================================================
   screens-tokens.jsx — design tokens + component library on one canvas
   ====================================================================== */

const TokensSurface = () => (
  <div className="lab">
    {/* Color tokens */}
    <h3>Surfaces &amp; ink</h3>
    <div className="swatch-row">
      {[
        { n: "--bg",         h: "#1A1813", bg: "#1A1813", fg: "#F4F4F0" },
        { n: "--bg-2",       h: "#201E18", bg: "#201E18", fg: "#F4F4F0" },
        { n: "--surface",    h: "#26241E", bg: "#26241E", fg: "#F4F4F0" },
        { n: "--surface-2",  h: "#2C2A23", bg: "#2C2A23", fg: "#F4F4F0" },
        { n: "--surface-3",  h: "#34312A", bg: "#34312A", fg: "#F4F4F0" },
        { n: "--border",     h: "#3A372F", bg: "#3A372F", fg: "#F4F4F0" },
        { n: "--fg",         h: "#F4F4F0", bg: "#F4F4F0", fg: "#1A1813" },
        { n: "--fg-muted",   h: "#8A8A8A", bg: "#8A8A8A", fg: "#1A1813" },
        { n: "--fg-subtle",  h: "#5C5C5C", bg: "#5C5C5C", fg: "#F4F4F0" },
        { n: "--fg-strong",  h: "#FFFFFF", bg: "#FFFFFF", fg: "#1A1813" },
        { n: "--border-strong", h: "#4A463C", bg: "#4A463C", fg: "#F4F4F0" },
        { n: "--nav-bg-2",   h: "#22201A", bg: "#22201A", fg: "#F4F4F0" },
      ].map(s => (
        <div key={s.n} className="s" style={{ background: s.bg, color: s.fg }}>
          <div className="n">{s.n}</div>
          <div className="h">{s.h}</div>
        </div>
      ))}
    </div>

    <h3>Acid yellow · primary brand</h3>
    <div className="swatch-row">
      {[
        { n: "--yellow",      h: "#EFFF00", bg: "#EFFF00", fg: "#1A1813" },
        { n: "--yellow-2",    h: "#DFFF00", bg: "#DFFF00", fg: "#1A1813" },
        { n: "--yellow-3",    h: "#C8FF00", bg: "#C8FF00", fg: "#1A1813" },
        { n: "--yellow-deep", h: "#ADC700", bg: "#ADC700", fg: "#1A1813" },
        { n: "--yellow-ink",  h: "#1A1813", bg: "#1A1813", fg: "#EFFF00" },
        { n: "--yellow-soft", h: "rgba(239,255,0,.10)", bg: "rgba(239,255,0,.10)", fg: "#EFFF00" },
      ].map(s => (
        <div key={s.n} className="s" style={{ background: s.bg, color: s.fg, border: s.n === "--yellow-soft" ? "1px solid rgba(239,255,0,.25)" : undefined }}>
          <div className="n">{s.n}</div>
          <div className="h">{s.h}</div>
        </div>
      ))}
    </div>

    <h3>Signal · used sparingly on dark</h3>
    <div className="swatch-row">
      {[
        { n: "--blue",   h: "#4DA8FF", bg: "#4DA8FF", fg: "#1A1813" },
        { n: "--green",  h: "#4ADE80", bg: "#4ADE80", fg: "#1A1813" },
        { n: "--amber",  h: "#FF9A33", bg: "#FF9A33", fg: "#1A1813" },
        { n: "--red",    h: "#FF4D5E", bg: "#FF4D5E", fg: "#1A1813" },
        { n: "--orange-r", h: "#FF6B35", bg: "#FF6B35", fg: "#1A1813" },
        { n: "--violet", h: "#A86BFF", bg: "#A86BFF", fg: "#1A1813" },
      ].map(s => (
        <div key={s.n} className="s" style={{ background: s.bg, color: s.fg }}>
          <div className="n">{s.n}</div>
          <div className="h">{s.h}</div>
        </div>
      ))}
    </div>

    {/* Type */}
    <h3>Type scale</h3>
    <div>
      {[
        { lbl: "Display · 152 / Anton",  small: "Hero, marketing covers", el: <span style={{ fontFamily: "Anton, Impact, sans-serif", fontSize: 80, lineHeight: 0.9, textTransform: "uppercase" }}>UPLOAD YOUR APP.</span> },
        { lbl: "H1 · 64 / Anton",        small: "Page titles",            el: <span style={{ fontFamily: "Anton, Impact, sans-serif", fontSize: 56, lineHeight: 0.94, textTransform: "uppercase" }}>Launch Command Centre</span> },
        { lbl: "H2 · 36 / Bebas",        small: "Section titles",         el: <span style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 36, lineHeight: 1, textTransform: "uppercase", letterSpacing: "0.01em" }}>WHAT BOLTKIT GENERATES</span> },
        { lbl: "Body lg · 16 / Inter",   small: "Marketing leads",        el: <span style={{ fontSize: 16, lineHeight: 1.55 }}>BoltKit turns screenshots, brand kit and app URL into social posts, video scripts, ads.</span> },
        { lbl: "Body · 14 / Inter",      small: "Product UI default",     el: <span style={{ fontSize: 14, lineHeight: 1.5 }}>Generate captions for 30 Instagram posts in 22 seconds with brand-locked tone.</span> },
        { lbl: "Mono · 11 / JetBrains",  small: "Labels, eyebrows, kbd",  el: <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800, color: "#EFFF00" }}>LAUNCH PACK · LIVE</span> },
      ].map((t, i) => (
        <div className="type-row" key={i}>
          <div className="lbl">{t.lbl}<small>{t.small}</small></div>
          <div style={{ color: "#FFF" }}>{t.el}</div>
        </div>
      ))}
    </div>

    {/* Buttons */}
    <h3>Buttons</h3>
    <div className="row">
      <button className="btn btn-primary"><BoltMini size={12} /> Generate Launch Pack</button>
      <button className="btn btn-secondary">View Demo</button>
      <button className="btn btn-ghost">Cancel</button>
      <button className="btn btn-dark">More</button>
      <button className="btn btn-primary btn-sm">Save</button>
      <button className="icon-btn"><Icon name="settings" size={15} stroke={2} /></button>
    </div>

    {/* Pills */}
    <h3>Pills · sync · scores</h3>
    <div className="row">
      <Pill tone="yellow">v1.4 · LIVE</Pill>
      <Pill tone="green">SCHEDULED</Pill>
      <Pill tone="blue">READY</Pill>
      <Pill tone="amber">DRAFT</Pill>
      <Pill tone="red">FAILED</Pill>
      <SyncChip state="sync" />
      <SyncChip state="save" />
      <SyncChip state="local" />
      <SyncChip state="fail" />
    </div>

    {/* Inputs */}
    <h3>Form controls</h3>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
      <div>
        <label className="field-label">Project name</label>
        <input className="input" defaultValue="Renoo · Notes for builders" />
      </div>
      <div>
        <label className="field-label">Website / App URL</label>
        <div className="input-with-icon">
          <Icon name="link" size={15} stroke={2} className="ico" />
          <input className="input" defaultValue="https://renoo.app" />
        </div>
      </div>
      <div>
        <label className="field-label">Tone of voice</label>
        <select className="select"><option>Premium founder · punchy</option></select>
      </div>
      <div>
        <label className="field-label">Short description</label>
        <textarea className="textarea" defaultValue="A daily note-taking app for builders shipping under chaos." />
      </div>
    </div>

    {/* Drop zone */}
    <div className="drop">
      <Icon name="image" size={22} stroke={2} className="ico" />
      <div className="t">Drop screenshots</div>
      <div className="s">PNG · JPG · HEIC · up to 12mb each · 64 max</div>
    </div>

    {/* Score ring + mini tiles */}
    <h3>Stat tiles · score ring</h3>
    <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "center" }}>
      <RingScore score={87} size={120} label="READINESS" />
      <div className="mini-tiles" style={{ flex: 1 }}>
        <div className="mini-tile"><div className="l">Projects</div><div className="v">6</div></div>
        <div className="mini-tile"><div className="l">Packs shipped</div><div className="v">132<span className="u">/180</span></div></div>
        <div className="mini-tile"><div className="l">Scheduled</div><div className="v">28</div><div className="t"><span className="up">↑12</span> vs last week</div></div>
        <div className="mini-tile"><div className="l">Brand match</div><div className="v">94<span className="u">%</span></div></div>
      </div>
    </div>

    {/* Chips */}
    <h3>Chips · tabs</h3>
    <div className="chip-row">
      <span className="chip active chip-yellow">All</span>
      <span className="chip">Screenshots</span>
      <span className="chip">Logos</span>
      <span className="chip">App Icons</span>
      <span className="chip">Brand pack</span>
      <span className="chip">Instagram</span>
    </div>
    <div className="tabs" style={{ background: "#201E18" }}>
      <div className="tab active">Overview <span className="count">12</span></div>
      <div className="tab">Captions</div>
      <div className="tab">Scripts</div>
      <div className="tab">Ads</div>
      <div className="tab">Codex</div>
    </div>

    {/* Radii + shadows */}
    <h3>Radii · shadows · motifs</h3>
    <div className="row">
      <div style={{ width: 88, height: 64, background: "#26241E", border: "1px solid #3A372F", borderRadius: 4, display: "grid", placeItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A" }}>4px</div>
      <div style={{ width: 88, height: 64, background: "#26241E", border: "1px solid #3A372F", borderRadius: 6, display: "grid", placeItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A" }}>6px</div>
      <div style={{ width: 88, height: 64, background: "#26241E", border: "1px solid #3A372F", borderRadius: 8, display: "grid", placeItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A" }}>8px</div>
      <div style={{ width: 88, height: 64, background: "#26241E", border: "1px solid #3A372F", borderRadius: 12, display: "grid", placeItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A" }}>12px</div>
      <div style={{ width: 88, height: 64, background: "repeating-linear-gradient(135deg, #EFFF00 0 14px, #201E18 14px 28px)" }} />
      <div style={{ width: 88, height: 64, background: "#EFFF00", boxShadow: "0 0 0 1px #ADC700, 0 8px 28px rgba(239,255,0,0.18)" }} />
    </div>
  </div>
);

/* Component cards — gallery view */
const ComponentsSurface = () => (
  <div className="lab">
    <h3>Pack cards</h3>
    <div className="cards-grid">
      <div className="pack-card">
        <div className="ico-wrap"><Icon name="package" size={18} stroke={2} /></div>
        <div className="nm">Full Launch Pack</div>
        <div className="ds">Everything: social, video, ads, app store, SEO, prompts.</div>
        <div className="ft"><span>~22s · 132 assets</span><span className="c">CORE</span></div>
      </div>
      <div className="pack-card">
        <div className="ico-wrap"><Icon name="insta" size={18} stroke={2} /></div>
        <div className="nm">Instagram Pack</div>
        <div className="ds">30 / 60 / 90 captioned posts, hashtags, CTAs, alt text.</div>
        <div className="ft"><span>~8s · 30 posts</span><span className="c">FREE</span></div>
      </div>
      <div className="pack-card locked">
        <div className="ico-wrap"><Icon name="video" size={18} stroke={2} /></div>
        <div className="nm">Video Script Pack</div>
        <div className="ds">10s reels, hooks, shot lists, voiceovers, on-screen text.</div>
        <div className="ft"><span>~14s · 12 scripts</span><span className="c">PRO</span></div>
      </div>
    </div>

    <h3>Output cards</h3>
    <div className="cards-grid">
      <div className="out-card">
        <div className="quality">QS 94 · BM 88</div>
        <div className="h">App Store · Subtitle</div>
        <div className="body">Daily notes for builders shipping under chaos. <b>One folder. Ten apps. Zero lost ideas.</b></div>
        <div className="actions"><button>Copy</button><button>Improve</button><button>Regenerate</button><button>Save v2</button></div>
      </div>
      <div className="out-card">
        <div className="quality">QS 88 · BM 91</div>
        <div className="h">Hook · IG Reel</div>
        <div className="body">3 founders. 4 weeks. Zero launches. Until they tried <b>this</b>.</div>
        <div className="actions"><button>Copy</button><button>Improve</button><button>A/B 5 more</button></div>
      </div>
      <div className="out-card">
        <div className="quality">QS 92 · BM 94</div>
        <div className="h">Codex prompt · Onboarding</div>
        <div className="body">Build a 3-step onboarding for a notes app: choose vibe, import idea, set daily streak. Use Tailwind, Next.js 14…</div>
        <div className="actions"><button>Copy</button><button>Open in Codex</button></div>
      </div>
    </div>

    <h3>Empty / loading / error states</h3>
    <div className="cards-grid">
      <div className="card" style={{ padding: 24, textAlign: "center" }}>
        <div style={{ width: 44, height: 44, margin: "0 auto 12px", background: "rgba(239,255,0,0.1)", borderRadius: 8, display: "grid", placeItems: "center", color: "#EFFF00" }}>
          <Icon name="folder" size={20} stroke={2} />
        </div>
        <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#FFF", textTransform: "uppercase" }}>No projects yet</div>
        <div style={{ color: "#8A8A8A", fontSize: 12, marginTop: 6, marginBottom: 14 }}>Add your first app URL to begin.</div>
        <button className="btn btn-primary btn-sm"><Icon name="plus" size={11} stroke={2.4} /> New project</button>
      </div>
      <div className="card" style={{ padding: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
          <div className="spinner" />
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>Generating Pack · Step 3 / 7</div>
        </div>
        <div className="gen-bar"><span /></div>
        <div style={{ marginTop: 10, fontSize: 12, color: "#8A8A8A" }}>Drafting Instagram captions with founder voice…</div>
      </div>
      <div className="card" style={{ padding: 22, borderColor: "rgba(255,77,94,0.3)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Icon name="alert" size={14} stroke={2.4} color="#FF4D5E" />
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", color: "#FF4D5E", fontWeight: 800, textTransform: "uppercase" }}>Save failed</div>
        </div>
        <div style={{ fontSize: 12.5, color: "#C8C8C5", marginTop: 8 }}>Supabase request timed out. Your changes are saved locally and will sync when reconnected.</div>
        <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
          <button className="btn btn-secondary btn-sm">Retry</button>
          <button className="btn btn-ghost btn-sm">Keep working offline</button>
        </div>
      </div>
    </div>

    <h3>Toasts</h3>
    <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
      <div className="toast" style={{ position: "static", transform: "none" }}>
        <Icon name="check" size={13} stroke={2.6} color="#1A1813" />
        Launch pack exported · BoltKit Export.zip
      </div>
      <div className="toast" style={{ position: "static", transform: "none", background: "#4ADE80", color: "#1A1813", boxShadow: "0 12px 40px rgba(74,222,128,0.3), 0 0 0 1px #2EA858" }}>
        <Icon name="check_circle" size={13} stroke={2.4} color="#1A1813" />
        Synced to Supabase · 12 changes
      </div>
    </div>
  </div>
);

Object.assign(window, { TokensSurface, ComponentsSurface });