// FAQ.jsx
const { useState: useStateF } = React;

// Inline SVG for the +/- toggle — lucide's createIcons() replaces <i> with
// <svg> out-of-band, which prevents React from swapping plus↔minus on toggle.
const IconPlus = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
);
const IconMinus = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg>
);

function FAQ() {
  const items = [
    { q: "Is it really free?", a: "Yes. 100%. No tuition, no materials fee, no hidden costs. AeroLabs is student-led and runs on donations and partner support." },
    { q: "Do I need any experience?", a: "None at all. We teach from the ground up — the only prerequisite is curiosity and showing up Saturdays." },
    { q: "How old do you need to be?", a: "10 and up. The program is designed to scale with you, from middle school through high school." },
    { q: "Where does it meet?", a: "In Austin, Texas, Saturdays from 10 AM to 12 PM. Exact address shared with accepted students." },
    { q: "How long is the program?", a: "Eight weeks per cohort. You can re-enroll in future cohorts to go deeper — many students do." },
    { q: "Can parents sit in?", a: "For guest-speaker sessions, yes. Hands-on sections are student-only so everyone gets the tools and the time." },
  ];
  const [open, setOpen] = useStateF(-1);
  return (
    <section id="faq" className="al-section">
      <div className="al-container al-faq-wrap">
        <div className="al-eyebrow">FAQ</div>
        <h2 className="al-h2">Quick answers.</h2>
        <div className="al-faq-list">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`al-faq-item ${isOpen ? 'open' : ''}`}>
                <button
                  type="button"
                  className="al-faq-q"
                  aria-expanded={isOpen}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span>{it.q}</span>
                  <span className="al-faq-toggle" aria-hidden="true">
                    {isOpen ? <IconMinus/> : <IconPlus/>}
                  </span>
                </button>
                <div className="al-faq-a">{it.a}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;