// FAQ — accordion list.
const FAQS = [
  { q: 'Who is BetterPipe for?', a: 'Small B2B teams — agencies, consultancies, recruiters, fractional executives — selling high-value work who need a repeatable way to find new clients outside their existing network. If your growth has relied on referrals and you\'re ready to build something more structured, BetterPipe is built for you.' },
  { q: 'Is this a mass email tool?', a: 'No. BetterPipe is built for focused, signal-based campaigns. The goal is not to blast thousands of generic messages — it\'s to reach the right companies with a clear reason for why now.' },
  { q: 'Do I need to know my ICP?', a: 'No. Start with your website, your best customers, or a plain-language description of who you want more of. BetterPipe turns that into buyer criteria and campaign logic.' },
  { q: 'Does BetterPipe send messages automatically?', a: 'BetterPipe helps draft and run outreach, but you can review the campaign logic and messages before launch. The product is guided, not reckless.' },
  { q: 'Does this replace my CRM?', a: 'BetterPipe includes a pipeline for the outreach motion it creates. It\'s not trying to replace every CRM workflow for every team — it helps you find, reach, and manage new opportunities from one place.' },
  { q: 'How is this different from Clay, Apollo, or Pipedrive?', a: 'Those tools can be powerful pieces of a sales stack. BetterPipe is designed for small teams that want the whole client-acquisition motion guided in one place: target definition, signal discovery, outreach, and pipeline.' },
];

function FAQItem({ item, isOpen, onToggle, idx }) {
  return (
    <div style={{ borderTop: idx === 0 ? '1px solid var(--rule)' : 'none', borderBottom: '1px solid var(--rule)' }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%', textAlign: 'left',
          display: 'flex', alignItems: 'center', gap: 16,
          padding: '24px 0', background: 'transparent', border: 'none',
          cursor: 'pointer', color: 'var(--fg)',
        }}
      >
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: 'var(--signal)', minWidth: 32 }}>
          {String(idx + 1).padStart(2, '0')}
        </span>
        <span style={{
          flex: 1, fontFamily: 'var(--font-display)', fontSize: 'clamp(1.1rem, 1.7vw, 1.4rem)',
          fontWeight: 500, letterSpacing: '-0.02em',
        }}>{item.q}</span>
        <span style={{
          width: 28, height: 28, borderRadius: '50%',
          border: '1px solid var(--rule-strong)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg-mute)',
          transition: 'transform 240ms var(--ease-out), background 240ms, color 240ms',
          transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
          background: isOpen ? 'var(--signal)' : 'transparent',
          color: isOpen ? 'var(--on-signal)' : 'var(--fg-mute)',
          flexShrink: 0,
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>
        </span>
      </button>
      <div style={{
        maxHeight: isOpen ? 220 : 0,
        opacity: isOpen ? 1 : 0,
        overflow: 'hidden',
        transition: 'max-height 360ms var(--ease-out), opacity 240ms',
      }}>
        <p style={{
          paddingLeft: 48, paddingBottom: 24, paddingRight: 56,
          fontSize: 15, lineHeight: 1.6, color: 'var(--fg-mute)',
          maxWidth: '60ch',
        }}>{item.a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="bp-section" id="faq">
      <div className="container">
        <SectionEyebrow num="07" label="Common questions" />
        <Reveal>
          <h2 className="t-h2" style={{ maxWidth: '14ch', marginBottom: 56 }}>
            Things people <span className="t-italic" style={{ color: 'var(--signal)' }}>actually ask.</span>
          </h2>
        </Reveal>
        <div style={{ maxWidth: 880 }}>
          {FAQS.map((f, i) => (
            <FAQItem
              key={i} idx={i} item={f}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;