// Stats — quick credibility row
function Stats() {
  const items = [
    { num: '40+', label: 'projetos entregues', sub: 'web, apps & SaaS' },
    { num: '12', label: 'países', sub: 'clientes ativos' },
    { num: '98%', label: 'satisfação', sub: 'NPS médio' },
    { num: '24h', label: 'primeiro retorno', sub: 'dias úteis' },
  ];
  return (
    <section style={{ padding: '40px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: '8px 24px',
            borderLeft: i === 0 ? 'none' : '1px solid var(--line)',
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <span className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 600, lineHeight: 1, letterSpacing: '-0.03em' }}>
              {it.num}
            </span>
            <span style={{ fontSize: 14, color: 'var(--ink-2)', fontWeight: 500 }}>{it.label}</span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>// {it.sub}</span>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 800px){
          section > .container{ grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
        }
      `}</style>
    </section>
  );
}

window.Stats = Stats;