// ============================================
// SECTIONS: Logo, Colors, Typography
// ============================================

function LogoSection() {
  return (
    <section className="section paper-tex" data-screen-label="06 Logo" id="logo">
      <div className="section-num">06 · Identidade</div>
      <h2 className="section-title">Logo & marca</h2>
      <p className="section-lede">
        Nossa marca reflete nossa história — contada em cada detalhe. Um wordmark em Alegreya
        italic, aplicado com respiro e sem firula.
      </p>

      <div style={{ marginBottom: 32 }}>
        <div className="showcase" style={{ background: "#FFFFFF", padding: 80, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 420, border: "1px solid var(--rule)" }}>
          <Wordmark size={1.4} />
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, marginBottom: 32 }}>
        <div className="showcase" style={{ background: "#FFFFFF", padding: 40, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }}>
          <Logo size={240} />
        </div>
        <div className="showcase" style={{ background: "var(--creme)", padding: 40, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }}>
          <Logo size={240} />
        </div>
        <div className="showcase" style={{ background: "var(--amarelo)", padding: 40, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }}>
          <Logo size={240} />
        </div>
      </div>
      <div style={{ fontSize: 13, color: "var(--ink-soft)", fontStyle: "italic", marginBottom: 32 }}>
        A marca vive em fundo branco. Sobre fundos claros (creme, amarelo) a aplicação é
        permitida desde que preserve a área de respiro oficial. Nunca em fundos escuros.
      </div>

      <div className="do-dont" style={{ marginTop: 64 }}>
        <div className="dd-card do">
          <div className="dd-label">✓ Como usar</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.7, color: "var(--ink-muted)" }}>
            <li>Sempre sobre fundos neutros (creme, carvão ou âmbar sólido)</li>
            <li>Respeitar margem de segurança equivalente ao M do wordmark</li>
            <li>Manter proporções originais em qualquer escala</li>
            <li>Usar versão clara sobre fundos escuros e vice-versa</li>
          </ul>
        </div>
        <div className="dd-card dont">
          <div className="dd-label">✗ Evitar</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.7, color: "var(--ink-muted)" }}>
            <li>Distorcer, inclinar ou esticar o wordmark</li>
            <li>Aplicar sombras ou efeitos 3D</li>
            <li>Usar sobre fotos de baixo contraste sem overlay</li>
            <li>Trocar as fontes ou substituir o itálico por reto</li>
          </ul>
        </div>
      </div>

      {/* SELO DE 30 ANOS — marca comemorativa */}
      <div style={{ marginTop: 80 }}>
        <div style={{
          display: "flex",
          alignItems: "baseline",
          gap: 16,
          marginBottom: 12,
          paddingBottom: 12,
          borderBottom: "2px solid var(--marrom)"
        }}>
          <h3 className="subsection-title" style={{ margin: 0, paddingBottom: 0, border: "none" }}>
            Selo de 30 anos
          </h3>
          <span style={{
            fontFamily: "var(--font-body)",
            fontSize: 13,
            color: "var(--ink-soft)",
            fontStyle: "italic"
          }}>
            Marca comemorativa · 1996–2026
          </span>
        </div>

        <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-muted)", maxWidth: 760, marginTop: 16 }}>
          Em 2026, a Choperia do Mário completa 30 anos. Para marcar a data, a casa
          ganha uma versão comemorativa do wordmark, enquadrada em oval clássica e
          coroada pelo número 30 entre ramos de louro. É um selo <em>datado</em> —
          circula junto à marca-mãe ao longo do ano, e se recolhe depois.
        </p>

        {/* hero — aplicação em creme */}
        <div style={{
          marginTop: 32,
          background: "var(--creme)",
          border: "1px solid var(--rule)",
          padding: 64,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          minHeight: 420
        }}>
          <Selo30 size={420} />
        </div>

        {/* aplicações — selo EXISTE APENAS sobre fundo branco */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 24, marginTop: 24 }}>
          <div className="showcase" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{ background: "#FFFFFF", padding: 64, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 320 }}>
              <Selo30 size={280} />
            </div>
            <div style={{ padding: "14px 18px", borderTop: "1px solid var(--rule)" }}>
              <div className="eyebrow" style={{ marginBottom: 4 }}>Aplicação única</div>
              <div style={{ fontSize: 13, color: "var(--ink-muted)" }}>Fundo branco · nunca sobre cor nem invertido</div>
            </div>
          </div>
        </div>

        {/* regras */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 32 }}>
          <div style={{
            padding: "28px 32px",
            background: "var(--creme)",
            border: "1px solid var(--rule)"
          }}>
            <div className="eyebrow" style={{ marginBottom: 10, color: "var(--garrafa)" }}>Vigência</div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontWeight: 500,
              fontSize: 22,
              lineHeight: 1.3,
              color: "var(--marrom)",
              marginBottom: 8
            }}>
              Janeiro a dezembro de 2026.
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-muted)" }}>
              Após o encerramento do ano, o selo é aposentado e retorna apenas em
              ocasiões específicas (40 anos, 50 anos, reedições especiais do cardápio).
              Não adotar como marca permanente.
            </div>
          </div>
          <div style={{
            padding: "28px 32px",
            background: "var(--creme)",
            border: "1px solid var(--rule)"
          }}>
            <div className="eyebrow" style={{ marginBottom: 10, color: "var(--bordo)" }}>Coexistência</div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontWeight: 500,
              fontSize: 22,
              lineHeight: 1.3,
              color: "var(--marrom)",
              marginBottom: 8
            }}>
              Nunca substitui a marca-mãe.
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-muted)" }}>
              O selo convive com o wordmark principal, mas não o substitui na fachada,
              no cardápio permanente ou em documentos institucionais. Aparece em peças
              comemorativas, capas de cardápio do ano, social, brindes e edições especiais.
            </div>
          </div>
        </div>

        {/* dos / donts específicos do selo */}
        <div className="do-dont" style={{ marginTop: 24 }}>
          <div className="dd-card do">
            <div className="dd-label">✓ Onde aparece</div>
            <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.7, color: "var(--ink-muted)" }}>
              <li>Capas de cardápio impresso de 2026</li>
              <li>Social media (foto de perfil em datas-chave, stories de aniversário)</li>
              <li>Brindes, copos, bolachas de Chopp, camisetas da comemoração</li>
              <li>Convites, comunicados e peças internas do ano</li>
              <li>Fachada temporária na semana do aniversário</li>
            </ul>
          </div>
          <div className="dd-card dont">
            <div className="dd-label">✗ Onde não aparece</div>
            <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.7, color: "var(--ink-muted)" }}>
              <li>Documentos institucionais permanentes (notas, contratos, cartões)</li>
              <li>Fachada definitiva ou sinalização externa permanente</li>
              <li>Uniformes de uso contínuo</li>
              <li>Redesenhado com outros números ("25", "31") sem briefing</li>
              <li>Aplicado em conjunto com a marca-mãe na mesma peça — escolher uma</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================
