// gm-core.jsx — fundação do Guia de Mídia. Reaproveita bm-core (T, F, Section, SecHead...).
// Exports: GMNav, GMFooter, Frame, CopyCard, RightWrong, Pill, GM_SECTIONS.

const GM_SECTIONS = [
  ["composicao", "Composição"], ["video", "Vídeo"], ["movimento", "Movimento"],
  ["diagramas", "Diagramas"], ["dados", "Dados"], ["cenas", "Cenas"], ["remotion", "Remotion"], ["hyperframes", "Hyperframes"], ["logo-anim", "Logo animado"], ["infografia", "Infográficos"], ["componentes", "Componentes"], ["assets", "Assets"],
];

function GMNav() {
  const [active, setActive] = React.useState("");
  React.useEffect(() => {
    const obs = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-45% 0px -50% 0px" });
    GM_SECTIONS.forEach(([id]) => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: "rgba(244,236,217,0.86)", backdropFilter: "blur(12px)", borderBottom: `1px solid ${T.line}` }}>
      <div style={{ width: "min(1180px, 92vw)", margin: "0 auto", height: 64, display: "flex", alignItems: "center", gap: 14 }}>
        <a href="#top" style={{ textDecoration: "none", display: "flex", alignItems: "center", gap: 11, flexShrink: 0 }}>
          <Mark kind="ni" mode="color" size={30} />
          <span style={{ fontFamily: F.display, fontWeight: 800, fontSize: 17, letterSpacing: -0.6, color: T.ink }}>Nicolas Lima</span>
          <span style={{ fontFamily: F.mono, fontSize: 9.5, letterSpacing: 1.5, textTransform: "uppercase", color: T.sub, border: `1px solid ${T.line}`, padding: "3px 7px", borderRadius: 20 }}>Mídia</span>
        </a>
        <nav className="gm-navstrip" style={{ display: "flex", alignItems: "center", gap: 2, flex: "1 1 auto", minWidth: 0, overflowX: "auto", overflowY: "hidden", scrollbarWidth: "none", WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%)", maskImage: "linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%)" }}>
          {GM_SECTIONS.map(([id, label]) => (
            <a key={id} href={`#${id}`} style={{ fontFamily: F.text, fontSize: 13, fontWeight: active === id ? 700 : 500, textDecoration: "none", color: active === id ? T.coral : T.sub, padding: "6px 9px", borderRadius: 7, whiteSpace: "nowrap", flexShrink: 0 }}>{label}</a>
          ))}
        </nav>
        <a href="index.html" style={{ fontFamily: F.text, fontSize: 13, fontWeight: 600, textDecoration: "none", color: T.ink, padding: "6px 13px", borderRadius: 20, border: `1px solid ${T.line2}`, whiteSpace: "nowrap", flexShrink: 0 }}>Manual&nbsp;↗</a>
      </div>
      <style>{`.gm-navstrip::-webkit-scrollbar{display:none}`}</style>
    </header>
  );
}

function GMFooter() {
  return (
    <footer style={{ background: T.dbg, color: T.dsand, padding: "70px 0 56px" }}>
      <div style={{ width: "min(1180px, 92vw)", margin: "0 auto", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 30, flexWrap: "wrap" }}>
        <div>
          <LockHorizontal kind="ni" mode="reverse" ink={T.dsand} scale={1.1} />
          <div style={{ fontFamily: F.mono, fontSize: 12, color: T.dim, marginTop: 22, letterSpacing: 0.5 }}>Guia de Mídia · v1.0 · 2026</div>
        </div>
        <a href="index.html" style={{ textDecoration: "none", fontFamily: F.mono, fontSize: 12, color: T.dcyan, border: `1px solid ${T.dline}`, padding: "10px 16px", borderRadius: 20 }}>← Voltar ao Manual de Marca</a>
      </div>
    </footer>
  );
}

// Pill / tag
const Pill = ({ children, color = T.cyan, bg, dark }) => (
  <span style={{ fontFamily: F.mono, fontSize: 10.5, letterSpacing: 1, textTransform: "uppercase", color, background: bg || "transparent", border: `1px solid ${color}`, padding: "4px 9px", borderRadius: 20, whiteSpace: "nowrap" }}>{children}</span>
);

