const Features = () => {
  const tipos = [
    { num: 'TIPO 01', icon: <Icon.Filter/>, title: 'IA de Qualificação', desc: 'Recebe o lead no WhatsApp, faz as perguntas certas da sua área de atuação e identifica em segundos quem é caso, quem não é, e quem precisa de mais informação.', tag: 'Para escritórios com alto volume de mídia' },
    { num: 'TIPO 02', icon: <Icon.Calendar/>, title: 'IA de Agendamento', desc: 'Qualifica o lead e agenda a reunião direto na agenda do advogado. Confirma horário, fuso, envia lembrete e reagenda no-shows automaticamente.', tag: 'Para times com calendário de consultivo' },
    { num: 'TIPO 03', icon: <Icon.Money/>, title: 'IA de Fechamento', desc: 'Vai além: explica o serviço, supera objeções, envia proposta e fecha o contrato pelo WhatsApp. O lead entra no funil e sai cliente assinado.', tag: 'Para escritórios com ticket padronizado' },
    { num: 'TIPO 04', icon: <Icon.Shield/>, title: 'IA de Pós-venda', desc: 'Atende clientes que já contrataram. Responde sobre andamento de processo, prazos, audiências e documentos — sem ocupar a sua equipe.', tag: 'Para reduzir CAC e churn' },
  ];

  const minis = [
    { icon: <Icon.Whatsapp/>, label: 'Atende no WhatsApp' },
    { icon: <Icon.Mic/>, label: 'Envia e ouve áudios' },
    { icon: <Icon.Doc/>, label: 'Lê documentos' },
    { icon: <Icon.Clock/>, label: 'Follow-up automático' },
    { icon: <Icon.Spark/>, label: 'Treinada na sua área' },
  ];

  return (
    <section className="section" id="ia" data-screen-label="03 Funcionalidades">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>O QUE A IA FAZ</div>
          <h2>4 IAs treinadas para<br/>advocacia. <span className="text-accent">Você escolhe.</span></h2>
          <p>Cada IA é construída sob medida para a área e o estágio do funil em que você precisa de mais alavancagem. Nenhum modelo genérico, nenhuma adaptação meia-boca.</p>
        </div>
        <div className="features-grid features-stage">
          {tipos.map((t, i) => (
            <div key={i} className="feature-card reveal">
              <div className="ghost-num" aria-hidden="true">{String(i + 1).padStart(2, '0')}</div>
              <div className="num">{t.num}</div>
              <div className="icon-wrap">{t.icon}</div>
              <h3>{t.title}</h3>
              <p>{t.desc}</p>
              <div className="tag">{t.tag}</div>
            </div>
          ))}
        </div>
        <div className="mini-features">
          {minis.map((m, i) => (
            <div key={i} className="mini-feature">
              <div className="icon-wrap">{m.icon}</div>
              <span>{m.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Features = Features;