// ============================================
// SECTIONS: Cover, Essencia, Historia (4 capítulos), Linhagem, Manifesto
// ============================================

function Cover() {
  const imgRef = React.useRef(null);
  const sheenRef = React.useRef(null);

  React.useEffect(() => {
    // Rotação suave da mão seguindo o mouse em toda a página
    // + brilho holográfico como sticker
    let rafId = null;
    let targetRx = 0, targetRy = 0;
    let currentRx = 0, currentRy = 0;
    let targetSx = 50, targetSy = 50;
    let currentSx = 50, currentSy = 50;

    const onMove = (e) => {
      const x = e.clientX / window.innerWidth;   // 0..1
      const y = e.clientY / window.innerHeight;  // 0..1
      // rotação leve: -8..+8deg em Y, -5..+5deg em X
      targetRy = (x - 0.5) * 16;
      targetRx = (0.5 - y) * 10;
      // posição do sheen relativo à imagem
      targetSx = x * 100;
      targetSy = y * 100;
    };

    const tick = () => {
      // easing suave
      currentRx += (targetRx - currentRx) * 0.06;
      currentRy += (targetRy - currentRy) * 0.06;
      currentSx += (targetSx - currentSx) * 0.08;
      currentSy += (targetSy - currentSy) * 0.08;
      if (imgRef.current) {
        imgRef.current.style.transform =
          `perspective(900px) rotateX(${currentRx.toFixed(2)}deg) rotateY(${currentRy.toFixed(2)}deg)`;
      }
      if (sheenRef.current) {
        sheenRef.current.style.setProperty("--sx", `${currentSx.toFixed(1)}%`);
        sheenRef.current.style.setProperty("--sy", `${currentSy.toFixed(1)}%`);
      }
      rafId = requestAnimationFrame(tick);
    };

    window.addEventListener("mousemove", onMove);
    rafId = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMove);
      cancelAnimationFrame(rafId);
    };
  }, []);

  return (
    <section className="hero" data-screen-label="01 Capa" id="capa">
      {/* MÃO — elemento de grande destaque, protagonista absoluto */}
      <div className="hero-hand-wrap">
        <div
          ref={sheenRef}
          className="hero-hand-sticker"
          style={{ "--sx": "50%", "--sy": "30%" }}
        >
          <div className="hero-hand-halo"></div>
          <img
            ref={imgRef}
            src="assets/mao-tulipa.png"
            alt="Mão segurando a tulipa de Chopp"
            className="hero-hand-img"
          />
          <div className="hero-hand-shine"></div>
          <div className="hero-hand-hotspot"></div>
        </div>
      </div>

      <div className="hero-top">
        <div className="hero-header">
          <div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, color: "var(--marrom)" }}>
              Brand System · v1.0
            </div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 400, color: "var(--marrom-medio)", marginTop: 4 }}>
              Abril · 2026 · 30 anos
            </div>
          </div>
          <Selo30 size={120} />
        </div>
      </div>

      <div className="hero-middle" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 48, alignItems: "center", position: "relative", zIndex: 2, maxWidth: 720 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: 22, color: "var(--bordo)", marginBottom: 24 }}>
            Uma tradição levada a sério
          </div>
          <h1 className="hero-title">
            <span className="line" style={{ fontStyle: "italic" }}>Contada em</span>
            <span className="line indent" style={{ fontStyle: "italic" }}>cada detalhe<span style={{ color: "var(--bordo)" }}>.</span></span>
          </h1>
          <div style={{ marginTop: 32, fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.55, color: "var(--marrom-medio)", maxWidth: 520 }}>
            Uma família de comerciantes há mais de 100 anos na Rua Arthur Machado.
            Uma choperia nascida da boemia clássica, em 1996. Este é o guia que registra
            como a Choperia do Mário se apresenta ao mundo — e a memória de onde viemos.
          </div>
        </div>
      </div>

      <div className="hero-bottom">
        <div className="hero-tag">
          <strong>Desde 1996, Uberaba · MG.</strong><br/>
          Herdeiros de uma família que faz comércio na Rua Arthur Machado desde 1920.
        </div>
        <div className="stamp" style={{ borderColor: "var(--marrom)", color: "var(--marrom)" }}>
          <div className="stamp-top">Brand System</div>
          <div className="stamp-big">v1.0</div>
          <div className="stamp-bot">Abr · 2026</div>
        </div>
      </div>
    </section>
  );
}

