/**
 * IAvsChatbot — reformulado: comparativo "advogado que usa IA vs quem não usa",
 * em 4 cards com números de estudos de mercado de resposta a leads. Defende a
 * categoria pelo dado, não pela opinião — e ancora a urgência de adotar.
 */
const IAvsChatbot = () => {
  const cards = [
    {
      icon: <Icon.Bolt size={24}/>,
      stat: '21×',
      titulo: 'mais chance de converter o lead',
      desc: 'quando a resposta sai nos primeiros 5 minutos, em vez de horas depois.',
      sem: 'Responde em horas — e à noite ou no fim de semana ninguém atende.',
      com: 'Responde em segundos, 24/7. O lead nunca fica esperando.',
      fonte: 'Harvard Business Review',
      fonteUrl: 'https://hbr.org/2011/03/the-short-life-of-online-sales-leads',
    },
    {
      icon: <Icon.Clock size={24}/>,
      stat: '50%',
      titulo: 'fecham com quem responde primeiro',
      desc: 'dos clientes contratam a primeira empresa que dá retorno.',
      sem: 'O lead manda pra 3 escritórios. Você responde em 3º lugar.',
      com: 'Você é sempre o primeiro a responder.',
      fonte: 'Lead Response Management',
      fonteUrl: 'https://www.leadresponsemanagement.org/lrm_study',
    },
    {
      icon: <Icon.Spark size={24}/>,
      stat: '+391%',
      titulo: 'de conversão no 1º minuto',
      desc: 'é o salto quando o lead é respondido dentro do primeiro minuto.',
      sem: 'Minutos — às vezes horas — de espera. A conversão despenca.',
      com: 'Primeiro minuto, sempre. Sem exceção, sem feriado.',
      fonte: 'Velocify',
      fonteUrl: 'https://www.velocify.com/blog/web-leads-response-time',
    },
    {
      icon: <Icon.Send size={22}/>,
      stat: '80%',
      titulo: 'das vendas exigem 5+ follow-ups',
      desc: 'mas a maioria dos times desiste já no primeiro contato.',
      sem: 'Lead sem resposta vira lead esquecido. Ninguém faz o 5º follow-up.',
      com: 'A IA acompanha cada lead até virar contrato — ou um não claro. Sem desistir.',
      fonte: 'Marketing Donut',
      fonteUrl: 'https://www.marketingdonut.co.uk/sales/sales-techniques-and-negotiations/why-you-must-follow-up-leads',
    },
  ];

  return (
    <section className="section section-ia-vs-chatbot" id="advogado-com-ia" data-screen-label="05 Com IA vs Sem IA">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>COM IA VS SEM IA</div>
          <h2>O escritório que usa IA não disputa o lead.<br/><span className="text-accent">Ele já fechou.</span></h2>
          <p>Não é opinião — é o que os estudos de resposta a leads mostram há anos. A diferença entre atender na hora e responder "quando dá" está nos números.</p>
        </div>

        <div className="iac-cards">
          {cards.map((c, i) => (
            <div key={i} className="iac-card reveal">
              <div className="iac-card-top">
                <span className="iac-card-icon" aria-hidden="true">{c.icon}</span>
                <span className="iac-card-stat">{c.stat}</span>
              </div>
              <h3 className="iac-card-titulo">{c.titulo}</h3>
              <p className="iac-card-desc">{c.desc}</p>
              <div className="iac-card-compare">
                <div className="iac-compare-row iac-compare-sem">
                  <span className="iac-compare-icon iac-compare-icon-sem" aria-hidden="true"><Icon.X size={13}/></span>
                  <span><strong>Sem IA:</strong> {c.sem}</span>
                </div>
                <div className="iac-compare-row iac-compare-com">
                  <span className="iac-compare-icon iac-compare-icon-com" aria-hidden="true"><Icon.Check size={13}/></span>
                  <span><strong>Com IA:</strong> {c.com}</span>
                </div>
              </div>
              <span className="iac-card-fonte">
                Fonte:{' '}
                <a
                  className="iac-card-fonte-link"
                  href={c.fonteUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {c.fonte} ↗
                </a>
              </span>
            </div>
          ))}
        </div>

        <p className="iac-cards-disclaimer">Dados de estudos de mercado de resposta a leads. Resultados variam por escritório, nicho e volume.</p>
      </div>
    </section>
  );
};

window.IAvsChatbot = IAvsChatbot;