function FAQ() {
  const faqs = [
    { q: "I've never baked bread. Is this too hard?", a: "Nope. If you can stir water into flour, you can do this. Our instructions assume zero experience and, if you need any additional help, reach out and let's see what we can do." },
    { q: "What flour should I feed it?", a: "All-purpose or bread flour works great to start. We include simple ratios and a schedule so you don't overthink it." },
    { q: "What if I kill my free starter?", a: "Our starters lived through wars, migrations, famines, and everything else that happened for the past few centuries. It can survive your kitchen. If something goes wrong, let us know and we'll send another packet free." },
    { q: "How much time will my first loaf take?", a: "About 15 minutes of actual work spread across 3 days. Most of the time is waiting." },
    { q: "What's the catch?", a: "There isn't one. We hope you love it so much you try our other heritage starters someday. That's it." },
    { q: "Return Policy", a: "Because our products are perishable food-based cultures, we cannot accept physical returns. However, if your starter arrives damaged, arrives incomplete, is the wrong item, or fails to activate — email support@motherscountrystore.com within 7 days of delivery. We will make it right with a free replacement or full refund, whichever you prefer." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq">
      <style>{`
        .faq { background: var(--color-primary); color: var(--color-bg-cream); padding: 80px var(--gutter); }
        .faq h2 { color: var(--color-bg-cream); text-align: center; margin-bottom: 36px; }
        .faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(243,239,229,0.18); }
        .faq-item { border-bottom: 1px solid rgba(243,239,229,0.18); }
        .faq-q { width: 100%; background: transparent; border: 0; color: var(--color-bg-cream); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.3; }
        .faq-q:hover { opacity: 0.85; }
        .faq-icon { width: 28px; height: 28px; border: 1px solid rgba(243,239,229,0.5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .faq-a { padding: 0 52px 22px 0; font-size: 15px; line-height: 1.65; color: rgba(243,239,229,0.85); }
      `}</style>
      <h2>Frequently Asked Questions</h2>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <div className="faq-item" key={i}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <span>{f.q}</span>
              <span className="faq-icon"><Icon name={open === i ? 'minus' : 'plus'} size={14} /></span>
            </button>
            {open === i && <div className="faq-a">{f.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}
window.FAQ = FAQ;