// bm-sections-3.jsx — Texturas, Aplicações (8 mockups), Voz & Tom.
// Exports: SecTexture, SecApplications, SecVoice.

function SecTexture() {
  const Tile = ({ label, desc, children, dark }) => (
    <Card dark={dark} pad={0} style={{ overflow: "hidden" }}>
      <div style={{ height: 150, position: "relative", overflow: "hidden" }}>{children}</div>
      <div style={{ padding: "16px 20px" }}>
        <div style={{ fontFamily: F.display, fontWeight: 700, fontSize: 15, color: dark ? T.dsand : T.ink }}>{label}</div>
        <div style={{ fontSize: 13, color: dark ? T.dim : T.sub, marginTop: 4, lineHeight: 1.45 }}>{desc}</div>
      </div>
    </Card>
  );
  const grid = { backgroundImage: `linear-gradient(${T.dline} 1px, transparent 1px), linear-gradient(90deg, ${T.dline} 1px, transparent 1px)`, backgroundSize: "26px 26px" };
  return (
    <Section id="texturas" alt>
      <SecHead n="09" kicker="Texturas & grafismos" title="Os elementos que dão textura — sem gráficos vazios."
        lead="Quatro recursos visuais recorrentes dão ritmo e personalidade sem competir com o conteúdo. Uma regra acima de todas: nunca usar degradês." />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18, marginBottom: 24 }}>
        <Tile label="Campo de pontos (riso)" desc="Herança da impressão risográfica. Para preencher espaços e marcar áreas com calor.">
          <div style={{ position: "absolute", inset: 0, background: T.panel }}></div>
          <div style={{ position: "absolute", inset: 0, ...dotField(T.coral, 13, 1.5), opacity: 0.5 }}></div>
        </Tile>
        <Tile label="Grid técnico" desc="A malha de blueprint. Usada em fundos escuros para evocar engenharia e estrutura." dark>
          <div style={{ position: "absolute", inset: 0, background: T.dbg }}></div>
          <div style={{ position: "absolute", inset: 0, ...grid, opacity: 0.8 }}></div>
        </Tile>
        <Tile label="Formas Bauhaus" desc="Círculo, triângulo e arco em cores sólidas. Acentos geométricos, sempre discretos.">
          <div style={{ position: "absolute", inset: 0, background: T.panel }}></div>
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice">
            <circle cx="60" cy="75" r="40" fill={T.amber} />
            <polygon points="120,115 150,45 180,115" fill={T.coral} />
            <rect x="120" y="20" width="18" height="18" fill={T.cyan} />
          </svg>
        </Tile>
        <Tile label="Papel & hachura (hand-drawn)" desc="Papel quadriculado creme + traço de caneta e preenchimento em hachura. O modo hand-drawn dos infográficos.">
          <div style={{ position: "absolute", inset: 0, background: "#F1E7D2", backgroundImage: "linear-gradient(rgba(194,104,62,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(194,104,62,0.16) 1px, transparent 1px)", backgroundSize: "15px 15px" }}></div>
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice"><path d="M40 95 C 80 60 130 60 165 92" fill="none" stroke={T.ink} strokeWidth="3" strokeLinecap="round" /><path d="M150 78 L168 90 L150 100" fill="none" stroke={T.ink} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </Tile>
      </div>
      <Note title="Por que nada de degradê">
        Degradê é o oposto do espírito da marca: impreciso, "fofo", datado. A identidade é feita de <strong>cores chapadas, pontos e linhas</strong> — recursos de impressão e de engenharia, que comunicam clareza e intenção. Se precisar de profundidade, use camadas e contraste de cor, não desfoque.
      </Note>
      <div style={{ marginTop: 16 }}>
        <Note title="Modo hand-drawn (infográficos)">
          Para infográficos a marca ganha um sotaque desenhado à mão: papel quadriculado, hachura e a fonte Caveat — sempre como camada de cima, sobre a base geométrica. Biblioteca completa no <a href="guia-de-midia.html" style={{ color: T.cyan, fontWeight: 600 }}>Guia de Mídia ↗</a>.
        </Note>
      </div>
    </Section>
  );
}

