/* ═══════════════════════════════════════════════════════════
   FAQ — accordion acessível (3 perguntas)
   Respostas idênticas às do Schema.org do index.html,
   para não divergir do que o Google indexa.
   ═══════════════════════════════════════════════════════════ */

const faqStyles = {};

const FAQ_ITEMS = [
  {
    q: 'Como funciona a migração dos dados do meu sistema atual?',
    a: 'Avaliamos a origem, o volume e a estrutura dos dados antes de confirmar o escopo, o prazo e as condições da migração. Nossa equipe orienta cada etapa do processo.',
  },
  {
    q: 'Meus dados ficam seguros? Onde ficam armazenados?',
    a: 'O Klyvo disponibiliza controles de acesso e recursos para apoiar a gestão dos seus dados. A localização da infraestrutura, a retenção, a exportação e os procedimentos de exclusão aplicáveis devem ser confirmados na documentação contratual vigente.',
  },
  {
    q: 'Qual é o suporte disponível? E se eu tiver um problema às 8h da manhã antes de atender?',
    a: 'Os canais e horários de suporte aplicáveis ao seu plano são informados no momento da contratação. Nossa equipe conhece a rotina de clínicas odontológicas.',
  },
];

function FAQ() {
  const [openIdx, setOpenIdx] = React.useState(null);

  return (
    <section className="section section-alt" id="faq">
      <div className="container">
        <div className="section-header">
          <div className="tag">Dúvidas frequentes</div>
          <h2>Perguntas que todo dentista faz antes de começar</h2>
        </div>

        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) => {
            const open = openIdx === i;
            const panelId = `faq-panel-${i}`;
            const btnId = `faq-btn-${i}`;

            return (
              <div className={`faq-item${open ? ' open' : ''}`} key={item.q}>
                <h3>
                  <button
                    className="faq-q"
                    id={btnId}
                    aria-expanded={open}
                    aria-controls={panelId}
                    onClick={() => setOpenIdx(open ? null : i)}
                  >
                    {item.q}
                    <span className="faq-icon" aria-hidden="true">
                      +
                    </span>
                  </button>
                </h3>
                <div className="faq-a" id={panelId} role="region" aria-labelledby={btnId}>
                  <div className="faq-a-inner">
                    <p>{item.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ, FAQ_ITEMS });