// media canvas frame with format ratio + optional grid/thirds overlay
const RATIOS = { "16:9": "16/9", "9:16": "9/16", "1:1": "1/1" };
function Frame({ ratio = "16:9", dark = true, grid, thirds, safe, children, label, w, style }) {
  const gridStyle = grid ? { backgroundImage: `linear-gradient(${dark ? T.dline : T.line} 1px, transparent 1px), linear-gradient(90deg, ${dark ? T.dline : T.line} 1px, transparent 1px)`, backgroundSize: "7% 12.5%" } : null;
  return (
    <div style={{ position: "relative", width: w || "100%" }}>
      <div style={{
        aspectRatio: RATIOS[ratio], background: dark ? T.dbg : T.card, borderRadius: 14, overflow: "hidden",
        border: `1px solid ${dark ? T.dline : T.line}`, position: "relative", ...style,
      }}>
        {grid && <div style={{ position: "absolute", inset: 0, ...gridStyle, opacity: 0.5, pointerEvents: "none" }}></div>}
        {thirds && (
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} preserveAspectRatio="none" viewBox="0 0 100 100">
            <g stroke={T.cyan} strokeWidth="0.4" opacity="0.55" strokeDasharray="1.6 1.6">
              <line x1="33.33" y1="0" x2="33.33" y2="100" /><line x1="66.66" y1="0" x2="66.66" y2="100" />
              <line x1="0" y1="33.33" x2="100" y2="33.33" /><line x1="0" y1="66.66" x2="100" y2="66.66" />
            </g>
            {[[33.33, 33.33], [66.66, 33.33], [33.33, 66.66], [66.66, 66.66]].map(([x, y], i) => (
              <circle key={i} cx={x} cy={y} r="1.1" fill={T.coral} />
            ))}
          </svg>
        )}
        {safe && <div style={{ position: "absolute", inset: "8%", border: `1.5px dashed ${T.amber}`, borderRadius: 6, opacity: 0.6, pointerEvents: "none" }}></div>}
        {children}
      </div>
      {label && <div style={{ position: "absolute", top: 10, left: 10, fontFamily: F.mono, fontSize: 10, letterSpacing: 1, textTransform: "uppercase", color: dark ? T.dsand : T.ink, background: dark ? "rgba(26,20,17,0.7)" : "rgba(251,246,234,0.8)", padding: "3px 8px", borderRadius: 6, backdropFilter: "blur(4px)" }}>{label}</div>}
    </div>
  );
}

// copyable component card: live preview + code + copy button
function CopyCard({ title, sub, code, children, previewBg, previewPad = 22, minH = 150 }) {
  const [copied, setCopied] = React.useState(false);
  const [showCode, setShowCode] = React.useState(false);
  const copy = () => {
    const t = code || "";
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(t).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }).catch(() => fallback(t));
    } else fallback(t);
    function fallback(s) { const ta = document.createElement("textarea"); ta.value = s; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); setCopied(true); setTimeout(() => setCopied(false), 1500); } 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: "14px 18px", borderBottom: `1px solid ${T.line}`, gap: 12 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: F.display, fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>{title}</div>
          {sub && <div style={{ fontSize: 12, color: T.sub, marginTop: 3 }}>{sub}</div>}
        </div>
        <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
          {code && <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>}
          {code && <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, transition: "all .15s" }}>{copied ? "Copiado ✓" : "Copiar HTML"}</button>}
        </div>
      </div>
      <div style={{ padding: previewPad, background: previewBg || T.panel, minHeight: minH, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>{children}</div>
      </div>
      {showCode && code && (
        <pre style={{ margin: 0, padding: "16px 18px", background: T.dbg, color: T.dsand, fontFamily: F.mono, fontSize: 11.5, lineHeight: 1.6, overflowX: "auto", borderTop: `1px solid ${T.line}`, whiteSpace: "pre" }}>{code}</pre>
      )}
    </div>
  );
}

// right vs wrong demonstration
function RightWrong({ wrong, right, wrongCap, rightCap, h = 200 }) {
  const Cell = ({ ok, cap, children }) => (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
        <span style={{ width: 20, height: 20, borderRadius: "50%", background: ok ? T.teal : T.rust, color: "#fff", fontSize: 12, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{ok ? "✓" : "✕"}</span>
        <span style={{ fontFamily: F.mono, fontSize: 10.5, letterSpacing: 1.2, textTransform: "uppercase", color: ok ? T.teal : T.rust, fontWeight: 600 }}>{ok ? "Faça" : "Evite"}</span>
      </div>
      <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 12, padding: 18, minHeight: h, display: "flex", alignItems: "center", justifyContent: "center" }}>{children}</div>
      {cap && <div style={{ fontSize: 12.5, color: T.sub, marginTop: 9, lineHeight: 1.45 }}>{cap}</div>}
    </div>
  );
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
      <Cell ok={false} cap={wrongCap}>{wrong}</Cell>
      <Cell ok={true} cap={rightCap}>{right}</Cell>
    </div>
  );
}

Object.assign(window, { GMNav, GMFooter, Frame, CopyCard, RightWrong, Pill, GM_SECTIONS });