// bm-core.jsx — fundação do Manual de Marca: tokens, logos finais, lockups, nav, UI atoms.
// Exports to window: T, F, MODES, MarkMonogram, MarkNi, Mark, LockHorizontal, LockStacked,
//   LockTagline, Avatar, Kicker, Section, SecHead, Lead, Note, Card, Mono, dotField, BMNav, BMFooter, SECTIONS.

const F = {
  display: "'Bricolage Grotesque', sans-serif",
  text: "'Hanken Grotesk', sans-serif",
  mono: "'Cascadia Code', 'IBM Plex Mono', monospace",
  math: "'STIX Two Text', Georgia, serif",
};

const T = {
  // light
  bg: "#F4ECD9", card: "#FBF6EA", panel: "#EFE6D2", ink: "#211913", sub: "#6B5D4F",
  line: "rgba(33,25,19,0.12)", line2: "rgba(33,25,19,0.2)",
  coral: "#E8553A", clay: "#C2683E", rust: "#9E3E2B", amber: "#E8A33D", honey: "#EBC14E",
  olive: "#7F8B45", teal: "#16786E", cyan: "#0E9AAC", sand: "#EAD9B8", taupe: "#B6A892", stone: "#6B5D4F",
  // dark
  dbg: "#1A1411", dsurface: "#241B16", dsand: "#F2D8A7", dim: "#9C8674",
  dcyan: "#54C8D0", dterra: "#D9714A", dline: "rgba(242,216,167,0.14)",
};

const MODES = {
  color:   { a: T.coral, b: T.cyan,  c: T.amber, core: T.ink,  line: T.ink,    stem: T.ink,     outline: false },
  mono:    { a: "none",  b: "none",  c: "none",  core: T.ink,  line: T.ink,    stem: T.ink,     outline: true  },
  reverse: { a: T.coral, b: T.dcyan, c: T.amber, core: T.dbg,  line: T.dsand,  stem: "#BDBAB4", outline: false },
};

const dotField = (color, size = 14, r = 1.3) => ({
  backgroundImage: `radial-gradient(${color} ${r}px, transparent ${r + 0.7}px)`,
  backgroundSize: `${size}px ${size}px`,
});

/* ── os dois logos finais ─────────────────────────────────────────────────── */
// CREATIVE LOGO — Monograma NL
function MarkMonogram({ mode = "color", size = 120 }) {
  const m = MODES[mode];
  const ink = m.stem, acc = m.outline ? m.line : m.a, node = m.outline ? "none" : m.b;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-label="Monograma NL" style={{ display: "block" }}>
      <g fill="none" strokeWidth="11" strokeLinecap="butt" strokeLinejoin="miter">
        <path d="M27 79 L27 23" stroke={ink} />
        <path d="M27 23 L61 79" stroke={acc} />
        <path d="M61 23 L61 79 L85 79" stroke={ink} />
      </g>
      <circle cx="61" cy="23" r="8" fill={node} stroke={m.outline ? m.line : "none"} strokeWidth="4" />
    </svg>
  );
}
// LOGO (padrão) — nⁱ
function MarkNi({ mode = "color", size = 120 }) {
  const m = MODES[mode];
  const fg = m.stem, acc = m.outline ? fg : m.a;
  return (
    <div style={{ width: size, height: size, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ fontFamily: F.math, fontStyle: "italic", fontWeight: 400, fontSize: size * 0.92, lineHeight: 1, color: fg }}>
        n<span style={{ fontSize: "0.58em", color: acc, verticalAlign: "0.62em", marginLeft: "0.03em" }}>i</span>
      </div>
    </div>
  );
}
const MARKS = { ni: MarkNi, monogram: MarkMonogram };
const Mark = ({ kind = "ni", ...rest }) => { const C = MARKS[kind]; return <C {...rest} />; };

/* ── lockups ──────────────────────────────────────────────────────────────── */
// horizontal: símbolo • nome (o ponto azul é APENAS separador, só aqui)
function LockHorizontal({ kind = "ni", mode = "color", ink = T.ink, scale = 1, sep }) {
  const dot = sep || (mode === "reverse" ? T.dcyan : T.cyan);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14 * scale }}>
      <Mark kind={kind} mode={mode} size={46 * scale} />
      <span style={{ width: 6 * scale, height: 6 * scale, borderRadius: "50%", background: dot, flexShrink: 0 }}></span>
      <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 30 * scale, letterSpacing: -1.4 * scale, lineHeight: 1, color: ink }}>Nicolas&nbsp;Lima</div>
    </div>
  );
}
function LockStacked({ kind = "ni", mode = "color", ink = T.ink, scale = 1 }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 * scale, textAlign: "center" }}>
      <Mark kind={kind} mode={mode} size={60 * scale} />
      <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 26 * scale, letterSpacing: -1.2 * scale, lineHeight: 1, color: ink }}>Nicolas Lima</div>
    </div>
  );
}
function LockTagline({ kind = "ni", mode = "color", ink = T.ink, sub = T.sub, accent = T.cyan, scale = 1 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 15 * scale }}>
      <Mark kind={kind} mode={mode} size={52 * scale} />
      <div style={{ display: "flex", flexDirection: "column", gap: 7 * scale }}>
        <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 28 * scale, letterSpacing: -1.3 * scale, lineHeight: 0.95, color: ink }}>Nicolas Lima</div>
        <div style={{ fontFamily: F.mono, fontSize: 9.5 * scale, letterSpacing: 2 * scale, textTransform: "uppercase", color: sub, display: "flex", alignItems: "center", gap: 7 * scale }}>
          <span style={{ width: 5 * scale, height: 5 * scale, borderRadius: "50%", background: accent }}></span>AI Engineering · Arquiteto de Soluções
        </div>
      </div>
    </div>
  );
}
function Avatar({ kind = "ni", mode = "color", bg = T.ink, ring, size = 72 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: "50%", background: bg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: ring || "none", overflow: "hidden" }}>
      <Mark kind={kind} mode={mode} size={size * 0.66} />
    </div>
  );
}

