const FAQS = [
  { q: 'What\'s the smallest project you\'ll take?', a: 'We take on single-SKU projects starting at ~300 units for simple bags and ~500 units for technical packs. Below that, the tooling and sampling math stops making sense for the founder.' },
  { q: 'Do I own the patent and the tooling?', a: 'Yes. Everything (the patent, the CAD, the patterns, the molds, the factory relationships) is assigned to you in the contract. If we part ways you can walk the files across the street.' },
  { q: 'How are you different from a sourcing agent?', a: 'A sourcing agent takes 8 to 15% commission on your factory invoice, which you never see. We charge a flat engagement fee, show you the actual vendor invoice, and make nothing on the production run. Your incentive and ours are aligned from day one.' },
  { q: 'Can you work with factories I already have?', a: 'Yes, as long as they pass our audit. About 60% of existing-factory engagements survive the first visit; the rest we help you exit without a contract mess.' },
  { q: 'What about IP protection in Vietnam?', a: 'Vietnam is a Madrid Protocol signatory, which makes filing simpler than the reputation suggests. We file locally plus in your home market, and we never share CAD or patterns outside the factory floor.' },
  { q: 'How much does a typical engagement cost?', a: 'Design + patent + sampling runs $18 to $42k depending on complexity. Production cost is whatever the factory invoice says. We don\'t mark it up. A line-item quote comes back 48 hours after the discovery call.' }
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <Container>
        <div className="faq__grid">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 style={{ marginTop: 18 }}>The questions founders always ask in the first call.</h2>
            <p className="lead" style={{ marginTop: 18 }}>If yours isn't here, email Paul directly at <a href="mailto:paul@xlovation.com" style={{ color: 'var(--orange)', fontWeight: 500 }}>paul@xlovation.com</a>.</p>
          </div>
          <div className="faq__list">
            {FAQS.map((f, i) => (
              <div key={i} className="faq__item" data-open={open === i}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="faq__plus" aria-hidden="true">+</span>
                </button>
                <div className="faq__a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
};

window.FAQ = FAQ;