/* 6ix Mela — FAQ accordion (two-column so the list fills the full width) */
const FAQS = [
  { q: 'How old do I have to be?', a: '6ix Mela is 19+ — it\'s a licensed event. Bring valid government photo ID; you\'ll be carded at the gate and at every bar. No exceptions.' },
  { q: 'What day and time is it?', a: 'One day only — Saturday, September 12, 2026. Doors open at 6 PM and the show runs till 11 PM. Set times drop to the waitlist first.' },
  { q: 'Where does it go down?', a: 'The Bowl at Sobeys Stadium — 1 Shoreham Dr, on the York University campus in Toronto. It\'s an open-air bowl, steps from the subway.' },
  { q: 'Can I re-enter if I leave?', a: 'No ins-and-outs on this one. It\'s a single-day event, so once you\'re in, you\'re in for the night. Plan your run accordingly.' },
  { q: 'How do I get there?', a: 'Easiest is the subway — Pioneer Village and York University stations are a short walk away. Rideshare drop-off and paid parking are also on site.' },
  { q: 'Is there parking?', a: 'Paid lots are available around York University, but space is limited and transit is faster. Full parking and travel info drops with Phase 2.' },
  { q: 'What can I bring in?', a: 'Small bags, sealed water, sunscreen and good energy. No outside food or drink, no professional cameras, no umbrellas. The full bag policy lands closer to the date.' },
  { q: 'Is the venue accessible?', a: 'Yes. The Bowl has step-free access, accessible viewing platforms, dedicated entry lanes and accessible washrooms. Need something specific? Reach out and we\'ll sort it.' },
  { q: 'Is there food and drink on site?', a: 'Yes — food vendors and licensed bars are on site throughout the grounds all night. Come hungry.' },
  { q: 'Is the festival cashless?', a: 'Yes — we\'re tap-and-go. Cards and mobile pay are accepted everywhere on the grounds, and there are ATMs on site if you need cash.' },
  { q: 'What should I wear?', a: 'It\'s an open-air bowl in September, so dress for the weather and wear shoes you can move in. Layers are smart once the sun drops — and it\'s a vibe, so show up fresh.' },
  { q: 'Are lockers / coat check available?', a: 'Yes — on-site lockers and coat check are available so you\'re not carrying your night around. Locations are posted at the gates.' },
  { q: 'What\'s the refund / transfer policy?', a: 'All sales are final. Tickets may or may not be transferable — that depends on Ticketmaster\'s policy for this event, so check your Ticketmaster account for details. The festival happens rain or shine, and only buy through the official Ticketmaster link — beware resellers.' },
  { q: 'Will the lineup change?', a: 'It can — lineups are always subject to change. Phase 2 artists and the full set-time schedule are announced to the waitlist before anywhere else.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const mid = Math.ceil(FAQS.length / 2);
  const cols = [FAQS.slice(0, mid), FAQS.slice(mid)];
  const renderItem = (f, absIdx) => (
    <div key={absIdx} className={'faq-item' + (open === absIdx ? ' open' : '')}>
      <button className="faq-q" onClick={() => setOpen(open === absIdx ? -1 : absIdx)} aria-expanded={open === absIdx}>
        {f.q}
        <span className="q-ic"><Icon name="plus" size={22} /></span>
      </button>
      <div className="faq-a"><p>{f.a}</p></div>
    </div>
  );
  return (
    <section className="section faq" id="faq">
      <div className="maxw">
        <div className="faq-head">
          <div className="eyebrow">Before you ask</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.2rem,4.5vw,3.6rem)', textTransform: 'uppercase', lineHeight: .95, margin: '14px 0 0' }}>The Questions</h2>
          <div className="under-bar"></div>
          <p className="sec-sub">Still stuck? Hit us at <a href="mailto:info@6ixmela.com">info@6ixmela.com</a> and we'll sort you out.</p>
        </div>
        <div className="faq-cols">
          <div className="faq-list">{cols[0].map((f, i) => renderItem(f, i))}</div>
          <div className="faq-list">{cols[1].map((f, i) => renderItem(f, i + mid))}</div>
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;