function Essencia() {
  return (
    <section className="section paper-tex" data-screen-label="02 Essência" id="essencia">
      <div className="section-num">01 · A Marca</div>
      <h2 className="section-title">A essência</h2>
      <p className="section-lede">
        Uma choperia de família, nascida em 1996 em Uberaba/MG, feita por comerciantes de sangue
        desde 1920. Tradição, boêmia e prazer de servir bem.
      </p>

      <div className="pillars" style={{ marginBottom: 64 }}>
        {[
          ["I", "Tradição com autenticidade", "Não seguimos modismos, seguimos a essência: produto bom, feito do jeito certo, com verdade. Somos tradicionais, mas sem tédio."],
          ["II", "Qualidade sem concessões", "Sempre qualidade em detrimento de quantidade. Três dedos de colarinho cremoso, na temperatura ideal, sem deixar o freguês com sede."],
          ["III", "Respeito por tudo e por todos", "Hospitalidade e encantamento é se importar de verdade. Aqui, cada pessoa que entra leva consigo um momento inesquecível."]
        ].map(([n, t, b], i) => (
          <div key={n} className="pillar">
            <div>
              <div className="pillar-num">{n}</div>
              <div className="pillar-title">{t}</div>
              <div className="pillar-body">{b}</div>
            </div>
            <div className="eyebrow">Pilar 0{i+1}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Manifesto</div>
          <p style={{ fontFamily: "'Alegreya', Georgia, serif", fontStyle: "italic", fontWeight: 500, fontSize: 32, lineHeight: 1.25, margin: 0, color: "var(--bordo)" }}>
            "Somos tradicionais, mas sem tédio. Somos boêmios, mas de família.
            Somos clássicos, mas com coração aberto ao novo."
          </p>
          <div style={{ marginTop: 24 }}>
            <OrnamentalDivider width={140} />
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Missão</div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-muted)", margin: "0 0 20px" }}>
            Servir bem, reunir pessoas e transformar momentos simples em inesquecíveis.
          </p>
          <div className="eyebrow" style={{ marginBottom: 12, marginTop: 28 }}>Promessa</div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-muted)", margin: 0 }}>
            Não vendemos apenas Chopp e comida. Entregamos tradição em forma de sabor
            e a certeza de que bons momentos merecem ser celebrados.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================
// HISTÓRIA — 4 capítulos narrativos
// ============================================

function HistoriaCapitulos() {
  const caps = [
    {
      num: "01",
      yr: "1889 — 1920",
      title: "A chegada",
      lede: "A ferrovia muda uma cidade. Três famílias mudam uma família.",
      body: (
        <>
          <p>
            A chegada da ferrovia Mogiana em 1889 deu a Uberaba uma nova ligação com as
            grandes capitais — mais rápida, segura, confortável. Pela estação passavam
            mercadorias, gente e sonhos. Quem chegava descia para o centro pela Rua do
            Comércio, que mais tarde se chamaria <em>Arthur Machado</em>.
          </p>
          <p>
            Na mesma época, três famílias vindas da Europa desembarcaram em Uberaba
            buscando uma vida melhor no Brasil: <strong>Molinar</strong>,
            <strong> Vasques</strong> e <strong>Ponticelli</strong>. Estavam, sem saber,
            plantando as raízes do que, um século depois, seria a Choperia do Mário.
          </p>
        </>
      )
    },
    {
      num: "02",
      yr: "1920 — 1960",
      title: "A família comerciante",
      lede: "De portas abertas na Arthur Machado, em quatro gerações de balcão.",
      body: (
        <>
          <p>
            A partir dos anos 1920, o sobrenome da família começa a ocupar um ponto
            depois do outro na Rua Arthur Machado. É a <strong>Confeitaria Vasques</strong>,
            de Felipe e Maria. A <strong>Casa Molinar</strong>, de Luis Mário Molinar,
            com artigos esportivos. Nos anos 50, Mário Vasques Molinar Sr. abre a
            <strong> Nossa Casa</strong>, de roupas masculinas. Nos anos 60, o
            <strong> Stop Cromados</strong>, do setor automotivo. France Vasques inaugura
            a <strong>Casa Daló</strong>, de artigos para o lar.
          </p>
          <p>
            São negócios diferentes, mas com a mesma fé: de que um ponto bem feito, com
            gente olhando nos olhos de quem entra, é o suficiente. É esse DNA — de quem
            atende, serve e cumpre o combinado — que atravessa tudo o que vem depois.
          </p>
        </>
      )
    },
    {
      num: "03",
      yr: "1950 — 1990",
      title: "Dona Maria, a Viúva",
      lede: "A matriarca que meteu a mão na massa. Literalmente.",
      body: (
        <>
          <p>
            Em 1920, Felipe e Maria abrem a Confeitaria Vasques. Nos anos 50, Felipe
            morre — e Dona Maria, em vez de fechar as portas, mete a mão na massa.
            Pizzas, salgados, uma receita simples que virou lenda: farinha, óleo, ovos,
            água. Sovada até dar o ponto. O ponto era o dela.
          </p>
          <p>
            A confeitaria vira o <strong>Bar da Viúva</strong>. Os filhos Felipe e
            Gilberto trabalham com ela por 40 anos. Mesmo com uma erisipela na perna,
            Dona Maria era incansável — atrás do balcão até o fim. Hoje, sua história
            e seus sabores são lembrados em Uberaba e também pelo Chopp Antarctica.
          </p>
          <p style={{ fontStyle: "italic", color: "var(--bordo)", fontSize: 18 }}>
            Se existe uma avó espiritual da Choperia do Mário, é ela.
          </p>
        </>
      )
    },
    {
      num: "04",
      yr: "1996 — hoje",
      title: "A Choperia do Mário",
      lede: "Do armário? Não. Do Chopp extraordinário.",
      body: (
        <>
          <p>
            Nos anos 90, Mario Vasques Molinar Jr. adorava visitar bares clássicos
            boêmios e tomar um Chopp bem tirado — do jeito que tem que ser. Inspirado
            nos bares do Rio e de São Paulo, em <strong>1996</strong> abre a primeira
            Choperia do Mário, na Arthur Machado, bem em frente ao camelódromo.
          </p>
          <p>
            Em <strong>2003</strong>, uma segunda unidade no Shopping Uberaba — antes
            mesmo de o shopping ter praça de alimentação. Em <strong>2009</strong>, as
            duas unidades antigas fecham para dar lugar à casa atual — um salão amplo,
            de volta à Arthur Machado, recriando a atmosfera acolhedora dos bares
            tradicionais, com aquele senso de nostalgia cativante.
          </p>
          <p>
            Hoje, aos 61 anos, Mario já dedicou quase metade da vida a servir bem pela
            choperia. E quando te perguntarem, lembra: <em>não é o do armário — é o do
            Chopp extraordinário</em>.
          </p>
        </>
      )
    }
  ];

  return (
    <section className="section" data-screen-label="03 História" id="historia" style={{ background: "var(--amarelo)", color: "var(--marrom)", position: "relative", overflow: "hidden" }}>
      <div className="section-num" style={{ color: "var(--marrom-medio)" }}>02 · A Marca</div>
      <h2 className="section-title">Como tudo começou…</h2>
      <p className="section-lede" style={{ color: "var(--marrom-medio)" }}>
        Nossa história não começa em 1996. Começa quando a ferrovia Mogiana chega a
        Uberaba em 1889 e três famílias europeias descem na estação. De lá pra cá,
        são quatro capítulos — e um único fio condutor: <em>servir bem</em>.
      </p>

      <div style={{ marginTop: 56, display: "flex", flexDirection: "column", gap: 56 }}>
        {caps.map((c, i) => (
          <article key={c.num} style={{
            display: "grid",
            gridTemplateColumns: "120px 1fr 1.4fr",
            gap: 40,
            alignItems: "start",
            paddingTop: 32,
            borderTop: "1px solid var(--bordo)"
          }}>
            {/* Col 1 — num + year */}
            <div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontWeight: 500,
                fontSize: 72,
                lineHeight: 0.9,
                color: "var(--bordo)"
              }}>
                {c.num}
              </div>
              <div style={{
                fontFamily: "var(--font-body)",
                fontSize: 12,
                fontWeight: 500,
                color: "var(--marrom-medio)",
                marginTop: 12,
                letterSpacing: 0
              }}>
                Capítulo {c.num}
              </div>
              <div style={{
                fontFamily: "var(--font-body)",
                fontSize: 13,
                fontWeight: 500,
                color: "var(--marrom)",
                marginTop: 2
              }}>
                {c.yr}
              </div>
            </div>

            {/* Col 2 — title + lede */}
            <div>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontWeight: 500,
                fontSize: 40,
                lineHeight: 1.05,
                margin: 0,
                color: "var(--marrom)"
              }}>
                {c.title}
              </h3>
              <div style={{
                marginTop: 16,
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontWeight: 400,
                fontSize: 22,
                lineHeight: 1.35,
                color: "var(--bordo)"
              }}>
                {c.lede}
              </div>
              <div style={{ marginTop: 20 }}>
                <OrnamentalDivider width={100} />
              </div>
            </div>

            {/* Col 3 — body */}
            <div style={{
              fontFamily: "var(--font-body)",
              fontSize: 16,
              fontWeight: 400,
              lineHeight: 1.7,
              color: "var(--marrom-medio)"
            }}>
              {c.body}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============================================
// LINHAGEM — os negócios anteriores da família
// ============================================

function Linhagem() {
  const negocios = [
    { name: "Confeitaria Vasques", yr: "1920", fam: "Felipe & Maria Vasques", note: "O ponto de partida. Doces e pães na Rua Arthur Machado." },
    { name: "Casa Molinar", yr: "anos 50", fam: "Luis Mário Molinar", note: "Artigos esportivos. O primeiro Molinar com ponto na rua." },
    { name: "Bar da Viúva", yr: "anos 50", fam: "Dona Maria Vasques", note: "A confeitaria vira bar. Pizzas, salgados, 40 anos de balcão." },
    { name: "Nossa Casa", yr: "anos 50", fam: "Mário Vasques Molinar Sr.", note: "Roupas e calçados masculinos. O pai do Mario." },
    { name: "Stop Cromados", yr: "anos 60", fam: "Mário Vasques Molinar Sr.", note: "Setor automotivo. Uberaba crescendo, a família junto." },
    { name: "Casa Daló", yr: "—", fam: "France Vasques", note: "Artigos para o lar. Mais um ponto na Arthur Machado." },
    { name: "Choperia do Mário", yr: "1996", fam: "Mario Vasques Molinar Jr.", note: "O capítulo atual. Boemia clássica, servida bem tirada." }
  ];

  return (
    <section className="section paper-tex" data-screen-label="04 Linhagem" id="linhagem">
      <div className="section-num">03 · A Marca</div>
      <h2 className="section-title">A linhagem</h2>
      <p className="section-lede">
        Antes da choperia, sete pontos na mesma rua. Sete portas abertas, sete
        balcões, quatro gerações. A Choperia do Mário não é um começo — é uma
        continuação.
      </p>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
        gap: 0,
        marginTop: 48,
        borderTop: "1px solid var(--rule)",
        borderLeft: "1px solid var(--rule)"
      }}>
        {negocios.map((n, i) => {
          const isLast = i === negocios.length - 1;
          return (
            <div key={n.name} style={{
              padding: "28px 24px 32px",
              borderRight: "1px solid var(--rule)",
              borderBottom: "1px solid var(--rule)",
              background: isLast ? "var(--bordo)" : "transparent",
              color: isLast ? "var(--creme)" : "inherit",
              position: "relative"
            }}>
              <div style={{
                fontFamily: "var(--font-body)",
                fontSize: 12,
                fontWeight: 500,
                color: isLast ? "rgba(250,246,236,0.7)" : "var(--ink-soft)"
              }}>
                {n.yr} · Arthur Machado
              </div>
              <div style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontWeight: 500,
                fontSize: 26,
                lineHeight: 1.15,
                marginTop: 10,
                color: isLast ? "var(--dourado-claro)" : "var(--bordo)"
              }}>
                {n.name}
              </div>
              <div style={{
                fontFamily: "var(--font-body)",
                fontSize: 13,
                fontWeight: 500,
                marginTop: 6,
                color: isLast ? "rgba(250,246,236,0.85)" : "var(--ink)"
              }}>
                {n.fam}
              </div>
              <div style={{
                fontFamily: "var(--font-body)",
                fontSize: 14,
                lineHeight: 1.55,
                marginTop: 14,
                color: isLast ? "rgba(250,246,236,0.75)" : "var(--ink-muted)"
              }}>
                {n.note}
              </div>
              {isLast && (
                <div style={{
                  position: "absolute",
                  top: 16,
                  right: 16,
                  fontFamily: "var(--font-body)",
                  fontSize: 10,
                  fontWeight: 500,
                  color: "var(--dourado-claro)",
                  border: "1px solid var(--dourado-claro)",
                  padding: "4px 8px",
                  borderRadius: 2
                }}>
                  Capítulo atual
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 48,
        padding: "32px 40px",
        background: "var(--creme)",
        border: "1px solid var(--rule)",
        display: "grid",
        gridTemplateColumns: "auto 1fr",
        gap: 32,
        alignItems: "center"
      }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontWeight: 600,
          fontSize: 56,
          lineHeight: 1,
          color: "var(--bordo)"
        }}>
          100+
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 6 }}>O que isso significa para a marca</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.65, color: "var(--ink-muted)" }}>
            Toda vez que a Choperia do Mário fala com o mundo, está falando em nome de
            uma família de comerciantes com mais de 100 anos na mesma rua. Isso
            autoriza um tom: o de quem já viu de tudo, serve há muito tempo, e não
            tem pressa de ser moderno. Tradição é a nossa vantagem, não o nosso peso.
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================
// MANIFESTO — "Se é pra…" + "Do Chopp extraordinário"
// ============================================

function Manifesto() {
  return (
    <section className="section" data-screen-label="05 Manifesto" id="manifesto"
      style={{ background: "#4A1519", color: "var(--creme)", position: "relative", overflow: "hidden" }}>
      <div className="section-num" style={{ color: "rgba(250,246,236,0.6)" }}>04 · A Marca</div>
      <h2 className="section-title on-dark">Manifesto</h2>
      <p className="section-lede" style={{ color: "rgba(250,246,236,0.8)" }}>
        Se a marca tivesse que caber em três frases e um trocadilho, seria isto.
        O que defendemos, o que servimos, como somos.
      </p>

      <div style={{
        marginTop: 64,
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr",
        gap: 40
      }}>
        {[
          ["Se é pra brindar,", "que seja com Chopp bem tirado."],
          ["Se é pra petiscar,", "que seja com comida feita com alma."],
          ["Se é pra reunir,", "que seja com alegria."]
        ].map(([open, close], i) => (
          <div key={i} style={{
            paddingTop: 28,
            borderTop: "1px solid rgba(250,246,236,0.3)"
          }}>
            <div style={{
              fontFamily: "var(--font-body)",
              fontSize: 12,
              fontWeight: 500,
              color: "var(--dourado-claro)",
              marginBottom: 16
            }}>
              0{i + 1} · Manifesto
            </div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontWeight: 500,
              fontSize: 38,
              lineHeight: 1.15,
              color: "var(--creme)"
            }}>
              {open}
            </div>
            <div style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontWeight: 500,
              fontSize: 38,
              lineHeight: 1.15,
              color: "var(--dourado-claro)",
              marginTop: 4
            }}>
              {close}
            </div>
          </div>
        ))}
      </div>

      {/* Declaração de identidade */}
      <div style={{
        marginTop: 88,
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 64,
        alignItems: "start"
      }}>
        <div>
          <div className="eyebrow" style={{ color: "var(--dourado-claro)", marginBottom: 16 }}>Quem somos</div>
          <p style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontWeight: 500,
            fontSize: 34,
            lineHeight: 1.25,
            margin: 0,
            color: "var(--creme)"
          }}>
            "Tradicionais, mas sem tédio.<br/>
            Boêmios, mas de família.<br/>
            Clássicos, mas com coração aberto ao novo."
          </p>
        </div>
        <div>
          <div className="eyebrow" style={{ color: "var(--dourado-claro)", marginBottom: 16 }}>Nossa missão</div>
          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: 18,
            lineHeight: 1.6,
            margin: 0,
            color: "rgba(250,246,236,0.85)"
          }}>
            Servir bem, reunir pessoas e transformar momentos simples
            em inesquecíveis.
          </p>
          <div style={{ marginTop: 32 }}>
            <div className="eyebrow" style={{ color: "var(--dourado-claro)", marginBottom: 16 }}>Nosso princípio</div>
            <p style={{
              fontFamily: "var(--font-body)",
              fontSize: 18,
              lineHeight: 1.6,
              margin: 0,
              color: "rgba(250,246,236,0.85)"
            }}>
              Desde o primeiro copo servido, carregamos a alma dos bares boêmios do
              Brasil. Aqui, cada tulipa bem tirada, cada petisco, cada prato tem
              história.
            </p>
          </div>
        </div>
      </div>

      {/* Assinatura — "não é o do armário" */}
      <div style={{
        marginTop: 96,
        padding: "56px 48px",
        border: "1px solid var(--dourado-claro)",
        position: "relative",
        textAlign: "center"
      }}>
        <div style={{
          position: "absolute",
          top: -12,
          left: "50%",
          transform: "translateX(-50%)",
          background: "#4A1519",
          padding: "0 20px",
          fontFamily: "var(--font-body)",
          fontSize: 11,
          fontWeight: 500,
          color: "var(--dourado-claro)"
        }}>
          Assinatura verbal da casa
        </div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontStyle: "italic",
          fontWeight: 500,
          fontSize: 52,
          lineHeight: 1.15,
          color: "var(--creme)",
          maxWidth: 800,
          margin: "0 auto"
        }}>
          Não é o do armário —<br/>
          <span style={{ color: "var(--dourado-claro)" }}>é o do Chopp extraordinário.</span>
        </div>
        <div style={{
          marginTop: 24,
          fontFamily: "var(--font-body)",
          fontSize: 14,
          lineHeight: 1.55,
          color: "rgba(250,246,236,0.65)",
          maxWidth: 560,
          margin: "24px auto 0"
        }}>
          Uso livre em campanhas, cardápio, uniforme, bolacha de copo e tom de boas-vindas.
          Dito com leveza, como quem já contou essa piada mil vezes — e continua
          achando graça.
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Cover, Essencia, HistoriaCapitulos, Linhagem, Manifesto });