function SecApplications() {
  const grid = { backgroundImage: `linear-gradient(${T.dline} 1px, transparent 1px), linear-gradient(90deg, ${T.dline} 1px, transparent 1px)`, backgroundSize: "24px 24px" };
  const Mock = ({ label, children, span }) => (
    <div style={{ gridColumn: span ? "1 / -1" : "auto" }}>
      <Mono color={T.sub} size={10.5} style={{ display: "block", marginBottom: 11 }}>{label}</Mono>
      {children}
    </div>
  );
  const shell = { borderRadius: 14, overflow: "hidden", border: `1px solid ${T.line}` };

  return (
    <Section id="aplicacoes">
      <SecHead n="10" kicker="Aplicações" title="A marca no mundo real."
        lead="É aqui que o sistema vira útil. Cada peça abaixo é um molde pronto — repare como os mesmos elementos (logo, cores, mono, pontos, grid) se recombinam em contextos diferentes." />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 26 }}>

        {/* LinkedIn */}
        <Mock label="LinkedIn · capa + avatar" span>
          <div style={{ ...shell, background: T.card }}>
            <div style={{ height: 168, background: T.dbg, position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, ...grid, opacity: 0.7 }}></div>
              <div style={{ position: "absolute", inset: 0, ...dotField("rgba(232,163,61,0.4)", 13, 1.4), width: 200, left: "auto", right: 0, opacity: 0.5 }}></div>
              <div style={{ position: "absolute", right: 30, top: "50%", transform: "translateY(-50%)" }}>
                <LockTagline kind="ni" mode="reverse" ink={T.dsand} sub={T.dim} accent={T.dcyan} scale={1.05} />
              </div>
            </div>
            <div style={{ padding: "0 30px 26px", position: "relative" }}>
              <div style={{ marginTop: -46, marginBottom: 14 }}>
                <Avatar kind="ni" mode="reverse" bg={T.ink} ring={`4px solid ${T.card}`} size={96} />
              </div>
              <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 26, letterSpacing: -0.8 }}>Nicolas Lima</div>
              <div style={{ fontSize: 15, color: T.ink, marginTop: 4, fontWeight: 500 }}>AI Engineer · Arquiteto de Soluções · Software & Data</div>
              <div style={{ fontFamily: F.mono, fontSize: 12, color: T.sub, marginTop: 8 }}>São Paulo, Brasil · 12k seguidores</div>
            </div>
          </div>
        </Mock>

        {/* YouTube thumbnail */}
        <Mock label="Thumbnail · YouTube (16:9)">
          <div style={{ ...shell, aspectRatio: "16/9", background: T.dbg, position: "relative", padding: 26, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div style={{ position: "absolute", inset: 0, ...grid, opacity: 0.6 }}></div>
            <div style={{ position: "absolute", right: -30, bottom: -30, width: 150, height: 150, borderRadius: "50%", background: T.coral, opacity: 0.9 }}></div>
            <div style={{ fontFamily: F.mono, fontSize: 12, color: T.amber, position: "relative", letterSpacing: 0.5 }}>$ deep-dive --rag</div>
            <div style={{ position: "relative" }}>
              <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 34, lineHeight: 0.98, color: T.dsand, letterSpacing: -1, maxWidth: "75%" }}>Pipeline <span style={{ color: T.dterra }}>RAG</span> do zero</div>
              <div style={{ marginTop: 16 }}><LockHorizontal kind="ni" mode="reverse" ink={T.dsand} scale={0.72} /></div>
            </div>
          </div>
        </Mock>

        {/* Talk slide */}
        <Mock label="Slide de palestra (16:9)">
          <div style={{ ...shell, aspectRatio: "16/9", background: T.bg, position: "relative", padding: 30, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <svg style={{ position: "absolute", right: -20, top: -20, opacity: 0.12 }} width="160" height="160" viewBox="0 0 200 200"><circle cx="120" cy="80" r="70" fill={T.amber} /></svg>
            <div style={{ position: "relative" }}>
              <Mono color={T.cyan} size={11}>Palestra · 2026</Mono>
              <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 36, lineHeight: 1.0, letterSpacing: -1.4, marginTop: 16, maxWidth: "88%" }}>Como pensar arquitetura de IA</div>
            </div>
            <div style={{ position: "relative" }}><LockTagline kind="ni" mode="color" scale={0.78} /></div>
          </div>
        </Mock>

        {/* Carousel post */}
        <Mock label="Post de carrossel (1:1)">
          <div style={{ ...shell, aspectRatio: "1/1", background: T.coral, position: "relative", padding: 30, display: "flex", flexDirection: "column", justifyContent: "space-between", color: T.card }}>
            <div style={{ position: "absolute", right: 0, top: 0, width: 150, height: 110, ...dotField("rgba(251,246,234,0.5)", 13, 1.5) }}></div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }}>
              <Mono color={T.card} size={11} style={{ opacity: 0.9 }}>Carrossel · 1/7</Mono>
              <Mark kind="monogram" mode="mono" size={34} />
            </div>
            <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 38, lineHeight: 1.0, letterSpacing: -1.4, position: "relative" }}>3 erros comuns<br />em RAG</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: F.mono, fontSize: 12, position: "relative", opacity: 0.95 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: T.card }}></span>in/nicolaslima · arraste →
            </div>
          </div>
        </Mock>

        {/* Email signature */}
        <Mock label="Assinatura de e-mail">
          <div style={{ ...shell, background: T.card, padding: 26, display: "flex", gap: 22, alignItems: "stretch" }}>
            <div style={{ width: 4, borderRadius: 4, background: T.coral, flexShrink: 0 }}></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 21, letterSpacing: -0.6 }}>Nicolas Lima</div>
              <div style={{ fontFamily: F.mono, fontSize: 11.5, color: T.clay, letterSpacing: 1, textTransform: "uppercase", marginTop: 5 }}>AI Engineering · Arquiteto de Soluções</div>
              <div style={{ height: 1, background: T.line, margin: "16px 0" }}></div>
              <div style={{ fontFamily: F.mono, fontSize: 12.5, color: T.sub, lineHeight: 1.9 }}>
                <div>nicolas@nicolaslima.dev</div>
                <div>nicolaslima.dev · in/nicolaslima</div>
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center" }}><Avatar kind="ni" mode="reverse" bg={T.ink} size={62} /></div>
          </div>
        </Mock>

        {/* Article cover */}
        <Mock label="Capa de artigo / paper">
          <div style={{ ...shell, aspectRatio: "3/4", background: T.card, padding: 32, display: "flex", flexDirection: "column" }}>
            <Mono color={T.coral} size={11}>Artigo técnico · 2026</Mono>
            <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 33, lineHeight: 1.04, letterSpacing: -1.2, marginTop: 18 }}>Recuperação aumentada: o que ninguém te conta</div>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 9 }}>
              {[100, 92, 96, 70].map((w, i) => <div key={i} style={{ height: 8, width: `${w}%`, borderRadius: 4, background: T.line }}></div>)}
            </div>
            <div style={{ marginTop: "auto", paddingTop: 22, borderTop: `1px solid ${T.line}` }}><LockHorizontal kind="ni" mode="color" scale={0.74} /></div>
          </div>
        </Mock>

        {/* README header */}
        <Mock label="Header de README / GitHub" span>
          <div style={{ ...shell, background: T.dbg, padding: 0 }}>
            <div style={{ height: 34, background: T.dsurface, display: "flex", alignItems: "center", gap: 7, padding: "0 16px", borderBottom: `1px solid ${T.dline}` }}>
              {[T.dterra, T.amber, T.olive].map((c, i) => <span key={i} style={{ width: 11, height: 11, borderRadius: "50%", background: c }}></span>)}
              <span style={{ fontFamily: F.mono, fontSize: 11.5, color: T.dim, marginLeft: 10 }}>README.md</span>
            </div>
            <div style={{ padding: 30, position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, ...grid, opacity: 0.4 }}></div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, position: "relative", flexWrap: "wrap" }}>
                <div>
                  <div style={{ fontFamily: F.mono, fontSize: 13, color: T.dcyan }}># Nicolas Lima</div>
                  <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 30, color: T.dsand, letterSpacing: -1, marginTop: 8 }}>Building AI systems<br />that actually ship.</div>
                  <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
                    {["python", "rag", "llmops", "arquitetura"].map((b) => (
                      <span key={b} style={{ fontFamily: F.mono, fontSize: 11, color: T.dsand, border: `1px solid ${T.dline}`, padding: "4px 10px", borderRadius: 20 }}>{b}</span>
                    ))}
                  </div>
                </div>
                <Mark kind="ni" mode="reverse" size={104} />
              </div>
            </div>
          </div>
        </Mock>

        {/* Business card */}
        <Mock label="Cartão de visita (frente + verso)" span>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
            <div style={{ ...shell, aspectRatio: "1.586/1", background: T.coral, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, ...dotField("rgba(251,246,234,0.35)", 14, 1.5), opacity: 0.6 }}></div>
              <div style={{ position: "relative" }}><Mark kind="monogram" mode="mono" size={92} /></div>
            </div>
            <div style={{ ...shell, aspectRatio: "1.586/1", background: T.dbg, padding: 26, display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, ...grid, opacity: 0.5 }}></div>
              <div style={{ position: "relative" }}>
                <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 22, color: T.dsand, letterSpacing: -0.6 }}>Nicolas Lima</div>
                <div style={{ fontFamily: F.mono, fontSize: 11, color: T.dterra, letterSpacing: 1, textTransform: "uppercase", marginTop: 5 }}>AI Engineering · Arquiteto</div>
              </div>
              <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", position: "relative" }}>
                <div style={{ fontFamily: F.mono, fontSize: 11.5, color: T.dim, lineHeight: 1.7 }}>
                  <div>nicolaslima.dev</div>
                  <div>in/nicolaslima</div>
                </div>
                <Mark kind="ni" mode="reverse" size={42} />
              </div>
            </div>
          </div>
        </Mock>

      </div>
    </Section>
  );
}

