/* FAQ com accordion + dados estruturados FAQPage (schema.org) para o Google. */

const FAQ_ITEMS = [
  { q: 'Quanto custa e como funciona a cobrança?',
    a: 'Os planos começam em R$ 49,99/mês, sem fidelidade — você pode cancelar quando quiser. A primeira análise do seu negócio é gratuita: mostramos uma prévia do site antes de qualquer pagamento.' },
  { q: 'Em quanto tempo meu site fica pronto?',
    a: 'O site vai ao ar em até 48 horas úteis após aprovação e envio do conteúdo necessário, conforme os Termos de Uso.' },
  { q: 'Preciso ter CNPJ ou domínio próprio?',
    a: 'Você não precisa ter domínio próprio: o plano inclui um subdomínio. Domínio próprio é opcional, com condições combinadas na contratação. Fale com a equipe sobre os dados necessários para contratar.' },
  { q: 'O site funciona no celular e tem WhatsApp?',
    a: 'Sim. Todo site é feito para celular primeiro, com botão de WhatsApp integrado que abre a conversa direto no número do seu negócio.' },
  { q: 'Vou aparecer no Google?',
    a: 'O site pode ser preparado para indexação e busca local. A indexação e a posição nos resultados dependem do Google; não garantimos presença nem posição nas buscas. O Perfil da Empresa também depende das regras e da verificação do Google.' },
  { q: 'Posso cancelar quando quiser?',
    a: 'Pode. Não há fidelidade nem multa. Se cancelar, avisamos com antecedência antes de o site sair do ar.' }
];

function Faq() {
  const [open, setOpen] = React.useState(0);

  // dados estruturados FAQPage para o Google
  React.useEffect(() => {
    const data = {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: FAQ_ITEMS.map(it => ({
        '@type': 'Question',
        name: it.q,
        acceptedAnswer: { '@type': 'Answer', text: it.a }
      }))
    };
    const s = document.createElement('script');
    s.type = 'application/ld+json';
    s.id = 'faq-schema';
    s.textContent = JSON.stringify(data);
    document.head.appendChild(s);
    return () => { const el = document.getElementById('faq-schema'); if (el) el.remove(); };
  }, []);

  return (
    <section id="faq" style={{ padding: '80px 0' }}>
      <div className="container" style={{ maxWidth: 780 }}>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 40 }}>
          <div className="eyebrow" style={{ color: 'var(--cyan)', marginBottom: 14 }}>Perguntas frequentes</div>
          <h2 className="display" style={{ fontSize: 'clamp(26px, 4vw, 40px)', margin: 0, fontWeight: 800 }}>
            Ainda com <span className="gradient-text">dúvidas?</span>
          </h2>
        </div>

        <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQ_ITEMS.map((it, i) => {
            const aberto = open === i;
            return (
              <div key={i} className="panel" style={{ overflow: 'hidden' }}>
                <button onClick={() => setOpen(aberto ? -1 : i)} aria-expanded={aberto} aria-controls={"faq-resposta-" + i} id={"faq-pergunta-" + i} style={{
                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
                  padding: '18px 20px', background: 'transparent', border: 0, cursor: 'pointer', textAlign: 'left', color: '#fff'
                }}>
                  <span style={{ fontSize: 15.5, fontWeight: 600 }}>{it.q}</span>
                  <span style={{ flexShrink: 0, width: 26, height: 26, borderRadius: 8, display: 'grid', placeItems: 'center', background: aberto ? 'rgba(0,229,255,0.14)' : 'rgba(255,255,255,0.05)', border: '1px solid ' + (aberto ? 'rgba(0,229,255,0.35)' : 'rgba(255,255,255,0.1)'), transition: 'all .2s' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ transform: aberto ? 'rotate(45deg)' : 'none', transition: 'transform .2s' }}>
                      <path d="M12 5v14M5 12h14" stroke={aberto ? 'var(--cyan)' : 'currentColor'} strokeWidth="2.2" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>
                <div id={"faq-resposta-" + i} role="region" aria-labelledby={"faq-pergunta-" + i} hidden={!aberto} style={{ overflow: 'hidden', transition: 'max-height .3s ease' }}>
                  <p style={{ margin: 0, padding: '0 20px 20px', fontSize: 14, color: 'var(--text-dim)', lineHeight: 1.6 }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;