function FAQItem({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{
      background: '#fff', border: '1px solid #d5e7e4', borderRadius: 18,
      overflow: 'hidden', transition: 'box-shadow .2s',
      boxShadow: open ? '0 8px 24px rgba(22,63,52,.05)' : '0 2px 6px rgba(22,63,52,.03)',
    }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: '100%', background: 'none', border: 'none', cursor: 'pointer',
        padding: '20px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontFamily: 'Inter', fontSize: 16, fontWeight: 600, color: '#163F34',
        textAlign: 'left',
      }}>
        {q}
        <span style={{ marginLeft: 16, flexShrink: 0 }}>{open ? <Minus /> : <Plus />}</span>
      </button>
      {open && (
        <div style={{ padding: '0 24px 22px', fontSize: 14.5, color: '#345048', lineHeight: 1.7 }}>
          {a}
        </div>
      )}
    </div>
  );
}

function FAQ() {
  const items = [
    {
      q: 'What if my books are a mess?',
      a: (
        <React.Fragment>
          <p style={{ margin: '0 0 12px' }}>That's more common than you'd think, and exactly what cleanup/catch-up services are for.</p>
          <p style={{ margin: '0 0 12px' }}>First I'll get everything cleaned up and current, so your books are accurate going forward.</p>
          <p style={{ margin: 0 }}>No judgment, just a clear plan to get things back on track.</p>
        </React.Fragment>
      ),
      defaultOpen: true,
    },
    {
      q: 'What software do you use?',
      a: (
        <React.Fragment>
          <p style={{ margin: '0 0 12px' }}>I work exclusively in QuickBooks Online and specialize in bookkeeping for service-based businesses.</p>
          <p style={{ margin: 0 }}>On a different platform? I can help you migrate or decide whether QuickBooks Online is the right fit.</p>
        </React.Fragment>
      ),
    },
    {
      q: 'How does pricing work?',
      a: (
        <React.Fragment>
          <p style={{ margin: '0 0 12px' }}>Monthly bookkeeping is billed at a flat monthly rate, with one-time cleanup/catch-up work quoted separately. No hourly billing or surprise invoices.</p>
          <p style={{ margin: 0 }}>Most clients fall between $350–$1,000/month. I'll provide a custom quote after our discovery call.</p>
        </React.Fragment>
      ),
    },
    {
      q: 'Do you do taxes or payroll?',
      a: (
        <React.Fragment>
          <p style={{ margin: '0 0 12px' }}>No — I focus exclusively on bookkeeping for service-based businesses.</p>
          <p style={{ margin: '0 0 12px' }}>For taxes, I keep your books clean, organized, and ready for your CPA at tax time.</p>
          <p style={{ margin: 0 }}>For payroll, I don't process it directly, but I'll recommend a trusted provider and reconcile it in your books.</p>
        </React.Fragment>
      ),
    },
    {
      q: 'Are there contracts?',
      a: (
        <React.Fragment>
          <p style={{ margin: '0 0 12px' }}>All clients sign an agreement that outlines scope, expectations, and terms.</p>
          <p style={{ margin: 0 }}>Services are billed month-to-month with a 30-day notice to cancel — no long-term commitments or lock-ins.</p>
        </React.Fragment>
      ),
    },
    {
      q: 'How quickly do you respond?',
      a: (
        <React.Fragment>
          <p style={{ margin: '0 0 12px' }}>You'll typically hear back from me within 48 hours, often sooner.</p>
          <p style={{ margin: 0 }}>You reach me directly by phone, email, or your client portal — no support tickets or call centers.</p>
        </React.Fragment>
      ),
    },
  ];

  return (
    <section id="faq" style={{ background: '#f3f1ed', padding: '100px 32px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#3F8074', marginBottom: 14,
          }}>FAQ</div>
          <h2 style={{ fontSize: 'clamp(2rem, 2.8vw, 2.75rem)', fontWeight: 700, color: '#163F34', margin: 0, letterSpacing: '-0.02em' }}>
            Frequently asked questions
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map(item => <FAQItem key={item.q} {...item} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { FAQ, FAQItem });