// ELEMENTO GRÁFICO — a mão + tulipa (símbolo visual da casa)
// ============================================

function ElementoGrafico() {
  return (
    <section className="section paper-tex" data-screen-label="07 Elemento gráfico" id="elemento">
      <div className="section-num">07 · Identidade</div>
      <h2 className="section-title">Elemento gráfico</h2>
      <p className="section-lede">
        Antes de qualquer cor, antes de qualquer tipografia, existe este gesto: uma
        mão segurando a tulipa cheia, colarinho no ponto, selo da casa no vidro.
        É o símbolo visual da Choperia do Mário — e a imagem que carrega tudo que
        defendemos em uma só cena.
      </p>

      {/* HERO do elemento */}
      <div style={{
        marginTop: 40,
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 48,
        alignItems: "center",
        background: "var(--creme)",
        border: "1px solid var(--rule)",
        padding: "48px 56px",
        minHeight: 560
      }}>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
          <img
            src="assets/mao-tulipa.png"
            alt="Mão segurando a tulipa de Chopp"
            style={{ width: "100%", maxWidth: 360, height: "auto", display: "block", filter: "drop-shadow(0 20px 40px rgba(58,30,10,0.15))" }}
          />
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>O símbolo</div>
          <h3 style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 500,
            fontSize: 44,
            lineHeight: 1.1,
            margin: 0,
            color: "var(--marrom)"
          }}>
            A mão que serve,<br/>
            a tulipa que chega.
          </h3>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-muted)", marginTop: 20 }}>
            Uma ilustração a traço em tinta, combinada com a tulipa fotográfica. Tradição
            (o desenho manual) e verdade (o Chopp real). Colarinho cremoso, selo "Mário"
            visível, ângulo levemente inclinado como quem entrega a quem tem sede.
          </p>
          <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Leitura</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "var(--ink-muted)" }}>Hospitalidade. Serviço. Ofício.</div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Papel</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: "var(--ink-muted)" }}>Selo visual da casa em aplicações-chave.</div>
            </div>
          </div>
        </div>
      </div>

      {/* USOS */}
      <div style={{ marginTop: 48 }}>
        <h3 className="subsection-title" style={{ marginBottom: 24 }}>Como usar</h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {/* uso 1 — em fundo âmbar */}
          <div className="showcase" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{
              background: "var(--amarelo)",
              height: 320,
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "center",
              paddingTop: 20
            }}>
              <img src="assets/mao-tulipa.png" alt="" style={{ height: "95%", width: "auto", display: "block" }} />
            </div>
            <div style={{ padding: "16px 20px", borderTop: "1px solid var(--rule)" }}>
              <div className="eyebrow" style={{ marginBottom: 4 }}>01 · Em fundo âmbar</div>
              <div style={{ fontSize: 13, color: "var(--ink-muted)", lineHeight: 1.5 }}>
                Aplicação-mãe. Capas, cartazes grandes, fachada.
              </div>
            </div>
          </div>

          {/* uso 2 — em fundo creme */}
          <div className="showcase" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{
              background: "var(--creme)",
              height: 320,
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "center",
              paddingTop: 20
            }}>
              <img src="assets/mao-tulipa.png" alt="" style={{ height: "95%", width: "auto", display: "block" }} />
            </div>
            <div style={{ padding: "16px 20px", borderTop: "1px solid var(--rule)" }}>
              <div className="eyebrow" style={{ marginBottom: 4 }}>02 · Em fundo creme</div>
              <div style={{ fontSize: 13, color: "var(--ink-muted)", lineHeight: 1.5 }}>
                Cardápios, peças impressas, sinalização interna.
              </div>
            </div>
          </div>

          {/* uso 3 — em fundo escuro */}
          <div className="showcase" style={{ padding: 0, overflow: "hidden" }}>
            <div style={{
              background: "#0F0F0F",
              height: 320,
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "center",
              paddingTop: 20
            }}>
              <img src="assets/mao-tulipa.png" alt="" style={{ height: "95%", width: "auto", display: "block" }} />
            </div>
            <div style={{ padding: "16px 20px", borderTop: "1px solid var(--rule)" }}>
              <div className="eyebrow" style={{ marginBottom: 4 }}>03 · Em fundo escuro</div>
              <div style={{ fontSize: 13, color: "var(--ink-muted)", lineHeight: 1.5 }}>
                Social, convites, assinatura de vídeo.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* DO / DONT */}
      <div className="do-dont" style={{ marginTop: 48 }}>
        <div className="dd-card do">
          <div className="dd-label">✓ Como usar</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.8, color: "var(--ink-muted)" }}>
            <li>Sempre com respiro generoso ao redor — o gesto precisa respirar</li>
            <li>Preferir fundos sólidos: âmbar, creme, preto ou branco</li>
            <li>Manter a proporção original (vertical, mão ascendendo)</li>
            <li>Em grande escala como selo em capas, cartazes e fachada</li>
            <li>Aparecer quando a mensagem for sobre o produto ou o ato de servir</li>
          </ul>
        </div>
        <div className="dd-card dont">
          <div className="dd-label">✗ Evitar</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.8, color: "var(--ink-muted)" }}>
            <li>Espelhar, girar ou inclinar fora do eixo original</li>
            <li>Aplicar filtros, sombras duras ou efeitos de brilho</li>
            <li>Recortar só a tulipa ou só a mão — é uma imagem única</li>
            <li>Combinar com outras fotos de Chopp na mesma peça</li>
            <li>Usar em tamanho pequeno onde o traço se perde</li>
          </ul>
        </div>
      </div>

      {/* SIGNIFICADO */}
      <div style={{
        marginTop: 48,
        padding: "40px 48px",
        background: "var(--carvao, #0F0F0F)",
        color: "var(--creme)",
        display: "grid",
        gridTemplateColumns: "auto 1fr",
        gap: 48,
        alignItems: "center"
      }}>
        <img src="assets/mao-tulipa.png" alt="" style={{ width: 140, height: "auto", display: "block", filter: "drop-shadow(0 0 24px rgba(242,167,27,0.3))" }} />
        <div>
          <div className="eyebrow" style={{ color: "var(--dourado-claro)", marginBottom: 12 }}>Significado</div>
          <p style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 500,
            fontSize: 28,
            lineHeight: 1.3,
            margin: 0,
            color: "var(--creme)"
          }}>
            "Não é um copo de Chopp. É <span style={{ color: "var(--dourado-claro)" }}>o</span> Chopp
            sendo entregue. Pela mão de quem o tira, para a mão de quem vai brindar."
          </p>
        </div>
      </div>
    </section>
  );
}

