const FAQ = () => {
  const qs = [
    {
      q: 'Who is Main Street Research for?',
      a: 'Brands, OEMs, distributors, and investors operating inside the computer parts category — GPUs, CPUs, storage, memory, PSU, cooling, chassis, and peripherals. If your SKU plugs into a PC, we cover it.',
    },
    {
      q: 'How is this different from a generalist research firm?',
      a: 'Generalist firms rent panels; we own ours, and every panelist is screened against actual purchase behavior in this category. Our analysts have lived in the channel, not rotated through it.',
    },
    {
      q: 'What does an engagement look like?',
      a: 'Most projects run four to eight weeks, from brief to decision-first readout. We also offer rolling subscriptions for pricing, demand, and teardown feeds.',
    },
    {
      q: 'Can you work under NDA and MNPI constraints?',
      a: 'Yes. We routinely engage with investor and corporate-development teams under tight information-barrier protocols.',
    },
    {
      q: 'Do you provide raw data, or only synthesis?',
      a: 'Both. Every engagement ships a named analyst readout, plus access to the underlying cleaned datasets when the work warrants it.',
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="faq-left">
            <div className="kicker">FAQ</div>
            <h2 className="h-display">Questions we hear <em>before</em> the brief.</h2>
            <p className="section-sub">Still thinking it through? A 20-minute scoping call is usually enough to know if we are the right fit.</p>
            <a href="#contact" className="btn btn-primary">
              Book a scoping call
              <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
          <div className="faq-right">
            {qs.map((item, 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>{item.q}</span>
                  <span className="faq-icon" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7 h8 M7 3 v8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                  </span>
                </button>
                <div className="faq-a"><p>{item.a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;