// ═══════════════════════════════════════════════════════════════════
// src/sections/FAQ.jsx
// Accordion FAQ. Only one item open at a time.
// Data sourced from FAQS constant in data.jsx.
// ═══════════════════════════════════════════════════════════════════

const { useState: useFAQState } = React;

function FAQ() {
  const [openIdx, setOpenIdx] = useFAQState(0);

  const toggle = (i) => setOpenIdx(openIdx === i ? -1 : i);

  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="faq-wrap">

          {/* ── Sidebar copy ── */}
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: "16px" }}>Perguntas frequentes</div>
            <h2 className="display" style={{ fontSize: "clamp(36px,4.4vw,52px)" }}>
              Tudo o que você<br/>quer <em>saber antes</em><br/>de agendar.
            </h2>
            <p style={{ marginTop: "24px", color: "var(--ink-500)", maxWidth: "36ch", lineHeight: 1.6 }}>
              Não encontrou sua dúvida? Fale com a nossa equipe pelo WhatsApp — respondemos pessoalmente.
            </p>
            <a href={CONTACT.waLink} className="btn btn-ghost" style={{ marginTop: "28px" }}
               target="_blank" rel="noopener noreferrer">
              <Icon.whatsapp className="wa-icon" style={{ color: "var(--green-700)" }}/>
              Falar com a clínica
            </a>
          </div>

          {/* ── Accordion ── */}
          <div className="faq-list reveal d1">
            {FAQS.map((f, i) => (
              <div key={i} className={"faq-item" + (openIdx === i ? " open" : "")}>
                <button
                  className="faq-q"
                  onClick={() => toggle(i)}
                  aria-expanded={openIdx === i}
                  aria-controls={`faq-answer-${i}`}
                >
                  <span>{f.q}</span>
                  <span className="faq-toggle" aria-hidden="true"><Icon.plus/></span>
                </button>
                <div className="faq-a" id={`faq-answer-${i}`} role="region">
                  <div className="faq-a-inner">{f.a}</div>
                </div>
              </div>
            ))}
          </div>

        </div>
      </div>
    </section>
  );
}