const PALETTE_MARCA = [
  { name: "Branco", hex: "#FFFFFF", role: "Fundo · Respiro", var: "--branco", light: true },
  { name: "Preto", hex: "#0F0F0F", role: "Tipografia · Estrutura", var: "--preto", light: false },
  { name: "Âmbar", hex: "#F2A71B", role: "Cor-mãe · Cerveja", var: "--amarelo", light: false },
  { name: "Creme", hex: "#F5ECD6", role: "Fundo · Papel", var: "--creme", light: true },
];

const PALETTE_UI = [
  { name: "Gold", hex: "#D4A24A", role: "Acento · Detalhe", var: "--dourado", light: true },
  { name: "Papel", hex: "#EFE4C7", role: "Superfície alt", var: "--papel", light: true },
  { name: "Marrom", hex: "#3A1E0A", role: "Texto principal", var: "--marrom", light: false },
  { name: "Madeira", hex: "#2A1F18", role: "Estrutura · Balcão", var: "--madeira", light: false },
  { name: "Âmbar escuro", hex: "#D98E0E", role: "Hover · Âmbar", var: "--amarelo-escuro", light: false },
  { name: "Mostarda", hex: "#C77D10", role: "Detalhe · Profundidade", var: "--mostarda", light: false },
  { name: "Bordô", hex: "#7A2B1F", role: "Acento · Tradição", var: "--bordo", light: false },
  { name: "Vinho", hex: "#4A1519", role: "Manifesto · Boêmio", var: "--vinho", light: false },
];

