// FAQ.jsx
const { useRef: useFAQRef, useState: useFAQState } = React;

const FAQS = [
  {
    q: 'Já tentei muita coisa e nunca consegui manter. Por que dessa vez seria diferente?',
    a: 'Porque dessa vez você não vai tratar só o sintoma. O método trabalha a raiz: identidade, rotina e mentalidade — não apenas treino e dieta. A diferença está no que é construído por dentro.',
  },
  {
    q: 'Preciso ter uma rotina muito disciplinada para entrar na mentoria?',
    a: 'Não. A mentoria é justamente para quem ainda não tem essa rotina. Construímos isso juntas, do zero — sem julgamento, sem pressão, com estratégia real.',
  },
  {
    q: 'Moro fora dos EUA. Consigo participar?',
    a: 'Sim. Os treinos online e a mentoria funcionam de qualquer lugar do mundo. A Taty atende alunas no Brasil, nos EUA e em outros países.',
  },
  {
    q: 'Qual a diferença entre o Personal, o Online e a Mentoria Premium?',
    a: 'Personal = acompanhamento presencial exclusivo. Online = estrutura completa de qualquer lugar. Mentoria Premium = transformação completa com equipe integrada (personal, nutricionista, médico) e trabalho de identidade.',
  },
  {
    q: 'Tem suporte emocional dentro do método?',
    a: 'Sim. É parte central — não um extra. Trabalhamos o emocional junto com o físico porque sabemos que sem isso, nenhum resultado se sustenta.',
  },
  {
    q: 'Como começo?',
    a: 'Clicando em "Quero me destravar agora" e entrando em contato via WhatsApp. De lá, a Taty ou a equipe vai entender seu momento e indicar a melhor entrada no método.',
  },
];

function FAQ() {
  const ref = useFAQRef();
  const [open, setOpen] = useFAQState(null);
  useReveal(ref);

  return (
    <section className="faq-section" ref={ref} id="faq">
      <div className="container">
        <div className="faq-header">
          <p className="eyebrow reveal">Dúvidas frequentes</p>
          <h2 className="section-title reveal rev-d1">Respostas honestas</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((item, i) => (
            <div key={i} className={`faq-item reveal rev-d${Math.min(i + 1, 4)}`}>
              <button
                className="faq-q"
                onClick={() => setOpen(open === i ? null : i)}
                aria-expanded={open === i}
              >
                {item.q}
                <svg
                  className={`faq-chevron${open === i ? ' open' : ''}`}
                  viewBox="0 0 20 20" fill="none"
                >
                  <path d="M5 7.5l5 5 5-5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <div className={`faq-a${open === i ? ' open' : ''}`}>
                {item.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });