// gm-mediakit.jsx — Cenas & Grafismos: SVGs decorativos + cenas de slide claro/escuro.
// Exports: GMMediaKit.

/* ── grafismos decorativos (string builders, reaproveitáveis claro/escuro) ── */
const GFX_VB = {
  constellation: "0 0 200 130", rings: "0 0 160 130", flow: "0 0 200 120",
  iso: "0 0 160 150", orbit: "0 0 170 140", burst: "0 0 160 140", frame: "0 0 200 120",
};
function gfxInner(name, dark) {
  const ink = dark ? "#F2D8A7" : "#211913";
  const dim = dark ? "rgba(242,216,167,0.4)" : "rgba(33,25,19,0.28)";
  const coral = "#E8553A", cyan = dark ? "#54C8D0" : "#0E9AAC", amber = "#E8A33D";
  switch (name) {
    case "constellation": {
      const N = [[24, 34], [66, 22], [112, 42], [156, 26], [184, 64], [40, 86], [92, 100], [140, 92], [176, 110], [74, 58], [128, 72]];
      const E = [[0, 1], [1, 9], [9, 2], [2, 3], [3, 4], [9, 5], [5, 6], [6, 10], [10, 7], [7, 8], [4, 8], [2, 10]];
      let l = `<g stroke="${dim}" stroke-width="1.2">` + E.map(([a, b]) => `<line x1="${N[a][0]}" y1="${N[a][1]}" x2="${N[b][0]}" y2="${N[b][1]}"/>`).join("") + `</g>`;
      let c = N.map((p, i) => `<circle cx="${p[0]}" cy="${p[1]}" r="${i === 2 ? 5.5 : i === 6 ? 5 : 3}" fill="${i === 2 ? coral : i === 6 ? cyan : ink}"/>`).join("");
      return l + c;
    }
    case "rings":
      return `<g fill="none" stroke-width="3.2"><path d="M55 122 a25 25 0 0 1 50 0" stroke="${coral}"/><path d="M35 122 a45 45 0 0 1 90 0" stroke="${cyan}"/><path d="M15 122 a65 65 0 0 1 130 0" stroke="${ink}" opacity="0.45"/></g><circle cx="80" cy="122" r="5.5" fill="${coral}"/>`;
    case "flow":
      return `<g fill="none" stroke-width="2.6" stroke-linecap="round"><path d="M0 32 C55 8 120 52 200 24" stroke="${coral}"/><path d="M0 62 C55 46 125 78 200 56" stroke="${cyan}"/><path d="M0 92 C60 112 120 70 200 96" stroke="${ink}" opacity="0.4"/></g><circle cx="196" cy="24" r="4.5" fill="${coral}"/><circle cx="196" cy="56" r="4.5" fill="${cyan}"/>`;
    case "iso":
      return [[52, coral], [82, amber], [112, cyan]].map(([cy, c]) => `<polygon points="56,${cy} 80,${cy - 14} 104,${cy} 80,${cy + 14}" fill="${c}"/>`).join("") + `<polygon points="56,52 80,38 104,52 80,66" fill="none" stroke="${ink}" stroke-width="1.5" opacity="0.3"/>`;
    case "orbit":
      return `<ellipse cx="85" cy="70" rx="62" ry="30" fill="none" stroke="${dim}" stroke-width="1.5" stroke-dasharray="3 4"/><circle cx="85" cy="70" r="20" fill="none" stroke="${ink}" stroke-width="3"/><circle cx="85" cy="70" r="6" fill="${cyan}"/><circle cx="147" cy="70" r="7" fill="${coral}"/>`;
    case "burst": {
      let lines = "";
      for (let i = 0; i < 12; i++) { const a = (i / 12) * 2 * Math.PI, r1 = 14, r2 = i % 2 ? 38 : 52; lines += `<line x1="${(80 + r1 * Math.cos(a)).toFixed(1)}" y1="${(70 + r1 * Math.sin(a)).toFixed(1)}" x2="${(80 + r2 * Math.cos(a)).toFixed(1)}" y2="${(70 + r2 * Math.sin(a)).toFixed(1)}"/>`; }
      return `<g stroke="${ink}" stroke-width="2" stroke-linecap="round" opacity="0.7">${lines}</g><circle cx="80" cy="70" r="8" fill="${coral}"/>`;
    }
    case "frame":
      return `<g fill="none" stroke="${ink}" stroke-width="3" stroke-linecap="round"><path d="M12 34 V12 H34"/><path d="M166 12 H188 V34"/><path d="M188 86 V108 H166"/><path d="M34 108 H12 V86"/></g><circle cx="100" cy="60" r="7" fill="${coral}"/><circle cx="120" cy="60" r="4" fill="${cyan}"/>`;
    default: return "";
  }
}
function Graphic({ name, dark, h = 116 }) {
  const html = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${GFX_VB[name]}" width="86%" height="${h}" style="display:block;overflow:visible">${gfxInner(name, dark)}</svg>`;
  return <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }} dangerouslySetInnerHTML={{ __html: html }} />;
}
const GFX_LIST = [["constellation", "Constelação de nós"], ["flow", "Fluxos de dados"], ["rings", "Anéis de sinal"], ["iso", "Blocos isométricos"], ["orbit", "Órbita"], ["burst", "Burst"], ["frame", "Moldura de foco"]];

