// FAQ — accordion list of Q&A, black background
function FAQ() {
  const qs = [
    { q: "Do you work with small businesses?", a: "We focus on mid-market brands (typically $5M–$500M revenue) who are ready to take social seriously. We're happy to refer you to partners if we're not the right fit." },
    { q: "How fast can you get started?", a: "Typical onboarding is 2 weeks from signed agreement. Audit, strategy sync, systems setup, then go." },
    { q: "Do you do paid social as well as organic?", a: "Yes. Our Full-Service plan covers both. Part-time plans can be configured either way." },
    { q: "What platforms do you cover?", a: "TikTok, Instagram, Facebook, LinkedIn, X, YouTube, Threads, and Pinterest. We'll advise on where your audience actually is, not every platform, just the right ones." },
    { q: "Can I bring my in-house team into your workflow?", a: "Absolutely. Our Strategy & Systems service is built for exactly this. We plug in, skill up your team, and measure together." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="bg-black-pink-radial-soft" style={{padding:'96px 0'}}>
      <div className="wrap" style={{maxWidth: 860}}>
        <h2 style={{fontSize: 48, fontWeight: 800, textAlign:'center', letterSpacing:'-.01em', margin: '0 0 40px'}}>Frequently Asked</h2>
        <div style={{borderTop:'1px solid #1f1f1f'}}>
          {qs.map((it, i) => (
            <div key={i} style={{borderBottom:'1px solid #1f1f1f'}}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{width:'100%', background:'transparent', color:'#fff', border:0, padding:'22px 4px', textAlign:'left', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between', font:'700 17px/1.4 var(--font-sans)'}}>
                <span>{it.q}</span>
                <span style={{color:'#B11871', fontSize: 22, fontWeight: 700}}>{open===i ? '−' : '+'}</span>
              </button>
              {open===i && (<div style={{padding:'0 4px 24px', color:'#d4d4d4', fontSize:15, lineHeight:1.6}}>{it.a}</div>)}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;