function ColorSection() {
  return (
    <section className="section" data-screen-label="08 Cores" id="cores" style={{ background: "var(--bg-alt)" }}>
      <div className="section-num">08 · Identidade</div>
      <h2 className="section-title">Paleta de cores</h2>
      <p className="section-lede">
        A marca é construída sobre quatro cores essenciais — <em>branco, preto, âmbar e creme</em>.
        Tudo que extrapola isso pertence ao sistema de interface, e é usado com parcimônia.
      </p>

      {/* ——— PALETA DA MARCA ——— */}
      <div style={{
        marginBottom: 48,
        padding: "32px 32px 40px",
        background: "var(--creme)",
        border: "1px solid var(--rule)",
        position: "relative"
      }}>
        <div style={{
          position: "absolute",
          top: -12,
          left: 32,
          background: "var(--bg-alt)",
          padding: "0 12px",
          fontFamily: "var(--font-body)",
          fontSize: 11,
          fontWeight: 500,
          color: "var(--bordo)"
        }}>
          01 · Paleta da marca
        </div>
        <h3 className="subsection-title" style={{ marginTop: 8 }}>Quatro cores essenciais</h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-muted)", margin: "8px 0 24px", maxWidth: 720 }}>
          Usadas em logo, capa, cardápio, fachada, uniforme e redes. Se for a marca falando,
          é com essas quatro.
        </p>
        <div className="swatch-grid">
          {PALETTE_MARCA.map(c => <Swatch key={c.hex} {...c} />)}
        </div>
      </div>

      {/* ——— PALETA DE UI SYSTEM ——— */}
      <div style={{
        marginBottom: 48,
        padding: "32px 32px 40px",
        background: "var(--bg)",
        border: "1px dashed var(--rule-strong)",
        position: "relative"
      }}>
        <div style={{
          position: "absolute",
          top: -12,
          left: 32,
          background: "var(--bg-alt)",
          padding: "0 12px",
          fontFamily: "var(--font-body)",
          fontSize: 11,
          fontWeight: 500,
          color: "var(--marrom-medio)"
        }}>
          02 · UI System
        </div>
        <h3 className="subsection-title" style={{ marginTop: 8 }}>Apoio · Interface · Estados</h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--ink-muted)", margin: "8px 0 24px", maxWidth: 720 }}>
          Para o site, o app de pedidos e materiais de sistema. Nunca deve dominar a presença
          da marca — são cores de apoio, não de assinatura.
        </p>
        <div className="swatch-grid">
          {PALETTE_UI.map(c => <Swatch key={c.hex} {...c} />)}
        </div>
      </div>

      <div style={{ background: "var(--creme)", border: "1px solid var(--rule)", padding: 40 }}>
        <h3 className="subsection-title" style={{ marginBottom: 24 }}>Proporções recomendadas</h3>
        <div style={{ display: "flex", height: 64, marginBottom: 12, border: "1px solid var(--rule)" }}>
          <div style={{ flex: 45, background: "#FFFFFF", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, color: "var(--ink-soft)" }}>45% Branco</div>
          <div style={{ flex: 25, background: "var(--creme)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, color: "var(--ink-soft)", borderLeft: "1px solid var(--rule)" }}>25% Creme</div>
          <div style={{ flex: 18, background: "#0F0F0F", color: "#FFFFFF", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500 }}>18% Preto</div>
          <div style={{ flex: 12, background: "var(--amarelo)", color: "#0F0F0F", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500 }}>12% Âmbar</div>
        </div>
        <p style={{ fontSize: 13, color: "var(--ink-soft)", margin: 0 }}>
          Branco e creme sustentam a comunicação — são o papel onde a marca vive. O preto
          estrutura a tipografia. O âmbar é o sol do Chopp, reservado para blocos de destaque,
          capas e assinaturas. Cores do UI System só entram em interface.
        </p>
      </div>
    </section>
  );
}

