function Manifesto() {
  const principles = [
    { n: 'I', t: 'Problema real, não hype', d: 'Construímos para dores que fazem clientes perderem dinheiro hoje — não para tendências de deck.' },
    { n: 'II', t: 'Automação onde houver repetição', d: 'Se um humano faz isso duas vezes por semana, um sistema deveria estar fazendo cinco vezes por hora.' },
    { n: 'III', t: 'IA no core, não como enfeite', d: 'Modelos não são feature de marketing — são a arquitetura do produto desde o dia um.' },
    { n: 'IV', t: 'Equity, não tarefa', d: 'Cada sistema que entregamos aumenta o valor de longo prazo do cliente. Construímos ativos, não entregáveis.' },
    { n: 'V', t: 'Ecossistema > ferramenta', d: 'Produtos isolados competem por atenção. Produtos conectados compõem uma plataforma inevitável.' },
    { n: 'VI', t: 'Escala sem fricção humana', d: 'O software carrega o peso marginal. Equipe resolve o excepcional, não o repetitivo.' },
  ];

  return (
    <section id="manifesto" className="section">
      <div className="container">
        <div className="section-head">
          <div className="label">
            <span className="num">§ 04 / DNA</span>
            <span className="eyebrow"><span className="dot"></span>MANIFESTO</span>
          </div>
          <div className="title">
            <h2 className="h2">
              Seis princípios. Um mesmo <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>vetor</span>: fazer mais com menos.
            </h2>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0,
        }} className="manifesto-grid">
          {principles.map((p, i) => (
            <div key={p.n} style={{
              padding: '40px 28px',
              borderRight: (i + 1) % 3 !== 0 ? '1px solid var(--line)' : 'none',
              borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 14,
              minHeight: 240,
            }}>
              <div style={{
                fontFamily: 'var(--font-serif)',
                fontStyle: 'italic',
                fontSize: 40,
                color: 'var(--accent)',
                lineHeight: 1,
                letterSpacing: '-0.02em',
              }}>
                {p.n}.
              </div>
              <h3 style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>
                {p.t}
              </h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 14.5, lineHeight: 1.55, margin: 0 }}>
                {p.d}
              </p>
            </div>
          ))}
        </div>

        {/* Big quote */}
        <div style={{
          padding: '120px 0 100px',
          borderTop: '1px solid var(--line)',
          textAlign: 'center',
          position: 'relative',
        }}>
          <span className="mono" style={{
            fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.14em',
            display: 'block', marginBottom: 32,
          }}>
            · EM RESUMO ·
          </span>
          <p style={{
            fontSize: 'clamp(28px, 4vw, 56px)',
            lineHeight: 1.1,
            letterSpacing: '-0.025em',
            fontWeight: 400,
            maxWidth: 1100,
            margin: '0 auto',
            textWrap: 'balance',
          }}>
            A Zion Labz constrói tecnologias que permitem que empresas façam{' '}
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent-ink)' }}>mais com menos</span>
            {' '}— automatizando operações, potencializando resultados e criando estruturas mais escaláveis e inteligentes.
          </p>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .manifesto-grid { grid-template-columns: 1fr 1fr !important; }
          .manifesto-grid > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
          .manifesto-grid > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }
        }
        @media (max-width: 560px) {
          .manifesto-grid { grid-template-columns: 1fr !important; }
          .manifesto-grid > div { border-right: none !important; }
        }
      `}</style>
    </section>
  );
}
window.Manifesto = Manifesto;