// gm-assets.jsx — Biblioteca de Assets ampliada: preview em TUDO + componentes, logos, ícones, formas/texturas, tokens.
// Exports: GMAssets.

/* ── ícones (geometria simples, traço da marca) ──────────────────────────── */
function Icon({ name, size = 30, c = "#211913" }) {
  const s = { fill: "none", stroke: c, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  const P = { width: size, height: size, viewBox: "0 0 32 32" };
  switch (name) {
    case "database": return <svg {...P}><ellipse cx="16" cy="8" rx="10" ry="4" {...s} /><path d="M6 8v16c0 2.2 4.5 4 10 4s10-1.8 10-4V8" {...s} /><path d="M6 16c0 2.2 4.5 4 10 4s10-1.8 10-4" {...s} /></svg>;
    case "flow": return <svg {...P}><circle cx="7" cy="16" r="3" {...s} /><circle cx="25" cy="16" r="3" {...s} /><line x1="10" y1="16" x2="22" y2="16" {...s} /></svg>;
    case "layers": return <svg {...P}><path d="M16 5 L27 11 L16 17 L5 11 Z" {...s} /><path d="M5 16 L16 22 L27 16" {...s} /><path d="M5 21 L16 27 L27 21" {...s} /></svg>;
    case "network": return <svg {...P}><circle cx="16" cy="16" r="3" {...s} /><circle cx="7" cy="8" r="2.5" {...s} /><circle cx="25" cy="9" r="2.5" {...s} /><circle cx="17" cy="26" r="2.5" {...s} /><line x1="9" y1="9.5" x2="14" y2="14" {...s} /><line x1="23" y1="10.5" x2="18" y2="14" {...s} /><line x1="16.5" y1="19" x2="17" y2="23.5" {...s} /></svg>;
    case "code": return <svg {...P}><path d="M11 9 L5 16 L11 23" {...s} /><path d="M21 9 L27 16 L21 23" {...s} /></svg>;
    case "bars": return <svg {...P}><line x1="8" y1="24" x2="8" y2="16" {...s} /><line x1="16" y1="24" x2="16" y2="8" {...s} /><line x1="24" y1="24" x2="24" y2="13" {...s} /></svg>;
    case "terminal": return <svg {...P}><rect x="4" y="6" width="24" height="20" rx="2.5" {...s} /><path d="M9 13 L13 16 L9 19" {...s} /><line x1="16" y1="20" x2="22" y2="20" {...s} /></svg>;
    case "doc": return <svg {...P}><path d="M9 4 H19 L24 9 V28 H9 Z" {...s} /><path d="M19 4 V9 H24" {...s} /><line x1="13" y1="15" x2="20" y2="15" {...s} /><line x1="13" y1="20" x2="20" y2="20" {...s} /></svg>;
    case "signal": return <svg {...P}><circle cx="16" cy="22" r="2.5" fill={c} stroke="none" /><path d="M10 17 a8 8 0 0 1 12 0" {...s} /><path d="M6 13 a13 13 0 0 1 20 0" {...s} /></svg>;
    case "search": return <svg {...P}><circle cx="14" cy="14" r="8" {...s} /><line x1="20" y1="20" x2="27" y2="27" {...s} /></svg>;
    case "arrow": return <svg {...P}><line x1="5" y1="16" x2="25" y2="16" {...s} /><polyline points="18,9 25,16 18,23" {...s} /></svg>;
    case "plus": return <svg {...P}><line x1="16" y1="7" x2="16" y2="25" {...s} /><line x1="7" y1="16" x2="25" y2="16" {...s} /></svg>;
    case "check": return <svg {...P}><polyline points="6,17 13,24 26,8" {...s} /></svg>;
    case "funnel": return <svg {...P}><polygon points="5,7 27,7 18,16 18,26 14,26 14,16" {...s} /></svg>;
    case "clock": return <svg {...P}><circle cx="16" cy="16" r="10" {...s} /><polyline points="16,10 16,16 20,18" {...s} /></svg>;
    case "bolt": return <svg {...P}><polygon points="17,4 9,18 15,18 13,28 23,13 17,13" {...s} /></svg>;
    case "play": return <svg {...P}><polygon points="12,8 25,16 12,24" {...s} /></svg>;
    case "grid": return <svg {...P}><rect x="6" y="6" width="8" height="8" {...s} /><rect x="18" y="6" width="8" height="8" {...s} /><rect x="6" y="18" width="8" height="8" {...s} /><rect x="18" y="18" width="8" height="8" {...s} /></svg>;
    case "branch": return <svg {...P}><circle cx="9" cy="8" r="2.5" {...s} /><circle cx="9" cy="24" r="2.5" {...s} /><circle cx="23" cy="13" r="2.5" {...s} /><line x1="9" y1="10.5" x2="9" y2="21.5" {...s} /><path d="M9 14 H17 a3 3 0 0 0 3-3 V14.5" {...s} /></svg>;
    case "cloud": return <svg {...P}><path d="M9 23 a6 6 0 0 1 1-12 a7 7 0 0 1 13 2 a5 5 0 0 1 -1 10 Z" {...s} /></svg>;
    case "gear": return <svg {...P}><circle cx="16" cy="16" r="4.5" {...s} /><path d="M16 4 V8 M16 24 V28 M4 16 H8 M24 16 H28 M7.5 7.5 L10 10 M22 22 L24.5 24.5 M24.5 7.5 L22 10 M10 22 L7.5 24.5" {...s} /></svg>;
    case "diamond": return <svg {...P}><path d="M16 5 L27 16 L16 27 L5 16 Z" {...s} /></svg>;
    default: return null;
  }
}
const ICONS = ["database", "flow", "layers", "network", "code", "bars", "terminal", "doc", "signal", "search", "arrow", "plus", "check", "funnel", "clock", "bolt", "play", "grid", "branch", "cloud", "gear", "diamond"];

/* ── tokens ──────────────────────────────────────────────────────────────── */
const TOKENS_CSS = `:root {
  --coral:#E8553A; --clay:#C2683E; --rust:#9E3E2B;
  --amber:#E8A33D; --honey:#EBC14E; --olive:#7F8B45;
  --teal:#16786E; --cyan:#0E9AAC;
  --bg:#F4ECD9; --card:#FBF6EA; --sand:#EAD9B8;
  --taupe:#B6A892; --stone:#6B5D4F; --ink:#211913;
  --espresso:#1A1411; --surface:#241B16; --sand-dk:#F2D8A7;
  --cyan-dk:#54C8D0; --terra:#D9714A; --dim:#9C8674;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-text:'Hanken Grotesk',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-math:'STIX Two Text',serif;
}`;
const TOKENS_JSON = `{
  "color": {
    "coral": "#E8553A", "clay": "#C2683E", "rust": "#9E3E2B",
    "amber": "#E8A33D", "honey": "#EBC14E", "olive": "#7F8B45",
    "teal": "#16786E", "cyan": "#0E9AAC",
    "bg": "#F4ECD9", "card": "#FBF6EA", "sand": "#EAD9B8",
    "taupe": "#B6A892", "stone": "#6B5D4F", "ink": "#211913",
    "espresso": "#1A1411", "surface": "#241B16",
    "sandDark": "#F2D8A7", "cyanDark": "#54C8D0", "terra": "#D9714A", "dim": "#9C8674"
  },
  "font": { "display": "Bricolage Grotesque", "text": "Hanken Grotesk", "mono": "IBM Plex Mono", "math": "STIX Two Text" }
}`;

/* ── snippets de código ──────────────────────────────────────────────────── */
const CODE = {
  title: `<div style="aspect-ratio:16/9;background:#1A1411;color:#F2D8A7;display:flex;flex-direction:column;justify-content:center;padding:6%;border-radius:14px;font-family:'Bricolage Grotesque',sans-serif">
  <span style="font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#E8A33D">Capítulo 01</span>
  <h2 style="font-weight:800;font-size:42px;letter-spacing:-1.5px;line-height:.98;margin:10px 0 0">O que é RAG</h2>
</div>`,
  lower: `<div style="display:flex;align-items:stretch;font-family:'Hanken Grotesk',sans-serif">
  <div style="width:5px;background:#E8553A;border-radius:3px"></div>
  <div style="background:rgba(36,27,22,.92);padding:10px 16px;border-radius:0 8px 8px 0">
    <div style="font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;color:#F2D8A7;white-space:nowrap">Nicolas Lima</div>
    <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;color:#54C8D0">AI ENGINEER</div>
  </div>
</div>`,
  callout: `<div style="background:#E8553A;color:#FBF6EA;padding:14px 18px;border-radius:10px;max-width:360px;font-family:'Bricolage Grotesque',sans-serif">
  <div style="font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1px;opacity:.85">IMPORTANTE</div>
  <div style="font-weight:700;font-size:18px;line-height:1.15;margin-top:4px">Embedding ≠ busca exata</div>
</div>`,
  code: `<pre style="background:#120D0A;color:#F2D8A7;border:1px solid rgba(242,216,167,.14);border-radius:10px;padding:16px 18px;margin:0;font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.6"><span style="color:#9C8674"># indexar</span>
db.<span style="color:#54C8D0">upsert</span>(vectors)</pre>`,
  kpi: `<div style="font-family:'Bricolage Grotesque',sans-serif;text-align:center">
  <div style="font-weight:800;font-size:56px;letter-spacing:-2px;color:#E8553A;line-height:.9">40%</div>
  <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#6B5D4F;margin-top:8px">menos latência</div>
</div>`,
  node: `<div style="display:inline-block;text-align:center;background:#FBF6EA;border:2px solid #211913;border-radius:10px;padding:12px 18px;font-family:'Hanken Grotesk',sans-serif">
  <div style="font-weight:700;font-size:15px">Transform</div>
  <div style="font-family:'IBM Plex Mono',monospace;font-size:10px;color:#6B5D4F;margin-top:3px">spark</div>
</div>`,
  quote: `<blockquote style="margin:0;border-left:4px solid #0E9AAC;padding:4px 0 4px 18px;font-family:'Bricolage Grotesque',sans-serif">
  <p style="font-weight:500;font-size:20px;line-height:1.4;letter-spacing:-.3px;color:#211913;margin:0">Dado bom não é o que você coleta — é o que você consegue explicar.</p>
  <footer style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#6B5D4F;margin-top:10px">— Nicolas Lima</footer>
</blockquote>`,
  stat: `<div style="font-family:'Hanken Grotesk',sans-serif;max-width:300px">
  <div style="display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:6px"><span>Streaming</span><span style="font-family:'IBM Plex Mono',monospace;color:#6B5D4F">90%</span></div>
  <div style="height:12px;background:#EFE6D2;border-radius:6px;overflow:hidden"><div style="width:90%;height:100%;background:#E8553A;border-radius:6px"></div></div>
</div>`,
  chips: `<div style="display:flex;gap:8px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace">
  <span style="font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#0E9AAC;border:1px solid #0E9AAC;padding:5px 11px;border-radius:20px">python</span>
  <span style="font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#211913;border:1px solid rgba(33,25,19,.2);padding:5px 11px;border-radius:20px">rag</span>
  <span style="font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#211913;border:1px solid rgba(33,25,19,.2);padding:5px 11px;border-radius:20px">llmops</span>
</div>`,
  divider: `<div style="display:flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace">
  <span style="font-size:12px;font-weight:600;color:#C2683E">01</span>
  <span style="width:26px;height:1px;background:#C2683E;opacity:.5"></span>
  <span style="font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:#C2683E">Seção</span>
</div>`,
  button: `<a href="#" style="display:inline-block;text-decoration:none;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;color:#FBF6EA;background:#211913;padding:13px 24px;border-radius:10px">Ver o projeto →</a>`,
  timeline: `<div style="display:flex;gap:14px;font-family:'Hanken Grotesk',sans-serif">
  <div style="display:flex;flex-direction:column;align-items:center">
    <span style="width:14px;height:14px;border-radius:50%;background:#E8553A"></span>
    <span style="flex:1;width:2px;background:#B6A892;margin-top:4px"></span>
  </div>
  <div style="padding-bottom:18px">
    <div style="font-family:'IBM Plex Mono',monospace;font-size:11px;color:#6B5D4F">2024</div>
    <div style="font-weight:700;font-size:15px">Lançou o pipeline v2</div>
  </div>
</div>`,
};

/* ── helpers ─────────────────────────────────────────────────────────────── */
function AssetTile({ bg, href, label, sub, h = 116, children, dlLabel }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
      <div style={{ background: bg, border: `1px solid ${T.line}`, borderRadius: 12, height: h, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", position: "relative" }}>{children}</div>
      <a href={href} download style={{ textDecoration: "none", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, fontFamily: F.mono, fontSize: 11, color: T.ink, border: `1px solid ${T.line2}`, padding: "8px 12px", borderRadius: 8 }}>
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
        <span style={{ color: T.cyan, flexShrink: 0 }}>↓ {dlLabel || "baixar"}</span>
      </a>
      {sub && <div style={{ fontFamily: F.mono, fontSize: 9.5, color: T.sub, marginTop: -3 }}>{sub}</div>}
    </div>
  );
}
const SubHead = ({ children, count }) => (
  <div style={{ display: "flex", alignItems: "baseline", gap: 12, margin: "44px 0 6px" }}>
    <span style={{ fontFamily: F.display, fontWeight: 800, fontSize: 20 }}>{children}</span>
    {count && <span style={{ fontFamily: F.mono, fontSize: 11, color: T.taupe }}>{count}</span>}
  </div>
);

/* ── section ─────────────────────────────────────────────────────────────── */
function GMAssets() {
  const dotTex = { backgroundImage: `radial-gradient(${T.coral} 1.6px, transparent 2.2px)`, backgroundSize: "14px 14px" };
  const gridTex = { backgroundImage: `linear-gradient(rgba(242,216,167,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(242,216,167,0.2) 1px, transparent 1px)`, backgroundSize: "18px 18px" };
  return (
    <Section id="assets" alt>
      <SecHead n="12" kicker="Biblioteca" title="Assets prontos pra usar."
        lead="Um kit completo: veja o preview de cada peça, copie o HTML dos componentes ou baixe os arquivos. Tudo já no sistema da marca — é só puxar e montar." />

      {/* componentes copiáveis */}
      <SubHead count="12 componentes">Componentes copiáveis</SubHead>
      <Lead style={{ marginBottom: 22 }}>Clique em <strong>Copiar HTML</strong> e cole onde quiser — já vêm com cores e fontes embutidas. <strong>Código</strong> mostra o trecho.</Lead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, marginBottom: 10 }}>
        <CopyCard title="Title card" sub="Abertura · 16:9" code={CODE.title} previewBg={T.bg}>
          <div style={{ width: "100%", aspectRatio: "16/9", background: T.dbg, color: T.dsand, display: "flex", flexDirection: "column", justifyContent: "center", padding: "6%", borderRadius: 12, boxSizing: "border-box" }}>
            <span style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 2, textTransform: "uppercase", color: T.amber }}>Capítulo 01</span>
            <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 34, letterSpacing: -1.2, lineHeight: 0.98, marginTop: 8 }}>O que é RAG</div>
          </div>
        </CopyCard>
        <CopyCard title="Lower third" sub="Identificação na tela" code={CODE.lower} previewBg={T.dbg}>
          <div style={{ display: "flex", alignItems: "stretch", flexShrink: 0 }}>
            <div style={{ width: 5, background: T.coral, borderRadius: 3 }}></div>
            <div style={{ background: "rgba(36,27,22,0.92)", padding: "10px 16px", borderRadius: "0 8px 8px 0" }}>
              <div style={{ fontFamily: F.display, fontWeight: 700, fontSize: 18, color: T.dsand, whiteSpace: "nowrap" }}>Nicolas Lima</div>
              <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1, color: T.dcyan, whiteSpace: "nowrap" }}>AI ENGINEER</div>
            </div>
          </div>
        </CopyCard>
        <CopyCard title="Callout" sub="Chamar atenção" code={CODE.callout}>
          <div style={{ background: T.coral, color: T.card, padding: "14px 18px", borderRadius: 10, maxWidth: 360 }}>
            <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1, opacity: 0.85 }}>IMPORTANTE</div>
            <div style={{ fontFamily: F.display, fontWeight: 700, fontSize: 18, lineHeight: 1.15, marginTop: 4 }}>Embedding ≠ busca exata</div>
          </div>
        </CopyCard>
        <CopyCard title="Code block" sub="Código / comando" code={CODE.code} previewBg={T.dbg}>
          <pre style={{ background: "#120D0A", color: T.dsand, border: `1px solid ${T.dline}`, borderRadius: 10, padding: "16px 18px", margin: 0, fontFamily: F.mono, fontSize: 13.5, lineHeight: 1.6 }}><span style={{ color: T.dim }}># indexar</span>{"\n"}db.<span style={{ color: T.dcyan }}>upsert</span>(vectors)</pre>
        </CopyCard>
        <CopyCard title="KPI" sub="Estatística de destaque" code={CODE.kpi}>
          <div style={{ fontFamily: F.display, textAlign: "center" }}>
            <div style={{ fontWeight: 800, fontSize: 56, letterSpacing: -2, color: T.coral, lineHeight: 0.9 }}>40%</div>
            <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: T.stone, marginTop: 8 }}>menos latência</div>
          </div>
        </CopyCard>
        <CopyCard title="Nó de fluxo" sub="Bloco de fluxograma" code={CODE.node}>
          <div style={{ display: "inline-block", textAlign: "center", background: T.card, border: `2px solid ${T.ink}`, borderRadius: 10, padding: "12px 18px" }}>
            <div style={{ fontFamily: F.text, fontWeight: 700, fontSize: 15 }}>Transform</div>
            <div style={{ fontFamily: F.mono, fontSize: 10, color: T.sub, marginTop: 3 }}>spark</div>
          </div>
        </CopyCard>
        <CopyCard title="Citação" sub="Quote / destaque editorial" code={CODE.quote}>
          <blockquote style={{ margin: 0, borderLeft: `4px solid ${T.cyan}`, padding: "4px 0 4px 18px" }}>
            <p style={{ fontFamily: F.display, fontWeight: 500, fontSize: 19, lineHeight: 1.4, letterSpacing: -0.3, margin: 0 }}>Dado bom não é o que você coleta — é o que você consegue explicar.</p>
            <footer style={{ fontFamily: F.mono, fontSize: 12, color: T.sub, marginTop: 10 }}>— Nicolas Lima</footer>
          </blockquote>
        </CopyCard>
        <CopyCard title="Stat bar" sub="Comparação / progresso" code={CODE.stat}>
          <div style={{ width: 280 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, fontWeight: 600, marginBottom: 6 }}><span>Streaming</span><span style={{ fontFamily: F.mono, color: T.sub }}>90%</span></div>
            <div style={{ height: 12, background: T.panel, borderRadius: 6, overflow: "hidden" }}><div style={{ width: "90%", height: "100%", background: T.coral, borderRadius: 6 }}></div></div>
          </div>
        </CopyCard>
        <CopyCard title="Tags" sub="Stack / tópicos" code={CODE.chips}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {[["python", T.cyan], ["rag", T.line2], ["llmops", T.line2]].map(([t, c]) => (
              <span key={t} style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: c === T.cyan ? T.cyan : T.ink, border: `1px solid ${c}`, padding: "5px 11px", borderRadius: 20 }}>{t}</span>
            ))}
          </div>
        </CopyCard>
        <CopyCard title="Divisor" sub="Kicker de seção numerado" code={CODE.divider}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ fontFamily: F.mono, fontSize: 12, fontWeight: 600, color: T.clay }}>01</span>
            <span style={{ width: 26, height: 1, background: T.clay, opacity: 0.5 }}></span>
            <span style={{ fontFamily: F.mono, fontSize: 12, fontWeight: 600, letterSpacing: 2.4, textTransform: "uppercase", color: T.clay }}>Seção</span>
          </div>
        </CopyCard>
        <CopyCard title="Botão" sub="CTA / ação principal" code={CODE.button}>
          <span style={{ display: "inline-block", fontFamily: F.text, fontWeight: 700, fontSize: 15, color: T.card, background: T.ink, padding: "13px 24px", borderRadius: 10 }}>Ver o projeto →</span>
        </CopyCard>
        <CopyCard title="Timeline" sub="Passo / marco" code={CODE.timeline}>
          <div style={{ display: "flex", gap: 14 }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: T.coral }}></span>
              <span style={{ flex: 1, width: 2, background: T.taupe, marginTop: 4 }}></span>
            </div>
            <div style={{ paddingBottom: 18 }}>
              <div style={{ fontFamily: F.mono, fontSize: 11, color: T.sub }}>2024</div>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Lançou o pipeline v2</div>
            </div>
          </div>
        </CopyCard>
      </div>

      {/* logos & avatares — preview + download em cada */}
      <SubHead count="8 arquivos SVG">Logos & avatares</SubHead>
      <Lead style={{ marginBottom: 22 }}>Cada arquivo com seu preview. Vetor (SVG); o nⁱ acompanha a fonte STIX.</Lead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18, marginBottom: 10 }}>
        <AssetTile bg={T.card} href="assets/logo-ni-color.svg" label="logo-ni-color"><Mark kind="ni" mode="color" size={62} /></AssetTile>
        <AssetTile bg={T.dbg} href="assets/logo-ni-reverse.svg" label="logo-ni-reverse"><Mark kind="ni" mode="reverse" size={62} /></AssetTile>
        <AssetTile bg={T.card} href="assets/logo-ni-mono.svg" label="logo-ni-mono"><Mark kind="ni" mode="mono" size={62} /></AssetTile>
        <AssetTile bg={T.coral} href="assets/avatar-nl.svg" label="avatar-nl"><Avatar kind="monogram" mode="mono" bg="transparent" size={88} /></AssetTile>
        <AssetTile bg={T.card} href="assets/logo-nl-color.svg" label="logo-nl-color"><Mark kind="monogram" mode="color" size={60} /></AssetTile>
        <AssetTile bg={T.dbg} href="assets/logo-nl-reverse.svg" label="logo-nl-reverse"><Mark kind="monogram" mode="reverse" size={60} /></AssetTile>
        <AssetTile bg={T.card} href="assets/logo-nl-mono.svg" label="logo-nl-mono"><Mark kind="monogram" mode="mono" size={60} /></AssetTile>
        <AssetTile bg={T.panel} href="assets/avatar-ni.svg" label="avatar-ni"><Avatar kind="ni" mode="reverse" bg={T.ink} size={88} /></AssetTile>
      </div>

      {/* ícones */}
      <SubHead count="22 ícones">Ícones</SubHead>
      <Lead style={{ marginBottom: 18 }}>Traço de 2px, mesma família geométrica. Recolora em ink, coral ou ciano conforme o significado. Preview abaixo; baixe a folha completa.</Lead>
      <Card style={{ marginBottom: 14 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(74px, 1fr))", gap: 8 }}>
          {ICONS.map((n) => (
            <div key={n} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, padding: "16px 6px", borderRadius: 10, background: T.panel }}>
              <Icon name={n} size={28} c={T.ink} />
              <span style={{ fontFamily: F.mono, fontSize: 8.5, color: T.sub }}>{n}</span>
            </div>
          ))}
        </div>
      </Card>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 10 }}>
        <a href="assets/icones-marca.svg" download style={{ textDecoration: "none", display: "flex", alignItems: "center", justifyContent: "space-between", background: T.card, border: `1px solid ${T.line2}`, borderRadius: 8, padding: "10px 14px", fontFamily: F.mono, fontSize: 11, color: T.ink }}><span>Folha de ícones (.svg)</span><span style={{ color: T.cyan }}>↓ baixar</span></a>
        <a href="assets/README.txt" download style={{ textDecoration: "none", display: "flex", alignItems: "center", justifyContent: "space-between", background: T.card, border: `1px solid ${T.line2}`, borderRadius: 8, padding: "10px 14px", fontFamily: F.mono, fontSize: 11, color: T.ink }}><span>Como usar o kit (.txt)</span><span style={{ color: T.cyan }}>↓ baixar</span></a>
        <div style={{ display: "flex", alignItems: "center", gap: 10, background: T.panel, borderRadius: 8, padding: "10px 14px" }}>
          {[T.ink, T.coral, T.cyan].map((c) => <Icon key={c} name="signal" size={20} c={c} />)}
          <span style={{ fontFamily: F.mono, fontSize: 10, color: T.sub }}>recolorível</span>
        </div>
      </div>

      {/* formas & texturas */}
      <SubHead count="3 arquivos">Formas & texturas</SubHead>
      <Lead style={{ marginBottom: 18 }}>Grafismos da marca pra usar de fundo ou acento. Preview em cada um.</Lead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginBottom: 10 }}>
        <AssetTile bg={T.card} href="assets/formas-bauhaus.svg" label="formas-bauhaus" h={120}>
          <svg width="200" height="56" viewBox="0 0 260 56"><circle cx="28" cy="28" r="22" fill={T.amber} /><polygon points="78,50 100,8 122,50" fill={T.coral} /><polygon points="158,6 186,28 158,50 130,28" fill={T.cyan} /><path d="M210 50 A28 28 0 0 1 238 22" fill="none" stroke={T.ink} strokeWidth="6" strokeLinecap="round" /><circle cx="244" cy="46" r="6" fill={T.ink} /></svg>
        </AssetTile>
        <AssetTile bg={T.bg} href="assets/textura-pontos.svg" label="textura-pontos" h={120}>
          <div style={{ position: "absolute", inset: 0, ...dotTex, opacity: 0.6 }}></div>
        </AssetTile>
        <AssetTile bg={T.dbg} href="assets/textura-grid.svg" label="textura-grid" h={120}>
          <div style={{ position: "absolute", inset: 0, ...gridTex }}></div>
        </AssetTile>
      </div>

      {/* tokens */}
      <SubHead count="2 formatos">Tokens exportáveis</SubHead>
      <Lead style={{ marginBottom: 22 }}>As variáveis da marca em CSS e JSON — cole no projeto e tudo já sai na paleta certa.</Lead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, marginBottom: 16 }}>
        <CopyCard title="tokens.css" sub="Variáveis CSS" code={TOKENS_CSS} previewBg={T.dbg} minH={120}>
          <pre style={{ margin: 0, fontFamily: F.mono, fontSize: 11, lineHeight: 1.5, color: T.dsand, maxHeight: 150, overflow: "auto", width: "100%" }}>{TOKENS_CSS}</pre>
        </CopyCard>
        <CopyCard title="tokens.json" sub="Design tokens" code={TOKENS_JSON} previewBg={T.dbg} minH={120}>
          <pre style={{ margin: 0, fontFamily: F.mono, fontSize: 11, lineHeight: 1.5, color: T.dsand, maxHeight: 150, overflow: "auto", width: "100%" }}>{TOKENS_JSON}</pre>
        </CopyCard>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        <a href="assets/tokens.css" download style={{ textDecoration: "none", display: "flex", alignItems: "center", justifyContent: "space-between", background: T.card, border: `1px solid ${T.line2}`, borderRadius: 8, padding: "11px 15px", fontFamily: F.mono, fontSize: 11.5, color: T.ink }}><span>tokens.css</span><span style={{ color: T.cyan }}>↓ baixar</span></a>
        <a href="assets/tokens.json" download style={{ textDecoration: "none", display: "flex", alignItems: "center", justifyContent: "space-between", background: T.card, border: `1px solid ${T.line2}`, borderRadius: 8, padding: "11px 15px", fontFamily: F.mono, fontSize: 11.5, color: T.ink }}><span>tokens.json</span><span style={{ color: T.cyan }}>↓ baixar</span></a>
      </div>
    </Section>
  );
}

Object.assign(window, { GMAssets });