function Pillars() {
  const items = [
    { t: 'Condomínios', d: 'Administramos a operação inteira — finanças, manutenção, assembleia e atendimento.', n: 1 },
    { t: 'Métricas',    d: 'Indicadores claros de saúde financeira, inadimplência e desempenho em tempo real.', n: 2 },
    { t: 'Organização', d: 'Processos auditáveis e governança que se sustentam por décadas, não meses.', n: 3 }
  ];
  return (
    <section style={{ padding: '140px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 64, gap: 48, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 760 }}>
            <div style={{ display: 'inline-flex', padding: '6px 14px', borderRadius: 999, background: '#EEF1FA', fontFamily: 'Inter', fontSize: 12, fontWeight: 600, color: '#1B2D70', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 20 }}>
              Três pilares
            </div>
            <h2 style={{ fontFamily: 'Saira', fontWeight: 400, fontSize: 56, lineHeight: 1.05, color: '#0A1330', letterSpacing: '-0.025em', margin: 0 }}>
              A interseção entre condomínios,<br/>métricas e organização chama-se Semog.
            </h2>
          </div>
          <a href="#" style={{
            fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: '#1B2D70',
            padding: '12px 22px', borderRadius: 999, border: '1px solid #D9D9DF', textDecoration: 'none'
          }}>Conheça nossa história →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((it) => (
            <div key={it.t} style={{
              background: '#F6F6F8', borderRadius: 28, padding: 32, minHeight: 280,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              transition: 'transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.4s'
            }}>
              <div style={{ display: 'flex', gap: 4 }}>
                {Array.from({ length: it.n }).map((_, k) => (
                  <div key={k} style={{ width: 8, height: 28, borderRadius: 4, background: '#ADD5EB' }} />
                ))}
                {Array.from({ length: 3 - it.n }).map((_, k) => (
                  <div key={k} style={{ width: 8, height: 28, borderRadius: 4, background: '#ECECEF' }} />
                ))}
              </div>
              <div>
                <h3 style={{ fontFamily: 'Saira', fontWeight: 500, fontSize: 30, color: '#0A1330', margin: 0, letterSpacing: '-0.01em' }}>{it.t}</h3>
                <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: '#4B4B55', margin: '12px 0 0' }}>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SemogPillars = Pillars;