const UseCases = () => {
  const cases = [
    { area: 'Trabalhista', title: 'Captação em massa', desc: 'IA filtra acidentes de trabalho, horas extras e rescisões indevidas — qualifica vínculo e período.', tags: ['Alto volume', 'Mídia paga'] },
    { area: 'Previdenciário', title: 'Aposentadoria & BPC', desc: 'Coleta CNIS, identifica revisões e benefícios negados. Já chega no advogado com diagnóstico.', tags: ['Documentos', 'Análise'] },
    { area: 'Consumidor', title: 'Bancário & Aéreo', desc: 'Lê comprovantes e protocolos, identifica caso e estima ticket antes de você abrir a conversa.', tags: ['Volume', 'Padronizável'] },
    { area: 'Família', title: 'Divórcio & Pensão', desc: 'Atendimento empático e sigiloso. Coleta dados sensíveis sem o cliente desistir do contato.', tags: ['Sensibilidade', 'Tom humano'] },
    { area: 'Tributário', title: 'Recuperação de créditos', desc: 'Qualifica empresas pelo CNAE, faturamento e regime — descarta MEI e leads sem fit.', tags: ['B2B', 'Ticket alto'] },
    { area: 'Imobiliário', title: 'Distratos & Atraso', desc: 'Identifica empreendimento, contrato e tempo de atraso. Prioriza casos com ação coletiva.', tags: ['Coletivo', 'Triagem'] },
  ];
  return (
    <section className="section section-light" id="areas" data-screen-label="06 Áreas">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>POR ÁREA</div>
          <h2>Treinada na sua área.<br/><span className="text-accent">Não em qualquer área.</span></h2>
          <p>A IA do ConversApp não é um chatbot genérico. Cada operação é configurada com base no seu nicho, no seu funil e nos seus critérios de qualificação.</p>
        </div>
        <div className="usecase-grid">
          {cases.map((c, i) => (
            <div key={i} className="usecase">
              <div className="area">{c.area}</div>
              <h4>{c.title}</h4>
              <p>{c.desc}</p>
              <div className="tag-row">
                {c.tags.map((t, j) => <span key={j} className="tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.UseCases = UseCases;