// FAQ.jsx
const { useState: useStateFaq, useEffect: useEffectFaq, useRef: useRefFaq } = React;

function FAQ() {
  const items = [
    ['Quanto tempo dura uma sessão?', 'A sessão de cabine dura em média de 30 a 50 minutos, dependendo do fototipo da pele. A experiência total pode chegar a cerca de 1h20.'],
    ['Posso fazer se estiver grávida?', 'Gestantes precisam informar antes do agendamento. Nesses casos, a orientação pode ser buscar alternativas mais adequadas, conforme disponibilidade.'],
    ['Preciso usar biquíni de fita?', 'Não necessariamente. O biquíni de fita é opcional. A cliente pode usar o próprio biquíni, se preferir.'],
    ['Bronzeamento é seguro?', 'O atendimento da Bronze Terê é feito com responsabilidade, avaliação e personalização conforme cada tipo de pele. Pessoas com restrições médicas ou problemas de pele que contraindiquem exposição devem informar antes do agendamento.'],
    ['Onde fica a Bronze Terê?', 'Em Teresópolis/RJ, na R. Heitor de Moura Estevão, 115 — Loja 2 — Vila Muqui, dentro do estacionamento Pais e Filhos.'],
  ];

  const [open, setOpen] = useStateFaq(-1);

  const toggle = (i) => setOpen(prev => prev === i ? -1 : i);

  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow center reveal">Dúvidas frequentes</span>
          <h2 className="reveal" data-d="1">Tudo que você precisa saber antes de agendar.</h2>
        </div>
        <div className="faq-wrap">
          {items.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div className={`faq-item${isOpen ? ' open' : ''}`} key={i}>
                <button
                  className="faq-q"
                  aria-expanded={isOpen}
                  onClick={() => toggle(i)}
                >
                  <span>{q}</span>
                  <span className="faq-icon">{Ic.plus()}</span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? '400px' : '0px' }}>
                  <div className="faq-a-inner">{a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { FAQ });