/**
 * FunnelDifferentials — v3: grid equilibrado de 4 cards (uma IA por card),
 * substitui o funil SVG verde gigante que desbalanceava a seção. Cada card
 * tem número de etapa, pílula de estágio, descrição com mais peso e bullets.
 * Hover eleva o card (sem peso de SVG animado).
 */
const FunnelDifferentials = () => {
  const stages = [
    {
      stageLabel: 'TOPO DO FUNIL',
      tipoNum: 'Tipo 01',
      icon: <Icon.Whatsapp size={22}/>,
      tipoTitle: 'Qualificação',
      tipoDesc: 'Recebe o lead no WhatsApp em menos de 5 segundos, faz as perguntas certas da sua área e separa quem é caso de quem não é — antes de tomar o tempo do advogado.',
      tipoBullets: ['Atende 24/7 no WhatsApp', 'Triagem pelos seus critérios', 'Lê documentos enviados'],
    },
    {
      stageLabel: 'MEIO DO FUNIL',
      tipoNum: 'Tipo 02',
      icon: <Icon.Calendar size={22}/>,
      tipoTitle: 'Agendamento',
      tipoDesc: 'Com o lead qualificado, marca a reunião direto na agenda do advogado. Confirma, lembra e reagenda no-show sozinha — a consulta acontece sem ninguém correr atrás.',
      tipoBullets: ['Agenda na hora certa', 'Confirma e relembra', 'Reagenda no-shows'],
    },
    {
      stageLabel: 'FUNDO DO FUNIL',
      tipoNum: 'Tipo 03',
      icon: <Icon.Money size={22}/>,
      tipoTitle: 'Fechamento',
      tipoDesc: 'Explica o serviço, supera objeções e conduz a proposta pelo WhatsApp — quando a sua área permite fechar à distância. Quando não, entrega o lead aquecido pro advogado.',
      tipoBullets: ['Supera objeções', 'Conduz a proposta', 'Entrega lead aquecido'],
    },
    {
      stageLabel: 'PÓS-VENDA',
      tipoNum: 'Tipo 04',
      icon: <Icon.Users size={22}/>,
      tipoTitle: 'Pós-venda',
      tipoDesc: 'Atende quem já é cliente: responde sobre andamento de processo, prazos e audiências sem ocupar sua equipe. Reduz churn e libera o time pro que é jurídico de verdade.',
      tipoBullets: ['Status de processos', 'Prazos e audiências', 'Reduz CAC e churn'],
    },
  ];

  const areasProdutos = [
    {
      area: 'Previdenciário', cor: 'prev',
      teses: ['Salário Maternidade', 'Auxílio Acidente', 'Auxílio Doença', 'BPC / LOAS', 'Aposentadoria por idade', 'Aposentadoria por tempo', 'Aposentadoria especial', 'Aposentadoria rural', 'Revisão de benefício', 'Pensão por morte', 'Auxílio-reclusão'],
    },
    {
      area: 'Trabalhista', cor: 'trab',
      teses: ['Verbas rescisórias', 'Horas extras', 'Acidente de trabalho', 'Reconhecimento de vínculo', 'Assédio moral', 'Insalubridade e periculosidade', 'Equiparação salarial', 'Rescisão indireta'],
    },
    {
      area: 'Consumidor', cor: 'cons',
      teses: ['Negativação indevida', 'Cobrança abusiva', 'Produto ou serviço com defeito', 'Voo cancelado ou atrasado', 'Negativa de plano de saúde', 'Superendividamento'],
    },
    {
      area: 'Bancário', cor: 'banc',
      teses: ['Juros abusivos', 'Tarifas e taxas indevidas', 'Revisão de contrato bancário', 'Empréstimo consignado fraudulento', 'Renegociação de dívida', 'Busca e apreensão indevida'],
    },
    {
      area: 'Família e Sucessões', cor: 'fam',
      teses: ['Divórcio', 'Pensão alimentícia', 'Guarda', 'Inventário e partilha', 'União estável', 'Investigação de paternidade'],
    },
  ];

  return (
    <section className="section funnel-section" id="ia" data-screen-label="05 As 4 IAs">
      <div className="container">
        <div className="section-heading section-heading-funnel">
          <div className="eyebrow"><span className="dot"></span>O QUE A IA FAZ</div>
          <h2>4 tipos de IA treinadas para advocacia.<br/><span className="text-accent">Você escolhe o produto e o tipo.</span></h2>
          <p>Cada IA cobre um estágio do funil e é construída sob medida pra sua área. Comece pela que te dá mais alavancagem hoje — e ative as outras conforme escala. Nenhum modelo genérico.</p>
        </div>

        <div className="funnel-cards">
          {stages.map((s, i) => (
            <div key={i} className="funnel-card reveal">
              <div className="funnel-card-head">
                <span className="funnel-card-icon" aria-hidden="true">{s.icon}</span>
                <span className="funnel-card-num">{s.tipoNum}</span>
              </div>
              <span className="funnel-card-stage">{s.stageLabel}</span>
              <h3 className="funnel-card-title">{s.tipoTitle}</h3>
              <p className="funnel-card-desc">{s.tipoDesc}</p>
              <ul className="funnel-card-bullets">
                {s.tipoBullets.map((b, j) => (
                  <li key={j}>
                    <span className="bullet-icon" aria-hidden="true"><Icon.Check size={11}/></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="funnel-produtos reveal">
          <span className="funnel-produtos-label">Alguns produtos que a IA atende e qualifica...</span>
          <div className="funnel-areas">
            {areasProdutos.map((a, i) => (
              <div key={i} className={`funnel-area area-${a.cor}`}>
                <span className="funnel-area-head"><span className="funnel-area-dot" aria-hidden="true"></span>{a.area}</span>
                <ul className="funnel-area-chips">
                  {a.teses.map((t, j) => (
                    <li key={j} className="funnel-produto-chip">{t}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <p className="funnel-produtos-foot">
            <strong className="funnel-produtos-foot-strong">E muito mais...</strong> Seja qual for a sua área, a gente treina uma IA sob medida pra cada tese — do jeito que o seu escritório atende. Você diz a necessidade; a gente entrega a IA certa.
          </p>
        </div>
      </div>
    </section>
  );
};

window.FunnelDifferentials = FunnelDifferentials;