// FAQ — pre-launch voice, American Mahjong only, no teacher/hosts stats
const FAQS = [
  { q: "What is Mahjong Matchmaker?", a: "An American Mahjong (NMJL card) app for iPhone. We help you find a fourth for your table, find a new table, or organize a standing game in your neighborhood. Launching on the App Store — join the beta to be first in line." },
  { q: "Is this only for American Mahjong?", a: "Yes. We're focused on the NMJL card and the people who play it. Doing one thing well beats doing four things passably. Other variants may follow down the road — but only if we can do them justice." },
  { q: "When does the app launch?", a: "Soon. We're in beta now, shipping to the Apple App Store as soon as the build is ready for prime time. Join the beta and you'll get a download link the day it goes live — plus your beta perks." },
  { q: "Is it really free?", a: "Yes. Core matching, profiles, and RSVPs are free forever. A Premium tier with extra host tools will come later, but every beta member gets at least 3 months of Premium free as a thank-you." },
  { q: "What are the beta rewards?", a: "The first 10 people to join in each state get a lifetime membership. The first 100 in each state get 6 months of Premium free. Every other beta member gets 3 months of Premium free. All perks are honored the day the app goes live in your region." },
  { q: "Will there be an Android version?", a: "Eventually, yes. iOS first so we can ship one thing done well. An Android build will follow once iOS is steady and the player base is there." },
  { q: "I run a club / teach / manage a venue — how do I get involved?", a: "Email us at info@mahjongmatchmaker.com with a short note about your group. We're talking with partners state by state and we reply to every email." },
];

const Faq = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq section-pad" id="faq">
      <div className="container">
        <div className="faq__grid">
          <div>
            <Eyebrow>Frequently asked</Eyebrow>
            <h2 className="sec-title">Questions we<br /><em style={{ fontStyle: "italic" }}>hear at the table.</em></h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Can't find yours? <a href="mailto:info@mahjongmatchmaker.com" style={{ color: "var(--mm-kelly-green)", fontWeight: 500, textDecoration: "none", borderBottom: "1px solid currentColor" }}>info@mahjongmatchmaker.com</a> — someone answers within a day.
            </p>
          </div>
          <div className="faq__list">
            {FAQS.map((f, i) => (
              <div key={i} className={`faq__item ${open === i ? "open" : ""}`}>
                <button
                  className="faq__q"
                  aria-expanded={open === i}
                  onClick={() => setOpen(open === i ? -1 : i)}
                >
                  <span>{f.q}</span>
                  <span className="faq__q-icon"><IconPlus size={12} /></span>
                </button>
                <div className="faq__a">
                  <div className="faq__a-body">{f.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Faq });