function SecVoice() {
  const Pair = ({ no, yes }) => (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 14 }}>
      <div style={{ display: "flex", gap: 11, padding: "14px 16px", borderRadius: 11, background: "rgba(158,62,43,0.06)", border: `1px solid rgba(158,62,43,0.18)` }}>
        <span style={{ color: T.rust, fontWeight: 700, flexShrink: 0 }}>✕</span>
        <span style={{ fontSize: 14, color: T.sub, lineHeight: 1.45 }}>{no}</span>
      </div>
      <div style={{ display: "flex", gap: 11, padding: "14px 16px", borderRadius: 11, background: "rgba(22,120,110,0.06)", border: `1px solid rgba(22,120,110,0.18)` }}>
        <span style={{ color: T.teal, fontWeight: 700, flexShrink: 0 }}>✓</span>
        <span style={{ fontSize: 14, color: T.ink, lineHeight: 1.45, fontWeight: 500 }}>{yes}</span>
      </div>
    </div>
  );
  const Princ = ({ t, d }) => (
    <div style={{ paddingBottom: 16, borderBottom: `1px solid ${T.line}` }}>
      <div style={{ fontFamily: F.display, fontWeight: 800, fontSize: 18, letterSpacing: -0.3 }}>{t}</div>
      <div style={{ fontSize: 14, color: T.sub, lineHeight: 1.5, marginTop: 5 }}>{d}</div>
    </div>
  );
  return (
    <Section id="voz" alt>
      <SecHead n="11" kicker="Voz & tom" title="Como a marca fala."
        lead="A voz é tão parte da marca quanto o logo. O tom do Nicolas é o de um engenheiro sênior generoso: sabe muito, mas explica com clareza e sem soberba." />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 44, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Princ t="Claro antes de esperto" d="Prefere a frase que se entende de primeira à frase que impressiona. Sem jargão gratuito." />
          <Princ t="Mostra, não promete" d="Fala com exemplo, código e número real. Evita superlativos e 'revolucionário'." />
          <Princ t="Caloroso, nunca arrogante" d="Trata quem lê como inteligente, mas tira a barreira. Pode ter humor seco." />
          <Princ t="Direto ao ponto" d="Começa pela conclusão. Respeita o tempo de quem lê." />
        </div>
        <div>
          <Mono color={T.clay} size={10.5} style={{ display: "block", marginBottom: 18 }}>Na prática</Mono>
          <Pair no="“Solução revolucionária de IA de ponta que vai transformar tudo.”" yes="“Um pipeline de RAG que cortou a latência em 40%. Te mostro como.”" />
          <Pair no="“Aproveitando sinergias de machine learning para impulsionar resultados.”" yes="“Treinei um modelo pra prever churn. Acertou 8 em 10. Veja o que falhou.”" />
          <Pair no="“Sou apaixonado por dados e tecnologia disruptiva.”" yes="“Gosto de transformar bagunça de dados em sistema que funciona.”" />
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { SecTexture, SecApplications, SecVoice });