const FAQItem = ({ q, a, open, onToggle }) => (
  <div style={{
    borderBottom: '1px solid var(--brown-100)',
  }}>
    <button onClick={onToggle} style={{
      width: '100%', padding: '22px 4px', display: 'flex',
      justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', gap: 20,
    }}>
      <span className="serif" style={{ fontSize: 20, fontWeight: 500, color: 'var(--brown-900)' }}>
        {q}
      </span>
      <span style={{
        width: 34, height: 34, borderRadius: 999, border: '1.5px solid var(--brown-300)',
        display: 'grid', placeItems: 'center', flexShrink: 0, color: 'var(--brown-700)',
        transform: open ? 'rotate(45deg)' : 'rotate(0)',
        transition: 'transform .2s',
      }}>
        <Icon name="plus" size={16} strokeWidth={2}/>
      </span>
    </button>
    <div style={{
      overflow: 'hidden',
      maxHeight: open ? 300 : 0,
      transition: 'max-height .3s ease',
    }}>
      <p style={{
        margin: 0, padding: '0 4px 22px',
        fontSize: 15, lineHeight: 1.6, color: 'var(--brown-700)', maxWidth: 680,
      }}>
        {a}
      </p>
    </div>
  </div>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'When do cookies ship?', a: 'We bake and ship right away, Monday through Thursday. Orders placed before 11am CT go out the same business day; after 11am, they ship the next business morning.' },
    { q: 'Can I cancel or pause the club?', a: 'Yes — cancel, pause, or skip any month right from your account. No fees, no awkward phone calls. We mean it.' },
    { q: 'What\u2019s in each monthly box?', a: 'One dozen fresh-baked Gooey Butter Cookies in a rotating flavor, plus a small surprise each month (new flavor sneak peek, recipe card, or member-only merch).' },
    { q: 'Can I skip a month or swap the flavor?', a: 'Absolutely. You\u2019ll get an email 5 days before your box ships — swap to a different flavor or skip entirely in one tap.' },
    { q: 'How do gifts work?', a: 'Choose a duration (one-time, 3, 6, or 12 months), add a message and the recipient\u2019s address, and we handle the rest. They don\u2019t see any prices — just cookies.' },
    { q: 'Do you ship nationwide?', a: 'We ship to all 50 US states. Free shipping on orders over $50 and on every club box.' },
  ];
  return (
    <section id="faq" style={{ padding: '80px 0', background: 'var(--cream-50)' }}>
      <div className="container" style={{ maxWidth: 920 }}>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Questions</div>
          <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.2vw, 44px)', fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>
            The short-answer edition.
          </h2>
        </div>
        <div style={{ background: '#fff', borderRadius: 22, padding: '8px 28px', border: '1px solid var(--brown-100)' }}>
          {items.map((it, i) => (
            <FAQItem key={i} {...it} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 24, fontSize: 14, color: 'var(--brown-600)' }}>
          Still curious? <a href={SITE.live.contact} {...EXTERNAL_LINK_PROPS} style={{ color: 'var(--brown-800)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Get in touch →</a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });