/* ========================================================================
   screens-assets.jsx — Asset library, Brand kit manager, AI analysis
   ====================================================================== */

const AssetLibraryScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="assets" />
    <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, flexWrap: "wrap", gap: 12 }}>
          <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" }} />ASSET LIBRARY</div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 0", color: "#FFF" }}>132 assets · 6 projects</h1>
            <div style={{ color: "#8A8A8A", fontSize: 12, marginTop: 4, display: "flex", gap: 10 }}>
              <SyncChip state="sync" />
              <span>Supabase Storage · all assets backed up · 4.2 MB used / 5 GB</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary"><Icon name="filter" size={12} stroke={2} /> Filters</button>
            <button className="btn btn-primary"><Icon name="plus" size={12} stroke={2.4} /> Upload</button>
          </div>
        </div>

        {/* filter chips */}
        <div style={{ display: "flex", gap: 6, marginBottom: 14, flexWrap: "wrap" }}>
          {[
            { l: "All · 132",     on: true },
            { l: "Screenshots · 64", on: false },
            { l: "Logos · 12",   on: false },
            { l: "App icons · 8", on: false },
            { l: "Brand packs · 6", on: false },
            { l: "Instagram media · 30", on: false },
            { l: "Videos · 4",   on: false },
            { l: "Other · 8",    on: false },
          ].map(c => (
            <span key={c.l} className={"chip " + (c.on ? "active chip-yellow" : "")}>{c.l}</span>
          ))}
        </div>

        {/* mass upload card */}
        <div className="drop" style={{ padding: 24, marginBottom: 16 }}>
          <Icon name="image" size={28} stroke={2} className="ico" />
          <div className="t">Drop assets to upload</div>
          <div className="s">PNG · JPG · HEIC · MP4 · PDF · ZIP · FIG · auto-tagged · synced to Supabase</div>
          <div style={{ display: "flex", gap: 6, justifyContent: "center", marginTop: 14, flexWrap: "wrap" }}>
            <span className="chip">Auto-detect screen type</span>
            <span className="chip">Extract colours</span>
            <span className="chip">Detect logo / icon</span>
          </div>
        </div>

        {/* grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 10 }}>
          {Array.from({ length: 18 }).map((_, i) => {
            const types = [
              { l: "HERO",    c: "linear-gradient(135deg, #FF6B35, #C9522A)", t: "SCREENSHOT" },
              { l: "ONBOARD", c: "linear-gradient(135deg, #1E1E1E, #1A1813)", t: "SCREENSHOT" },
              { l: "CAPTURE", c: "linear-gradient(135deg, #2C2A23, #201E18)", t: "SCREENSHOT" },
              { l: "LOGO",    c: "#26241E",                                   t: "LOGO" },
              { l: "ICON",    c: "linear-gradient(135deg, #FF6B35, #FFB23F)", t: "APP ICON" },
              { l: "BRAND",   c: "linear-gradient(135deg, #EFFF00, #ADC700)", t: "BRAND PACK" },
            ];
            const a = types[i % 6];
            return (
              <div key={i} style={{ background: "#26241E", border: "1px solid #3A372F", overflow: "hidden", position: "relative" }}>
                <div style={{ aspectRatio: a.t === "BRAND PACK" ? "4/3" : a.t === "LOGO" ? "1/1" : a.t === "APP ICON" ? "1/1" : "9/16", background: a.c, position: "relative", display: "grid", placeItems: "center" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: "2px 6px", background: "rgba(5,5,5,0.7)", color: "#FFF", letterSpacing: "0.14em", fontWeight: 800 }}>{a.l}</div>
                  {i % 5 === 0 && <Ribbon top={8} right={-12} rotate={-8}>NEW</Ribbon>}
                </div>
                <div style={{ padding: "8px 10px" }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: "#FFF", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>renoo-{a.l.toLowerCase()}-{(i + 1).toString().padStart(2, "0")}.png</div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 800, marginTop: 2 }}>{a.t} · 1.2 MB</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  </div>
);

const BrandKitScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="brand" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar project="Renoo · Notes" />
      <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" }} />BRAND KIT MANAGER</div>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14 }}>
          <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 0", color: "#FFF" }}>Renoo · v3.2 brand</h1>
          <div style={{ display: "flex", gap: 8 }}>
            <Pill tone="yellow">LOCKED</Pill>
            <button className="btn btn-secondary"><Icon name="download" size={12} stroke={2} /> Download pack</button>
            <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Improve with AI</button>
          </div>
        </div>

        {/* top — score + brand source */}
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr 1fr", gap: 14, marginTop: 22 }}>
          <div className="ai-surface" style={{ padding: 22, textAlign: "center" }}>
            <RingScore score={92} size={120} label="BRAND MATCH" />
            <div style={{ marginTop: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>CONSISTENT</div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>Logo &amp; app icon</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, alignItems: "stretch" }}>
              <div style={{ background: "#FFF", padding: 14, display: "grid", placeItems: "center", aspectRatio: "1/1" }}>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 36, color: "#1E1E1E", textTransform: "uppercase", letterSpacing: "0.02em" }}>RENOO</div>
              </div>
              <div style={{ background: "#FF6B35", display: "grid", placeItems: "center", aspectRatio: "1/1", borderRadius: 12 }}>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 64, color: "#FFF", textTransform: "uppercase", lineHeight: 1 }}>R</div>
              </div>
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, marginTop: 10 }}>LOGO (light) · APP ICON · 1024×1024</div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>Uploaded brand packs</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {[
                { l: "Renoo-brand-v3.zip",      sz: "2.4 MB · pdf · figma", on: true  },
                { l: "Renoo-brand-v2-OLD.pdf",  sz: "1.1 MB",               on: false },
                { l: "Founder-tone-guide.md",   sz: "12 KB",                on: false },
              ].map(p => (
                <div key={p.l} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 10, padding: "8px 10px", background: p.on ? "rgba(239,255,0,0.08)" : "#201E18", border: p.on ? "1px solid rgba(239,255,0,0.3)" : "1px solid #3A372F", alignItems: "center" }}>
                  <div style={{ width: 30, height: 30, background: "#2C2A23", border: "1px solid #3A372F", display: "grid", placeItems: "center", color: p.on ? "#EFFF00" : "#8A8A8A" }}><Icon name="zip" size={13} stroke={2} /></div>
                  <div>
                    <div style={{ fontSize: 12, color: "#FFF", fontWeight: 700 }}>{p.l}</div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase" }}>{p.sz}</div>
                  </div>
                  {p.on ? <Pill tone="yellow">ACTIVE</Pill> : <button className="btn btn-ghost btn-sm">Activate</button>}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* colour palette + type + voice */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14, marginTop: 14 }}>
          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 12 }}>Colour palette</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
              {[
                { l: "PRIMARY",   c: "#FF6B35" },
                { l: "INK",       c: "#1E1E1E" },
                { l: "PAPER",     c: "#F4F4F0" },
                { l: "ACCENT",    c: "#FFD400" },
                { l: "LINE",      c: "#D6D2C7" },
                { l: "DANGER",    c: "#E03A3A" },
              ].map(c => (
                <div key={c.l} style={{ aspectRatio: "4/5", background: c.c, position: "relative", border: "1px solid #3A372F" }}>
                  <div style={{ position: "absolute", bottom: 6, left: 6, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: c.c === "#F4F4F0" || c.c === "#FFD400" || c.c === "#D6D2C7" ? "#1A1813" : "#FFF", padding: "2px 5px", background: "rgba(0,0,0,0.4)", letterSpacing: "0.1em", fontWeight: 800 }}>{c.l}</div>
                  <div style={{ position: "absolute", top: 6, right: 6, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: c.c === "#F4F4F0" || c.c === "#FFD400" || c.c === "#D6D2C7" ? "#1A1813" : "#FFF", padding: "2px 5px", background: "rgba(0,0,0,0.4)", letterSpacing: "0.06em", fontWeight: 800 }}>{c.c}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 18 }}>
              <div className="card-title" style={{ marginBottom: 10 }}>Typography</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div style={{ background: "#FFF", padding: 18, color: "#1E1E1E" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800 }}>HEADING · ANTON</div>
                  <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 38, textTransform: "uppercase", lineHeight: 1, marginTop: 8 }}>One folder. Every idea.</div>
                </div>
                <div style={{ background: "#26241E", padding: 18, color: "#FFF", border: "1px solid #3A372F" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800 }}>BODY · INTER</div>
                  <div style={{ fontSize: 14, lineHeight: 1.55, marginTop: 8 }}>Builders die from forgotten ideas, not bad ones. Renoo is a 4-second capture app for builders shipping under chaos.</div>
                </div>
              </div>
            </div>
          </div>

          <div className="card" style={{ padding: 18 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>Voice &amp; rules</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", marginBottom: 4 }}>VOICE</div>
            <div style={{ fontSize: 13, color: "#FFF", lineHeight: 1.55, marginBottom: 14 }}>Builder, punchy, premium. Short sentences. Concrete verbs. No marketing fluff.</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#4ADE80", fontWeight: 800, textTransform: "uppercase", marginBottom: 4 }}>DO</div>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 14px", display: "flex", flexDirection: "column", gap: 5 }}>
              {["Lead with a sharp claim","Use builder vocab (ship, lock, pack)","Lowercase headlines feel native","Show numbers, not adjectives"].map(d => (
                <li key={d} style={{ display: "flex", gap: 7, fontSize: 12, color: "#C8C8C5", alignItems: "flex-start" }}><Icon name="check" size={11} stroke={2.6} color="#4ADE80" /> {d}</li>
              ))}
            </ul>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#FF4D5E", fontWeight: 800, textTransform: "uppercase", marginBottom: 4 }}>DON'T</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 5 }}>
              {["Corporate jargon","Emoji in headlines","Generic 'productivity' framing","ALL CAPS marketing"].map(d => (
                <li key={d} style={{ display: "flex", gap: 7, fontSize: 12, color: "#C8C8C5", alignItems: "flex-start" }}><Icon name="close" size={11} stroke={2.6} color="#FF4D5E" /> {d}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const AIAnalysisScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="generate" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar project="Renoo · Notes" />
      <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" }} />AI ANALYSIS · v3.2</div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 0", color: "#FFF" }}>How BoltKit sees you</h1>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary"><Icon name="refresh" size={12} stroke={2} /> Regenerate</button>
            <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Improve analysis</button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {/* App summary */}
            <div className="card has-corners" style={{ padding: 22 }}>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 10 }}>
                <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> APP SUMMARY</span>
              </div>
              <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 30, color: "#FFF", textTransform: "uppercase", lineHeight: 1.05 }}>A focused, premium notes app for solo builders. Daily streak as a habit hook. Codex-friendly export.</div>
              <div style={{ display: "flex", gap: 6, marginTop: 14, flexWrap: "wrap" }}>
                {["Solo builders","No-code","Indie hackers","Productivity","Premium","B2C","UK / US","iOS-first"].map(c => <span key={c} className="chip">{c}</span>)}
              </div>
            </div>

            {/* Pain / Benefit / Angles */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div className="card" style={{ padding: 18 }}>
                <div className="card-title" style={{ marginBottom: 12 }}>Audience</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                  {["Indie builders shipping 1–3 apps","Codex / Claude / Cursor users","Builders who hate Notion overhead","Founders running solo morning rituals"].map(s => (
                    <li key={s} style={{ display: "flex", gap: 7, fontSize: 13, color: "#C8C8C5", alignItems: "flex-start" }}>
                      <Icon name="user" size={12} stroke={2} color="#EFFF00" /> {s}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="card" style={{ padding: 18 }}>
                <div className="card-title" style={{ marginBottom: 12 }}>Pain points</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                  {["Half-finished ideas across 14 apps","No daily ritual for capture","Notion is too heavy for fast capture","Lose context between sessions"].map(s => (
                    <li key={s} style={{ display: "flex", gap: 7, fontSize: 13, color: "#C8C8C5", alignItems: "flex-start" }}>
                      <span style={{ width: 6, height: 6, background: "#FF4D5E", marginTop: 7, flex: "none" }} /> {s}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="card" style={{ padding: 18 }}>
                <div className="card-title" style={{ marginBottom: 12 }}>Benefits</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                  {["4-second capture, no friction","Daily streak hook","Codex-friendly markdown export","Surface yesterday's idea on top"].map(s => (
                    <li key={s} style={{ display: "flex", gap: 7, fontSize: 13, color: "#C8C8C5", alignItems: "flex-start" }}>
                      <span style={{ width: 6, height: 6, background: "#EFFF00", marginTop: 7, flex: "none" }} /> {s}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="card" style={{ padding: 18 }}>
                <div className="card-title" style={{ marginBottom: 12 }}>Marketing angles</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                  {["One folder. Every idea.","Streak or starve","Notes that compile","Built for builders, not Notion natives"].map(s => (
                    <li key={s} style={{ display: "flex", gap: 7, fontSize: 13, color: "#FFF", fontWeight: 700, alignItems: "flex-start" }}>
                      <Icon name="bolt" size={12} stroke={2} color="#EFFF00" /> {s}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* score column */}
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="ai-surface" style={{ padding: 20, textAlign: "center" }}>
              <RingScore score={87} size={140} label="READINESS" />
              <div style={{ marginTop: 12, color: "#C8C8C5", fontSize: 12.5 }}>Add the missing assets to hit <b style={{ color: "#FFF" }}>95+</b>.</div>
            </div>
            <div className="card" style={{ padding: 16 }}>
              <div className="card-title" style={{ marginBottom: 10 }}>Missing checklist</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                {[
                  { l: "1024px app icon", ok: false },
                  { l: "Wide hero shot · 1920×1080", ok: false },
                  { l: "Brand voice rules (2 lines)", ok: false },
                  { l: "App description (200 chars)", ok: true },
                  { l: "Founder name &amp; bio", ok: true },
                  { l: "Brand colours (3+)", ok: true },
                ].map(m => (
                  <li key={m.l} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 8, padding: "8px 10px", background: m.ok ? "rgba(74,222,128,0.06)" : "#201E18", border: m.ok ? "1px solid rgba(74,222,128,0.2)" : "1px solid #3A372F", alignItems: "center" }}>
                    {m.ok ? <Icon name="check_circle" size={13} color="#4ADE80" /> : <span style={{ width: 6, height: 6, background: "#FFB23F" }} />}
                    <span style={{ fontSize: 12.5, color: m.ok ? "#8A8A8A" : "#FFF", textDecoration: m.ok ? "line-through" : "none" }} dangerouslySetInnerHTML={{ __html: m.l }} />
                    {!m.ok && <button className="btn btn-ghost btn-sm">Add</button>}
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{ padding: 16 }}>
              <div className="card-title" style={{ marginBottom: 10 }}>Competitor angle</div>
              <div style={{ fontSize: 13, color: "#C8C8C5", lineHeight: 1.5 }}>
                <b style={{ color: "#FFF" }}>vs. Notion:</b> faster, opinionated, built for capture not docs.<br />
                <b style={{ color: "#FFF" }}>vs. Apple Notes:</b> tagged, AI-surfaced, Codex-friendly export.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { AssetLibraryScreen, BrandKitScreen, AIAnalysisScreen });