function Swatch({ name, hex, role, light }) {
  return (
    <div className="swatch">
      <div className="swatch-chip" style={{ background: hex }}>
        <div style={{ position: "absolute", bottom: 12, left: 12, right: 12, color: light ? "var(--carvao)" : "var(--creme)" }}>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500, opacity: 0.75 }}>{hex.toUpperCase()}</div>
        </div>
      </div>
      <div className="swatch-meta">
        <div className="swatch-name">{name}</div>
        <div className="swatch-hex">{hex.toUpperCase()}</div>
        <div className="swatch-role">{role}</div>
      </div>
    </div>
  );
}

function TypographySection() {
  return (
    <section className="section paper-tex" data-screen-label="09 Tipografia" id="tipografia">
      <div className="section-num">09 · Identidade</div>
      <h2 className="section-title">Tipografia</h2>
      <p className="section-lede">
        Duas famílias, um pareamento clássico. <em>Alegreya Italic Medium</em> para a alma
        boêmia dos títulos. <em>Roboto Slab</em> para a honestidade do texto corrido.
      </p>

      <div className="specimen" style={{ background: "var(--carvao)", color: "var(--creme)" }}>
        <div className="specimen-header" style={{ borderColor: "var(--rule-inverse)" }}>
          <div>
            <div className="specimen-name" style={{ color: "var(--dourado-claro)" }}>Alegreya</div>
            <div className="eyebrow" style={{ color: "rgba(250,246,236,0.5)", marginTop: 4 }}>Display · Itálico · Medium</div>
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--dourado)", fontWeight: 400 }}>400 · 500 · 600 · 700</div>
        </div>
        <div className="specimen-big" style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500 }}>
          Saúde!
        </div>
        <div style={{ borderTop: "1px solid var(--rule-inverse)", marginTop: 32, paddingTop: 24 }}>
          {[
            { label: "H1 · 84", size: 84, text: "Tradição levada a sério" },
            { label: "H2 · 48", size: 48, text: "O Chopp bem tirado" },
            { label: "H3 · 32", size: 32, text: "Uma família de comerciantes desde 1920" },
            { label: "Quote · 24", size: 24, text: "Desde o primeiro copo servido…" },
          ].map(r => (
            <div key={r.label} className="specimen-scale" style={{ borderColor: "var(--rule-inverse)" }}>
              <div className="specimen-scale-label" style={{ color: "rgba(250,246,236,0.5)" }}>{r.label}</div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: r.size, lineHeight: 1.05 }}>{r.text}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--rule-inverse)" }}>
          <div className="eyebrow" style={{ color: "rgba(250,246,236,0.5)", marginBottom: 12 }}>Charset</div>
          <div className="specimen-charset" style={{ fontStyle: "italic", color: "var(--creme)" }}>
            Aa Bb Cc Dd Ee Ff Gg 0123456789 &amp; ? !
          </div>
        </div>
      </div>

      <div className="specimen">
        <div className="specimen-header">
          <div>
            <div className="specimen-name" style={{ fontFamily: "var(--font-body)", fontStyle: "normal", fontWeight: 500 }}>Roboto Slab</div>
            <div className="eyebrow" style={{ marginTop: 4 }}>Body · Geométrico com serifa</div>
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-soft)", fontWeight: 400 }}>300 · 400 · 500 · 700</div>
        </div>
        <div className="specimen-big" style={{ fontFamily: "var(--font-body)", fontWeight: 500 }}>
          1996
        </div>
        <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--rule)" }}>
          {[
            { label: "Body L · 20", size: 20, weight: 400, text: "Paixão pela boêmia e pelos bons momentos." },
            { label: "Body · 15", size: 15, weight: 400, text: "Servir está no nosso dia a dia, sempre com os maiores padrões de qualidade. Isso que nos faz ser referência." },
            { label: "Caption · 13", size: 13, weight: 500, text: "Desde 1920 · Uberaba MG" },
          ].map(r => (
            <div key={r.label} className="specimen-scale">
              <div className="specimen-scale-label">{r.label}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: r.size, fontWeight: r.weight, lineHeight: 1.5 }}>{r.text}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 32 }}>
        <div className="dd-card do">
          <div className="dd-label">✓ Pareamento</div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-muted)" }}>
            Alegreya Italic Medium sempre para títulos, citações e ornamentos narrativos.
            Roboto Slab para tudo o resto — parágrafos, rótulos, UI.
          </p>
        </div>
        <div className="dd-card dont">
          <div className="dd-label">✗ Evitar</div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--ink-muted)" }}>
            Nunca usar Alegreya em reto para títulos (quebra a alma boêmia).
            Não misturar com sans-serifs genéricas como Arial ou Helvetica no corpo.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LogoSection, ColorSection, TypographySection, ElementoGrafico });