const FAQ = () => {
  const items = [
    { q: 'When is Arogya Bite launching?',
      a: 'The public website is live. The mobile beta opens in stages through 2026 — join the early access list to be invited first.' },
    { q: 'Is it really designed for India?',
      a: 'Yes. The nutrition database, recipes, portion sizes, language and pricing are all built for Indian users first. Not retrofitted from a US app.' },
    { q: 'Which devices does it work with?',
      a: 'iOS and Android phones at launch. Wearable sync supports Apple Health, Google Fit and major smartwatches & rings.' },
    { q: 'How does the AI actually help me?',
      a: 'It looks at patterns across meals, sleep, movement and biomarkers, then suggests one small change at a time — the change most likely to stick.' },
    { q: 'What happens to my health data?',
      a: 'Your data is encrypted, owned by you, exportable any time, and never sold. We earn revenue from subscriptions, not your data.' },
    { q: 'Is there a free tier?',
      a: 'The core habit tracking and basic nutrition logging will remain free. Advanced AI coaching, diagnostics and longitudinal analytics will be part of a premium plan.' },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0 }}>
          <div className="section-head reveal">
            <span className="eyebrow">FAQ</span>
            <h2 className="display">Questions, answered.</h2>
          </div>

          <div className="faq-list reveal">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{it.q}</span>
                  <span className="plus"><Icon name="plus" size={14} stroke={2.2}/></span>
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });