/**
 * AntesDepois — comparativo ConversApp vs outras IAs / fazer você mesmo.
 * Cada linha é uma dor real de quem tentou "usar IA" sozinho — e o que a
 * ConversApp resolve. Mostra os 6 primeiros; o resto abre num "ver mais".
 * chaves: cenario = critério · icon · sem = outras IAs · com = ConversApp.
 */
const AntesDepois = () => {
  const [expandido, setExpandido] = React.useState(false);

  const rows = [
    {
      cenario: 'Implementação',
      icon: '🛠️',
      sem: 'Você cria conta, conecta a API e monta o fluxo sozinho. Se travar, o problema é seu.',
      com: 'Nossa equipe implementa a inteligência artificial e faz os ajustes pra você. Você não toca em nenhuma configuração.',
    },
    {
      cenario: 'Estabilidade',
      icon: '🛡️',
      sem: 'Conexão cai, a IA trava, mensagem não entrega — e você só descobre pelo cliente reclamando.',
      com: 'Rodamos sobre a infraestrutura da AWS — a mesma rede de bancos e grandes plataformas. Estabilidade de verdade, sem queda.',
    },
    {
      cenario: 'Canais (omnichannel)',
      icon: '💬',
      sem: 'Em geral só um WhatsApp não oficial, com risco de bloqueio. Instagram e Messenger ficam de fora.',
      com: 'Parceiros oficiais Meta: WhatsApp via API Oficial, COEX e não oficial, além de Instagram e Messenger — tudo num só lugar.',
    },
    {
      cenario: 'Rastreio de campanha',
      icon: '🎯',
      sem: 'Você não sabe de qual anúncio veio o lead. Otimiza campanha no escuro, queimando verba.',
      com: 'Integração oficial com a Meta: cada lead é rastreado automaticamente até a campanha de origem. Você sabe o que dá retorno.',
    },
    {
      cenario: 'Especialização',
      icon: '✨',
      sem: 'IA genérica, treinada pra "qualquer negócio". Não fala a língua da advocacia.',
      com: 'Treinada na sua área do direito, no tom do seu escritório e nas suas teses.',
    },
    {
      cenario: 'Suporte',
      icon: '🤝',
      sem: 'Ticket genérico e fila. Você espera horas — às vezes dias — por uma resposta automática.',
      com: 'Grupo exclusivo com gerente de contas e desenvolvedor dedicados ao seu escritório. Sem fila de suporte.',
    },
    {
      cenario: 'CRM',
      icon: '📇',
      sem: 'Não tem. O lead se perde em conversa solta ou numa planilha que ninguém atualiza.',
      com: 'CRM integrado: cada lead rastreado do primeiro "oi" até o contrato assinado.',
    },
    {
      cenario: 'Prompt e treino',
      icon: '🎓',
      sem: 'Você escreve o prompt, testa, erra e ajusta no escuro até a IA parar de alucinar.',
      com: 'Treinado pelo nosso time no seu nicho, com o seu conhecimento, e validado antes de ir pro ar.',
    },
    {
      cenario: 'Áudio do cliente',
      icon: '🎙️',
      sem: 'A IA ignora áudio. O cliente manda um áudio de 2 minutos e a conversa morre ali.',
      com: 'Transcreve e entende áudio com IA — e responde em texto ou áudio, como o cliente preferir.',
    },
    {
      cenario: 'Documentos',
      icon: '📄',
      sem: 'Não lê anexo. CAT, CNIS, RG e contrato viram trabalho manual pra alguém do time.',
      com: 'Lê o documento que chega no WhatsApp, extrai os dados e cruza com o critério da sua área.',
    },
    {
      cenario: 'Configuração',
      icon: '⚙️',
      sem: 'Sistemas difíceis, documentação em inglês, integrações que quebram a cada atualização.',
      com: 'Zero configuração da sua parte. Um painel simples só pra você acompanhar os resultados.',
    },
  ];

  const VISIVEIS = 6;
  const visibleRows = expandido ? rows : rows.slice(0, VISIVEIS);
  const restantes = rows.length - VISIVEIS;

  return (
    <section className="section section-antes-depois" id="comparativo" data-screen-label="04 Antes/Depois">
      <div className="container">
        <div className="section-heading section-heading-antesdepois">
          <div className="eyebrow"><span className="dot"></span>CONVERSAPP VS OUTRAS IAS</div>
          <h2>Outras IAs te dão trabalho.<br/><span className="text-accent">O ConversApp te dá resultado.</span></h2>
          <p>Num oceano de IAs, você não precisa de mais uma plataforma que vai tomar seu tempo aprendendo a programar. O ConversApp te entrega tudo pronto — pra você focar só na gestão.</p>
        </div>

        <div className="ad-table" role="table" aria-label="Comparativo ConversApp vs outras IAs">
          <div className="ad-row ad-row-head" role="row">
            <div className="ad-cell ad-cell-scenario" role="columnheader">Critério</div>
            <div className="ad-cell ad-cell-sem" role="columnheader">
              <span className="ad-tag ad-tag-sem">Outras IAs / faça você mesmo</span>
            </div>
            <div className="ad-cell ad-cell-com" role="columnheader">
              <span className="ad-tag ad-tag-com">ConversApp</span>
            </div>
          </div>
          {visibleRows.map((r, i) => (
            <div key={i} className="ad-row" role="row">
              <div className="ad-cell ad-cell-scenario" role="cell">
                <span className="ad-cell-crit-icon" aria-hidden="true">{r.icon}</span>
                <span className="ad-cell-cenario-text">{r.cenario}</span>
              </div>
              <div className="ad-cell ad-cell-sem" role="cell">
                <span className="ad-cell-icon ad-cell-icon-sem" aria-hidden="true"><Icon.X size={16}/></span>
                <span>{r.sem}</span>
              </div>
              <div className="ad-cell ad-cell-com" role="cell">
                <span className="ad-cell-icon ad-cell-icon-com" aria-hidden="true"><Icon.Check size={16}/></span>
                <span>{r.com}</span>
              </div>
            </div>
          ))}
        </div>

        {restantes > 0 && (
          <div className="ad-expand-wrap">
            <button
              type="button"
              className="ad-expand-btn"
              onClick={() => setExpandido(v => !v)}
              aria-expanded={expandido}
            >
              {expandido ? 'Ver menos' : `Ver todo o comparativo (+${restantes})`}
              <span className={`ad-expand-chevron ${expandido ? 'up' : ''}`} aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </button>
          </div>
        )}
      </div>
    </section>
  );
};

window.AntesDepois = AntesDepois;