function Capabilities() {
  const items = [
    {
      num: '01',
      title: 'Organizar e escalar operações',
      body: 'Conectamos ferramentas, times e dados em uma estrutura única — onde processo manual vira fluxo automatizado e auditável.',
      tags: ['Workflow', 'Integrações', 'Observabilidade'],
    },
    {
      num: '02',
      title: 'Decisões baseadas em dados',
      body: 'Pipelines de ingestão, modelagem e visualização que transformam ruído em métricas acionáveis para marketing, vendas e gestão.',
      tags: ['BI', 'Atribuição', 'Métricas unit-economics'],
    },
    {
      num: '03',
      title: 'Automação com IA no core',
      body: 'Agentes, copilotos e modelos preditivos embutidos nos produtos — não como add-on, mas como a espinha dorsal da operação.',
      tags: ['LLMs', 'Agentes', 'Preditivo'],
    },
    {
      num: '04',
      title: 'Receita sem escalar headcount',
      body: 'Projetamos sistemas onde cada novo cliente não exige um novo operador humano — o software carrega a carga marginal.',
      tags: ['Self-serve', 'Produto-led', 'Margem'],
    },
  ];

  return (
    <section id="capabilities" className="section">
      <div className="container">
        <div className="section-head">
          <div className="label">
            <span className="num">§ 01 / CAPACIDADES</span>
            <span className="eyebrow"><span className="dot"></span>O QUE FAZEMOS</span>
          </div>
          <div className="title">
            <h2 className="h2">
              Operamos como um laboratório.<br/>
              Cada produto resolve um <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>problema real</span> de mercado.
            </h2>
            <p>
              Entregamos plataformas proprietárias que substituem planilhas, scripts e operação manual por sistemas inteligentes — de ponta a ponta.
            </p>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 0,
          borderBottom: '1px solid var(--line)',
        }} className="cap-grid">
          {items.map((it, i) => (
            <article key={i} style={{
              padding: '48px 32px',
              borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none',
              borderTop: i > 1 ? '1px solid var(--line)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 20,
              minHeight: 300,
              position: 'relative',
              transition: 'background .2s ease',
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(30,123,255,0.04)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--accent-ink)', letterSpacing: '0.14em' }}>
                  {it.num}
                </span>
                <span style={{ flex: 1, height: 1, background: 'var(--line)' }}></span>
              </div>
              <h3 className="h3" style={{ maxWidth: 460 }}>{it.title}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.55, margin: 0, maxWidth: 480 }}>
                {it.body}
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 'auto' }}>
                {it.tags.map(t => (
                  <span key={t} className="mono" style={{
                    fontSize: 11,
                    padding: '5px 10px',
                    borderRadius: 999,
                    background: 'var(--bg-elev)',
                    border: '1px solid var(--line)',
                    color: 'var(--ink-2)',
                    letterSpacing: '0.03em',
                  }}>
                    {t}
                  </span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .cap-grid { grid-template-columns: 1fr !important; }
          .cap-grid > article { border-right: none !important; border-top: 1px solid var(--line) !important; }
          .cap-grid > article:first-child { border-top: none !important; }
        }
      `}</style>
    </section>
  );
}
window.Capabilities = Capabilities;