const FAQ = () => {
  const [openIdx, setOpenIdx] = React.useState(-1); // todas fechadas no início

  // CTA do rodapé do FAQ — alinhado com o Hero/CTAFinal via variável global.
  // 5ª onda: família vende a IA, reunião é canal.
  const variant = (typeof HERO_ACTIVE_VARIANT !== 'undefined') ? HERO_ACTIVE_VARIANT : 'A';
  const ctaTexts = {
    A: 'Quero conhecer esta IA',
    B: 'Quero parar de perder esses leads',
    C: 'Ver o sistema pro meu nicho',
  };
  const ctaText = ctaTexts[variant] || ctaTexts.A;

  const faqs = [
    {
      q: 'Como funciona a reunião de demo? O que rola nos 30 min?',
      a: 'Reunião por Google Meet, 30 min cronometrados. A gente abre com um mapeamento do seu funil de WhatsApp (quantos leads/mês, fontes, taxa de conversão atual), liga a IA configurada pro seu nicho e simula um lead real do seu fluxo como teste. Você vê tom, qualificação e agendamento ao vivo. Fechamos com um plano numérico de quantos contratos a IA fecharia no seu volume. Você sai com o material em mãos, contrate ou não.',
    },
    {
      q: 'Quanto custa? Por que o preço não está na página?',
      a: 'Porque depende muito do seu cenário — qual IA (Qualificação, Agendamento, Fechamento ou Pós-venda), seu volume de mensagens e quais integrações entram. Falar um preço aqui sem entender seu funil seria mentir ou inflar. Na demo a gente mostra o número exato pra você, comparando com o custo equivalente de equipe (um vendedor ou SDR CLT, por exemplo, sai por cerca de R$ 3,5 mil/mês com encargos, atende 8h e tira férias — daí a gente parte). Você decide depois, sem pressão.',
    },
    {
      q: 'Marcar a demo me obriga a algo?',
      a: 'Não. A demo é gratuita e zero compromisso. Você sai do call com o diagnóstico do seu funil em mãos, com ou sem contrato. Se decidir fechar depois, o contrato é mensal — sem fidelidade, sem multa de cancelamento. A gente confia que o resultado vai te segurar, não a cláusula.',
    },
    {
      q: 'Quanto tempo leva para colocar a IA pra rodar, depois que eu fechar?',
      a: 'Depende do seu cenário — volume de material, integrações ativas e quão pronta sua operação está. Na demo a gente mostra um cronograma claro pra sua realidade. Você responde um briefing detalhado sobre sua área, fluxo e critérios de qualificação. Nossa equipe configura a IA com o material do seu escritório, integra ao WhatsApp Business e ao seu CRM, e libera para uso. Você não precisa entender nada de IA — somos nós que configuramos.',
    },
    {
      q: 'A IA atende com o número do meu escritório ou um número novo?',
      a: 'Com o seu número oficial. Usamos a API do WhatsApp Business da Meta, então o cliente continua falando no mesmo contato que ele já conhece. Sem migração, sem confusão.',
    },
    {
      q: 'O lead percebe que está falando com uma IA?',
      a: 'A IA conversa de forma natural, recebe áudios, lê documentos (CAT, RG, contrato, prints) e responde em texto ou áudio. A maioria dos leads não percebe — e quando percebem, valorizam a velocidade do atendimento. Você decide se quer transparência ou não. Na demo a gente mostra os dois modos.',
    },
    {
      q: 'Funciona para qual tipo de área jurídica?',
      a: 'Trabalhista, previdenciário, consumidor, família, tributário, imobiliário e cível em geral. Treinamos a IA com o seu fluxo de qualificação específico — então ela faz as perguntas certas pra cada caso. Se sua área não está nessa lista, vale agendar mesmo assim: muito provavelmente cobrimos.',
    },
    {
      q: 'E se a IA não souber responder algo? Passa pra um humano?',
      a: 'Sim. Configuramos gatilhos de transferência para o seu time sempre que: (1) o lead pede para falar com humano, (2) a conversa sai do escopo treinado, ou (3) o caso é qualificado e está pronto pra fechar. O humano entra com todo o histórico já transcrito.',
    },
    {
      q: 'É legal pela OAB? E LGPD?',
      a: 'Sim. A IA atua como ferramenta de atendimento e captação dentro dos limites do Provimento da OAB sobre publicidade e captação. Em relação à LGPD: operamos com criptografia em trânsito e em repouso, logs de auditoria, segregação por escritório e aceite registrado pelo lead na primeira interação. Nenhum dado é usado para treinar modelos públicos.',
    },
  ];

  return (
    <section className="section section-light" id="faq" data-screen-label="11 FAQ">
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>FAQ</div>
          <h2>Perguntas que todo<br/>escritório faz.</h2>
          <p>Se a sua não estiver aqui, agenda os 30 min — a gente responde tudo ao vivo, com tempo cronometrado.</p>
        </div>

        <div className="faq-list">
          {faqs.map((item, i) => {
            const isOpen = openIdx === i;
            return (
              <div key={i} className={`faq-item ${isOpen ? 'open' : ''}`}>
                <button
                  className="faq-question"
                  onClick={() => setOpenIdx(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                >
                  <span className="faq-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="faq-q-text">{item.q}</span>
                  <span className="faq-toggle" aria-hidden="true">
                    <svg width="20" height="20" 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 className="faq-answer-wrap">
                  <div className="faq-answer">
                    <p>{item.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="faq-cta reveal">
          <div className="faq-cta-icon">
            <Icon.Brand size={42}/>
          </div>
          <h3>Agende sua demonstração agora.</h3>
          <p>Em 30 minutos a gente mostra a IA rodando no seu nicho e responde tudo ao vivo.</p>
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => window.dispatchEvent(new CustomEvent('open-demo-modal'))}
          >
            {ctaText}
          </button>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;