/* ── cenas de slide (HTML com variáveis de tema) ─────────────────────────── */
const VARS_LIGHT = "--bg:#F4ECD9;--ink:#211913;--sub:#6B5D4F;--accent:#E8553A;--cyan:#0E9AAC";
const VARS_DARK = "--bg:#1A1411;--ink:#F2D8A7;--sub:#9C8674;--accent:#E8553A;--cyan:#54C8D0";
const WRAP = "aspect-ratio:16/9;background:var(--bg);color:var(--ink);border-radius:12px;position:relative;overflow:hidden;font-family:'Bricolage Grotesque',sans-serif";
const NI = `<span style="font-family:'STIX Two Text',Georgia,serif;font-style:italic;font-weight:400;color:var(--ink)">n<span style="font-size:.58em;vertical-align:.62em;color:var(--accent)">i</span></span>`;
const LOCK = `<span style="display:inline-flex;align-items:center;gap:10px;font-size:30px">${NI}<span style="width:6px;height:6px;border-radius:50%;background:var(--cyan)"></span><span style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-1px">Nicolas Lima</span></span>`;

const SCENE_INNER = {
  titulo: `<div style="position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:var(--accent);opacity:.12"></div>
  <div style="position:absolute;inset:0;padding:7%;display:flex;flex-direction:column;justify-content:center">
    <span style="font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)">● Episódio 12</span>
    <h1 style="font-weight:800;font-size:48px;letter-spacing:-2px;line-height:.95;margin:14px 0 0">Arquitetura de RAG na prática</h1>
    <div style="font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--sub);margin-top:18px">nicolaslima.dev</div>
  </div>`,
  divisoria: `<div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center">
    <div style="font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan)">Parte 02</div>
    <div style="font-weight:800;font-size:62px;letter-spacing:-2px;line-height:1;margin-top:8px">Indexação</div>
    <div style="width:60px;height:4px;background:var(--accent);border-radius:2px;margin-top:22px"></div>
  </div>`,
  citacao: `<div style="position:absolute;inset:0;padding:8%;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;border-left:6px solid var(--accent)">
    <div style="font-weight:500;font-size:32px;line-height:1.3;letter-spacing:-.5px">“Dado bom não é o que você coleta — é o que você consegue explicar.”</div>
    <div style="font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--sub);margin-top:20px">— Nicolas Lima</div>
  </div>`,
  stat: `<div style="position:absolute;inset:0;padding:7%;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box">
    <div style="font-weight:800;font-size:92px;letter-spacing:-4px;line-height:.85;color:var(--accent)">40%</div>
    <div style="font-weight:700;font-size:26px;letter-spacing:-.5px;margin-top:12px">menos latência</div>
    <div style="font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--sub);margin-top:14px">após reescrever o índice vetorial</div>
  </div>`,
  agenda: `<div style="position:absolute;inset:0;padding:7%;display:flex;flex-direction:column;justify-content:center;gap:14px;box-sizing:border-box">
    <span style="font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)">Nesta aula</span>
    <div style="display:flex;align-items:center;gap:14px"><span style="font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--accent);font-weight:600">01</span><span style="font-weight:700;font-size:26px;letter-spacing:-.5px">O que é embedding</span></div>
    <div style="display:flex;align-items:center;gap:14px"><span style="font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--accent);font-weight:600">02</span><span style="font-weight:700;font-size:26px;letter-spacing:-.5px">Como indexar vetores</span></div>
    <div style="display:flex;align-items:center;gap:14px"><span style="font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--accent);font-weight:600">03</span><span style="font-weight:700;font-size:26px;letter-spacing:-.5px">Recuperar e rankear</span></div>
  </div>`,
  encerramento: `<div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center">
    ${LOCK}
    <a href="#" style="font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--bg);background:var(--accent);padding:12px 26px;border-radius:24px;text-decoration:none">Inscreva-se →</a>
  </div>`,
};
const SCENES = [["titulo", "Título"], ["divisoria", "Divisória de seção"], ["citacao", "Citação"], ["stat", "Big stat"], ["agenda", "Agenda / tópicos"], ["encerramento", "Encerramento / CTA"]];
const sceneFull = (name, dark) => `<div style="${dark ? VARS_DARK : VARS_LIGHT};${WRAP}">${SCENE_INNER[name]}</div>`;
const sceneCode = (name) => `<!-- Tema ESCURO: troque as variaveis do topo por:\n     ${VARS_DARK} -->\n<div style="${VARS_LIGHT};${WRAP}">\n${SCENE_INNER[name]}\n</div>`;

