/* Benefits.jsx — 8 objective benefits */
const Benefits = () => {
  const items = [
    { icon: 'clock', t: 'Atendimento 24/7', d: 'Sua empresa responde a qualquer hora, sem fila e sem depender de escala.' },
    { icon: 'repeat-2', t: 'Menos tarefas repetitivas', d: 'A IA cuida do operacional e libera o time para o que importa.' },
    { icon: 'zap', t: 'Mais velocidade nas respostas', d: 'Primeiro contato instantâneo, com informação certa na hora.' },
    { icon: 'folder-kanban', t: 'Organização de leads', d: 'Cada oportunidade registrada, qualificada e priorizada.' },
    { icon: 'plug', t: 'Integração com seus sistemas', d: 'Conecta ao que você já usa, sem trocar de ferramenta.' },
    { icon: 'trending-up', t: 'Escalabilidade operacional', d: 'Cresça no volume de atendimento sem crescer o custo na mesma proporção.' },
    { icon: 'heart-handshake', t: 'Melhor experiência do cliente', d: 'Respostas consistentes e um atendimento que não deixa ninguém esperando.' },
    { icon: 'bar-chart-3', t: 'Mais controle e indicadores', d: 'Painéis com métricas reais para decidir com dados, não com achismo.' },
  ];
  return (
    <section id="beneficios" style={{ background: 'var(--ar-bg-main)', padding: '116px 0' }}>
      <Container>
        <SectionHead
          eyebrow="BENEFÍCIOS"
          title={<>Resultado prático, <GradText>sem promessa fora da realidade</GradText></>}
          sub="Ganhos concretos observados em implantações da AR — replicáveis ao seu contexto após o diagnóstico."
        />
        <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 52 }}>
          {items.map((it, i) => (
            <Reveal key={it.t} delay={(i % 4) * 60} style={{ display: 'flex' }}>
              <Card style={{ padding: 24, flex: 1 }}>
                <IconTile icon={it.icon} size={46} accent="blue" />
                <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 17, color: 'var(--ar-text-main)', marginTop: 18, letterSpacing: '-0.005em', lineHeight: 1.25 }}>{it.t}</div>
                <div style={{ fontFamily: 'var(--ar-font-body)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ar-text-muted)', marginTop: 8 }}>{it.d}</div>
              </Card>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
};

window.Benefits = Benefits;