/* ── UI atoms ─────────────────────────────────────────────────────────────── */
const Mono = ({ children, color = T.clay, size = 11, style }) => (
  <span style={{ fontFamily: F.mono, fontSize: size, letterSpacing: 1.8, textTransform: "uppercase", color, ...style }}>{children}</span>
);

const Kicker = ({ n, children, color = T.clay }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
    {n && <span style={{ fontFamily: F.mono, fontSize: 12, fontWeight: 600, color }}>{n}</span>}
    <span style={{ width: 26, height: 1, background: color, opacity: 0.5 }}></span>
    <span style={{ fontFamily: F.mono, fontSize: 12, fontWeight: 600, letterSpacing: 2.4, textTransform: "uppercase", color }}>{children}</span>
  </div>
);

const Section = ({ id, dark, alt, children, pad = true, style }) => (
  <section id={id} data-screen-label={id} style={{
    background: dark ? T.dbg : (alt ? T.card : T.bg),
    color: dark ? T.dsand : T.ink,
    padding: pad ? "118px 0" : 0,
    position: "relative", overflow: "hidden", ...style,
  }}>
    <div style={{ width: "min(1120px, 90vw)", margin: "0 auto", position: "relative" }}>{children}</div>
  </section>
);

const SecHead = ({ n, kicker, title, lead, dark, color }) => (
  <div style={{ maxWidth: 760, marginBottom: 56 }}>
    <Kicker n={n} color={color || (dark ? T.amber : T.clay)}>{kicker}</Kicker>
    <h2 style={{ fontFamily: F.display, fontWeight: 800, fontSize: "clamp(34px, 5vw, 58px)", letterSpacing: -1.6, lineHeight: 1.02, margin: 0, color: dark ? T.dsand : T.ink }}>{title}</h2>
    {lead && <p style={{ fontSize: 18, lineHeight: 1.55, color: dark ? T.dim : T.sub, marginTop: 22, marginBottom: 0, fontWeight: 400, textWrap: "pretty" }}>{lead}</p>}
  </div>
);

const Lead = ({ children, dark, style }) => (
  <p style={{ fontSize: 17, lineHeight: 1.6, color: dark ? T.dim : T.sub, margin: 0, textWrap: "pretty", ...style }}>{children}</p>
);

// "Por quê?" didactic callout
const Note = ({ title = "Por que importa", children, dark }) => (
  <div style={{ display: "flex", gap: 13, padding: "18px 20px", borderRadius: 12, background: dark ? "rgba(242,216,167,0.05)" : "rgba(14,154,172,0.07)", border: `1px solid ${dark ? T.dline : "rgba(14,154,172,0.18)"}` }}>
    <span style={{ width: 7, height: 7, borderRadius: "50%", background: T.cyan, flexShrink: 0, marginTop: 7 }}></span>
    <div>
      <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase", color: dark ? T.dcyan : T.cyan, fontWeight: 600, marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 14.5, lineHeight: 1.55, color: dark ? T.dsand : T.ink, fontWeight: 400, textWrap: "pretty" }}>{children}</div>
    </div>
  </div>
);

const Card = ({ children, dark, pad = 28, style }) => (
  <div style={{ background: dark ? T.dsurface : T.card, border: `1px solid ${dark ? T.dline : T.line}`, borderRadius: 16, padding: pad, position: "relative", ...style }}>{children}</div>
);

/* ── navegação ────────────────────────────────────────────────────────────── */
const SECTIONS = [
  ["essence", "Essência"], ["logo", "Logo"], ["construcao", "Construção"], ["lockups", "Lockups"],
  ["cor-logo", "Cor no logo"], ["usos", "Usos"], ["paleta", "Cores"], ["tipografia", "Tipografia"],
  ["texturas", "Texturas"], ["aplicacoes", "Aplicações"], ["voz", "Voz"],
];

function BMNav() {
  const [open, setOpen] = React.useState(false);
  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" });
    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(1120px, 90vw)", margin: "0 auto", height: 64, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <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 }}>Manual</span>
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", justifyContent: "flex-end" }}>
          {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",
            }}>{label}</a>
          ))}
          <a href="guia-de-midia.html" style={{ fontFamily: F.text, fontSize: 13, fontWeight: 600, textDecoration: "none", color: T.ink, padding: "6px 12px", borderRadius: 20, border: `1px solid ${T.line2}`, marginLeft: 6, whiteSpace: "nowrap" }}>Guia de Mídia ↗</a>
        </nav>
      </div>
    </header>
  );
}

function BMFooter() {
  return (
    <footer style={{ background: T.dbg, color: T.dsand, padding: "70px 0 56px" }}>
      <div style={{ width: "min(1120px, 90vw)", 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 }}>Manual de Marca · v1.0 · 2026</div>
        </div>
        <div style={{ fontFamily: F.mono, fontSize: 11.5, color: T.dim, textAlign: "right", lineHeight: 1.8, letterSpacing: 0.5 }}>
          <div>Software · Data · AI Engineering</div>
          <div>Arquiteto de Soluções</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  T, F, MODES, dotField, MarkMonogram, MarkNi, Mark, LockHorizontal, LockStacked, LockTagline, Avatar,
  Mono, Kicker, Section, SecHead, Lead, Note, Card, BMNav, BMFooter, SECTIONS,
});