// bm-sections-1.jsx — Capa, Essência, Logo system, Construção.
// Exports: SecCover, SecEssence, SecLogo, SecConstruction.

function SecCover() {
  return (
    <section id="top" data-screen-label="capa" style={{ background: T.bg, position: "relative", overflow: "hidden", minHeight: "calc(100vh - 64px)", display: "flex", alignItems: "center" }}>
      {/* deco */}
      <div style={{ position: "absolute", inset: 0, ...dotField("rgba(33,25,19,0.06)", 16, 1.2), pointerEvents: "none" }}></div>
      <svg style={{ position: "absolute", right: -80, top: -60, opacity: 0.1, pointerEvents: "none" }} width="420" height="420" viewBox="0 0 200 200">
        <circle cx="120" cy="80" r="70" fill={T.amber} />
        <polygon points="20,180 70,80 120,180" fill={T.coral} />
      </svg>

      <div style={{ width: "min(1120px, 90vw)", margin: "0 auto", position: "relative", display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 50, alignItems: "center" }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: F.mono, fontSize: 12, fontWeight: 600, letterSpacing: 1.6, textTransform: "uppercase", color: T.cyan, marginBottom: 26 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: T.cyan }}></span>Manual de Marca · v1.0
          </div>
          <h1 style={{ fontFamily: F.display, fontWeight: 800, fontSize: "clamp(52px, 8vw, 104px)", letterSpacing: -3.5, lineHeight: 0.9, margin: 0 }}>Nicolas<br />Lima</h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: T.sub, maxWidth: 480, marginTop: 28, fontWeight: 500 }}>
            O sistema visual completo — logos, cores, tipografia, texturas e aplicações. Tudo que define como a marca <strong style={{ color: T.ink, fontWeight: 700 }}>parece, soa e se comporta</strong>.
          </p>
          <div style={{ marginTop: 38, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <a href="#essence" style={{ textDecoration: "none", background: T.ink, color: T.card, fontFamily: F.text, fontWeight: 700, fontSize: 15, padding: "14px 24px", borderRadius: 10 }}>Começar a ler ↓</a>
            <span style={{ fontFamily: F.mono, fontSize: 12.5, color: T.sub, letterSpacing: 0.5 }}>Software · Data · AI Engineering</span>
          </div>
        </div>

        {/* logo showcase */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ background: T.ink, borderRadius: 20, aspectRatio: "4/3", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, ...dotField("rgba(242,216,167,0.10)", 18, 1.3) }}></div>
            <div style={{ position: "relative" }}><Mark kind="ni" mode="reverse" size={190} /></div>
            <div style={{ position: "absolute", left: 22, bottom: 18, fontFamily: F.mono, fontSize: 10.5, letterSpacing: 1.6, textTransform: "uppercase", color: T.dim }}>Logo · padrão</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div style={{ background: T.coral, borderRadius: 16, aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Mark kind="monogram" mode="mono" size={92} />
            </div>
            <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 16, aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Mark kind="monogram" mode="color" size={92} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SecEssence() {
  const attrs = [
    ["Técnico", "Engenharia de verdade — não buzzword. Precisão e profundidade."],
    ["Caloroso", "Acessível e humano. Explica o complexo sem arrogância."],
    ["Estruturado", "Pensa em sistemas. Organiza o caos em arquitetura clara."],
    ["Curioso", "Opera na fronteira — onde dados e IA ainda viram pergunta."],
  ];
  return (
    <Section id="essence" alt>
      <SecHead n="01" kicker="A essência" title="Uma marca pessoal de engenharia, com calor humano."
        lead="Antes de qualquer cor ou fonte: a marca existe para posicionar o Nicolas como alguém que arquiteta soluções de software, dados e IA — com rigor técnico, mas comunicando de um jeito caloroso e claro." />
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 44, alignItems: "start" }}>
        <div style={{ fontFamily: F.display, fontWeight: 500, fontSize: "clamp(24px, 3vw, 33px)", lineHeight: 1.32, letterSpacing: -0.6, textWrap: "pretty" }}>
          Editorial e <span style={{ color: T.coral }}>caloroso</span>, com a geometria que <span style={{ color: T.clay }}>estrutura</span> sem endurecer — e o <span style={{ color: T.cyan }}>ciano</span> como respiro frio, o sinal técnico que corta o calor.
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {attrs.map(([t, d]) => (
            <div key={t} style={{ display: "flex", gap: 16, alignItems: "flex-start", paddingBottom: 14, borderBottom: `1px solid ${T.line}` }}>
              <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 18, minWidth: 116, letterSpacing: -0.3 }}>{t}</div>
              <div style={{ fontSize: 14.5, lineHeight: 1.5, color: T.sub }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function SecLogo() {
  const LogoPanel = ({ tagEn, role, kind, name, story, use, dark, big }) => (
    <Card dark={dark} pad={0} style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ background: dark ? T.dbg : T.panel, padding: "52px 32px", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", minHeight: 230 }}>
        {dark && <div style={{ position: "absolute", inset: 0, ...dotField("rgba(242,216,167,0.08)", 16, 1.2) }}></div>}
        <div style={{ position: "relative" }}><Mark kind={kind} mode={dark ? "reverse" : "color"} size={big || 150} /></div>
      </div>
      <div style={{ padding: 30 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
          <Mono color={dark ? T.dcyan : T.coral} size={10.5}>{tagEn}</Mono>
          <span style={{ width: 4, height: 4, borderRadius: "50%", background: dark ? T.dim : T.taupe }}></span>
          <Mono color={dark ? T.dim : T.sub} size={10.5}>{role}</Mono>
        </div>
        <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 27, letterSpacing: -0.8, marginBottom: 12, color: dark ? T.dsand : T.ink }}>{name}</div>
        <div style={{ fontSize: 14.5, lineHeight: 1.55, color: dark ? T.dim : T.sub, marginBottom: 16, textWrap: "pretty" }}>{story}</div>
        <div style={{ display: "flex", gap: 9, alignItems: "flex-start" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: T.coral, marginTop: 6, flexShrink: 0 }}></span>
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: dark ? T.dsand : T.ink, fontWeight: 600 }}>{use}</div>
        </div>
      </div>
    </Card>
  );
  return (
    <Section id="logo">
      <SecHead n="02" kicker="O sistema de logo" title="Dois logos, dois papéis."
        lead="A marca tem duas assinaturas que dividem o trabalho: uma padrão, séria, para o contexto profissional; e uma criativa, expressiva, para o lado pessoal. Mesma pessoa, dois tons de voz." />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 30 }}>
        <LogoPanel tagEn="Logo · default" role="Formal / primário" kind="ni" name="nⁱ — N elevado a i" dark
          story="A inicial elevada à unidade imaginária, escrita na cursiva matemática (estilo LaTeX). O i é o número imaginário: a dimensão abstrata além do real. Numa só notação, diz que você modela o que ainda não é óbvio."
          use="Use por padrão: perfil profissional, palestras, artigos, qualquer publicação séria." />
        <LogoPanel tagEn="Creative logo" role="Expressivo / pessoal" kind="monogram" name="Monograma NL" big={140}
          story="Suas iniciais: o L de Lima nasce da última haste do N, com a diagonal em coral e o nó em ciano. A tipografia da própria marca virando símbolo — direto, humano, atemporal."
          use="Use no lado pessoal: conteúdo casual, projetos paralelos, contextos fora do tema principal." />
      </div>
      <Note>O <strong>nⁱ</strong> é o default — quando estiver em dúvida, use ele. O <strong>Monograma NL</strong> é a alternativa expressiva, não um substituto. Nunca misture os dois na mesma peça.</Note>
    </Section>
  );
}

function SecConstruction() {
  const ClearSpace = ({ kind, label }) => (
    <Card style={{ flex: 1 }}>
      <Mono color={T.sub} size={10.5}>{label}</Mono>
      <div style={{ marginTop: 18, display: "flex", justifyContent: "center" }}>
        <div style={{ position: "relative", padding: 44 }}>
          {/* guide box */}
          <div style={{ position: "absolute", inset: 0, border: `1.5px dashed ${T.line2}`, borderRadius: 6 }}></div>
          {[["top", "left"], ["top", "right"], ["bottom", "left"], ["bottom", "right"]].map((c, i) => (
            <div key={i} style={{ position: "absolute", [c[0]]: 36, [c[1]]: 36, width: 8, height: 8, borderRadius: "50%", background: T.cyan }}></div>
          ))}
          <div style={{ position: "relative" }}><Mark kind={kind} mode="color" size={96} /></div>
        </div>
      </div>
      <div style={{ marginTop: 8, fontSize: 13, color: T.sub, lineHeight: 1.5, textAlign: "center" }}>Margem mínima = <strong style={{ color: T.ink }}>½ da altura</strong> do símbolo em todos os lados.</div>
    </Card>
  );
  const Min = ({ label, px, mm, kind, size }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 18, padding: "16px 0", borderBottom: `1px solid ${T.line}` }}>
      <div style={{ width: 90, display: "flex", justifyContent: "center" }}><Mark kind={kind} mode="color" size={size} /></div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: F.display, fontWeight: 700, fontSize: 16 }}>{label}</div>
        <div style={{ fontFamily: F.mono, fontSize: 12, color: T.sub, marginTop: 3 }}>{px} · {mm}</div>
      </div>
    </div>
  );
  return (
    <Section id="construcao" alt>
      <SecHead n="03" kicker="Construção" title="Área de proteção e tamanhos mínimos."
        lead="Espaço em volta e tamanho mínimo são o que mantêm o logo legível e respeitado. São as regras menos glamourosas do manual — e as mais importantes no dia a dia." />
      <div style={{ display: "flex", gap: 24, marginBottom: 24, flexWrap: "wrap" }}>
        <ClearSpace kind="ni" label="Área de proteção · nⁱ" />
        <ClearSpace kind="monogram" label="Área de proteção · NL" />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        <Card>
          <Mono color={T.clay} size={10.5}>Tamanho mínimo</Mono>
          <div style={{ marginTop: 10 }}>
            <Min label="Símbolo só (digital)" px="24 px" mm="—" kind="ni" size={26} />
            <Min label="Lockup horizontal (digital)" px="140 px de largura" mm="—" kind="monogram" size={34} />
            <Min label="Impresso" px="—" mm="10 mm de altura" kind="ni" size={44} />
          </div>
        </Card>
        <Note dark={false} title="Por que existe um mínimo">
          Abaixo do tamanho mínimo, a diagonal coral do N some, o ponto fecha e o <span style={{ fontFamily: F.math, fontStyle: "italic" }}>i</span> vira um borrão. O mínimo garante que cada detalhe sobreviva — na tela e no papel. Na dúvida, dê mais espaço, nunca menos.
        </Note>
      </div>
    </Section>
  );
}

Object.assign(window, { SecCover, SecEssence, SecLogo, SecConstruction });