function ScenePair({ name, label }) {
  const [copied, setCopied] = React.useState(false);
  const [showCode, setShowCode] = React.useState(false);
  const code = sceneCode(name);
  const copy = () => {
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1500); };
    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code).then(done).catch(() => {});
    else { const ta = document.createElement("textarea"); ta.value = code; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); done(); } catch (e) {} document.body.removeChild(ta); }
  };
  return (
    <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 16, overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 18px", borderBottom: `1px solid ${T.line}`, gap: 12 }}>
        <span style={{ fontFamily: F.display, fontWeight: 700, fontSize: 15 }}>{label}</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button onClick={() => setShowCode((s) => !s)} style={{ cursor: "pointer", fontFamily: F.mono, fontSize: 11, color: T.sub, background: "transparent", border: `1px solid ${T.line}`, padding: "6px 10px", borderRadius: 8 }}>{showCode ? "Ocultar" : "Código"}</button>
          <button onClick={copy} style={{ cursor: "pointer", fontFamily: F.mono, fontSize: 11, fontWeight: 600, color: copied ? T.card : T.ink, background: copied ? T.teal : "transparent", border: `1px solid ${copied ? T.teal : T.ink}`, padding: "6px 12px", borderRadius: 8 }}>{copied ? "Copiado ✓" : "Copiar HTML"}</button>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, padding: 16 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
          <div dangerouslySetInnerHTML={{ __html: sceneFull(name, false) }}></div>
          <Mono color={T.sub} size={9.5}>Claro</Mono>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
          <div dangerouslySetInnerHTML={{ __html: sceneFull(name, true) }}></div>
          <Mono color={T.sub} size={9.5}>Escuro</Mono>
        </div>
      </div>
      {showCode && <pre style={{ margin: 0, padding: "16px 18px", background: T.dbg, color: T.dsand, fontFamily: F.mono, fontSize: 11, lineHeight: 1.55, overflowX: "auto", borderTop: `1px solid ${T.line}`, whiteSpace: "pre" }}>{code}</pre>}
    </div>
  );
}

/* ── section ─────────────────────────────────────────────────────────────── */
function GMMediaKit() {
  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>
  );
  return (
    <Section id="cenas">
      <SecHead n="06" kicker="Cenas & grafismos" title="Material pronto pra compor — claro e escuro."
        lead="Grafismos decorativos pra dar vida a fundos e infográficos, e cenas de slide completas em par claro ⇄ escuro — alterne entre elas pra criar ritmo e destaque na sua apresentação ou vídeo." />

      {/* grafismos */}
      <SubHead count="7 grafismos · claro + escuro">Grafismos decorativos</SubHead>
      <Lead style={{ marginBottom: 22 }}>Composições geométricas da marca pra usar de fundo, acento ou base de animação. Cada um funciona nos dois temas — baixe o que precisar.</Lead>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 18, marginBottom: 10 }}>
        {GFX_LIST.map(([name, label]) => (
          <div key={name} style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderRadius: 12, overflow: "hidden", border: `1px solid ${T.line}` }}>
              <div style={{ background: T.bg, padding: "14px 8px", display: "flex", alignItems: "center", justifyContent: "center" }}><Graphic name={name} dark={false} h={96} /></div>
              <div style={{ background: T.dbg, padding: "14px 8px", display: "flex", alignItems: "center", justifyContent: "center" }}><Graphic name={name} dark={true} h={96} /></div>
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
              <span style={{ fontFamily: F.display, fontWeight: 700, fontSize: 13 }}>{label}</span>
              <span style={{ display: "flex", gap: 8 }}>
                <a href={`assets/gfx-${name}-light.svg`} download style={{ fontFamily: F.mono, fontSize: 10.5, color: T.clay, textDecoration: "none" }}>claro ↓</a>
                <a href={`assets/gfx-${name}-dark.svg`} download style={{ fontFamily: F.mono, fontSize: 10.5, color: T.cyan, textDecoration: "none" }}>escuro ↓</a>
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* cenas */}
      <SubHead count="6 cenas · par claro/escuro">Cenas de slide</SubHead>
      <Lead style={{ marginBottom: 22 }}>Telas inteiras prontas (16:9), cada uma nos dois temas. O código usa <strong>variáveis CSS</strong> — copie e troque 5 valores no topo pra alternar claro ⇄ escuro.</Lead>
      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 20 }}>
        {SCENES.map(([name, label]) => <ScenePair key={name} name={name} label={label} />)}
      </div>
      <div style={{ marginTop: 24 }}>
        <Note title="Como criar ritmo claro ⇄ escuro">
          Não alterne a cada slide — isso cansa. Use o <strong>escuro como pontuação</strong>: abra um capítulo, isole uma citação ou um número de impacto num slide escuro, e volte ao claro pro conteúdo. O contraste vira ênfase. Em vídeo, a mesma lógica marca trocas de assunto.
        </Note>
      </div>
    </Section>
  );
}

Object.assign(window, { GMMediaKit });