// ciclo. — FAQ

const FAQS = [
  ["a primeira entrega chega quando?", "no próximo domingo disponível. se você assina até a quinta, chega no domingo seguinte. depois disso, o próximo kit chega 3 meses adiante — sempre num domingo."],
  ["o kit dura mesmo 3 meses?", "sim. a gente calibra a quantidade pelo seu quiz e ajusta de trimestre em trimestre, com base no consumo real. se faltar, manda extra sem custo de frete."],
  ["e se eu viajar?", "você pula um trimestre direto pelo app. a cobrança pausa junto e o próximo domingo é remarcado."],
  ["consigo trocar itens?", "sim. tudo pelo app — você troca, adiciona ou remove até 7 dias antes do próximo domingo."],
  ["o frete é mesmo grátis?", "para todo o município de são paulo, sim. estamos abrindo abc, guarulhos e osasco em breve."],
  ["como cancelo?", "no app, em dois cliques. sem multa, sem fidelidade, sem ligação."],
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="faq section">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow"><span className="dot"/>dúvidas</span>
            <h2 className="section-h1">
              quase ninguém pergunta — <em>mas a resposta tá aqui.</em>
            </h2>
          </div>
          <div className="faq-list">
            {FAQS.map(([q, a], i) => {
              const on = open === i;
              return (
                <div key={i} className={`faq-item${on ? ' on' : ''}`}>
                  <button className="faq-q" onClick={() => setOpen(on ? -1 : i)} aria-expanded={on}>
                    <span>{q}</span>
                    <span className="faq-chev"><Icon name="plus" size={14}/></span>
                  </button>
                  {on && <div className="faq-a">{a}</div>}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;