/**
 * VejaConversa — seção "show, don't tell". Layout assimétrico (split):
 * texto forte de um lado + mockup grande de WhatsApp do outro, mostrando o
 * vendedor IA atendendo um lead do começo ao fim (qualifica → lê documento →
 * transcreve áudio → encaminha pro advogado → agenda).
 *
 * É o diferencial que nenhum concorrente mostra bem. Usa o diálogo completo
 * de window.DIALOGOS.vejaConversa (trocável em dialogos.jsx).
 */
const VejaConversa = () => {
  const dialog = (window.DIALOGOS && window.DIALOGOS.vejaConversa) || [];

  const steps = [
    { icon: <Icon.Whatsapp size={18}/>, tone: 'wa',  title: 'Atende e qualifica', text: 'Responde na hora e faz as perguntas certas da sua área.' },
    { icon: <Icon.DocFill size={18}/>,   tone: 'doc', title: 'Lê os documentos', text: 'Analisa CAT, CNIS, contrato e TRCT direto no chat.' },
    { icon: <Icon.Mic size={18}/>,       tone: 'mic', title: 'Transcreve o áudio', text: 'Ouve o lead e extrai o que importa pro caso.' },
    { icon: <Icon.Calendar size={18}/>,  tone: 'cal', title: 'Encaminha e agenda', text: 'Leva o caso pré-analisado pro advogado e marca a consulta.' },
  ];

  return (
    <section className="section section-veja-conversa" id="veja-conversa" data-screen-label="04 Veja a conversa">
      <div className="container">
        <div className="vc-split">
          {/* Lado esquerdo — texto forte */}
          <div className="vc-copy">
            <div className="eyebrow"><span className="dot"></span>VEJA A CONVERSA</div>
            <h2>Não é promessa.<br/><span className="text-accent">É a conversa acontecendo.</span></h2>
            <p className="vc-lead">
              Esta é uma conversa real de captação — do "oi" ao agendamento. O vendedor IA qualifica, lê o documento que o lead manda, entende o áudio e entrega o caso pronto pro advogado. Tudo sem você tocar no celular.
            </p>
            <ul className="vc-steps">
              {steps.map((s, i) => (
                <li key={i} className="vc-step">
                  <span className={`vc-step-icon vc-icon-${s.tone}`} aria-hidden="true">{s.icon}</span>
                  <span className="vc-step-text">
                    <strong>{s.title}</strong>
                    <span>{s.text}</span>
                  </span>
                </li>
              ))}
            </ul>
            <button
              type="button"
              className="btn btn-primary vc-cta"
              onClick={() => window.dispatchEvent(new CustomEvent('open-demo-modal'))}
            >
              Quero essa IA no meu escritório <Icon.Arrow/>
            </button>
          </div>

          {/* Lado direito — GIF de demonstração com bordas recortadas (esconde
              o tracejado externo que faz parte do próprio GIF). */}
          <div className="vc-mockup">
            <div className="vc-gif-frame">
              <img
                className="vc-gif"
                src="assets/veja-conversa.gif"
                alt="IA atendendo um lead jurídico no WhatsApp"
                loading="lazy"
                decoding="async"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.VejaConversa = VejaConversa;