const faqs = [
  {
    q: 'Are you a lawyer?',
    a: "No — this is informational and organizational support, not legal representation. I'm trained in special education law through Wrightslaw and hold a master's degree in Child Advocacy and Policy, so you're getting real grounding in the process, not a stranger winging it. If your situation needs an attorney, I'll tell you that directly.",
  },
  {
    q: 'Do I need to already have an IEP or 504 in place?',
    a: "No. Most people who book a session haven't gotten that far yet. That's normal.",
  },
  {
    q: 'What do I walk away with?',
    a: 'Depends on your session, but usually: a situation map, a documentation plan, and either a revised email or a meeting prep sheet.',
  },
  {
    q: 'How is this different from just Googling it?',
    a: "Google gives you information. This gives you a plan built around your actual situation, plus someone keeping you from sending the email you'll regret at 11pm.",
  },
];

function FAQ() {
  return (
    <section id="faq" style={{ padding: '64px 48px 96px', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 680, margin: '0 auto' }}>
        <h2 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', marginBottom: 32 }}>FAQ</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {faqs.map((f) => (
            <div key={f.q}>
              <div style={{ font: 'var(--text-body-md)', color: 'var(--text-primary)', fontWeight: 600, marginBottom: 6 }}>{f.q}</div>
              <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)' }}>{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;