/* FAQ — accordion */
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, background: 'none', border: 0, cursor: 'pointer', padding: '24px 4px', textAlign: 'left' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 21, color: 'var(--ink-900)', letterSpacing: '-0.01em', lineHeight: 1.3 }}>{q}</span>
        <span style={{ flex: 'none', width: 34, height: 34, borderRadius: '50%', background: open ? 'var(--teal-700)' : 'var(--teal-50)', color: open ? '#fff' : 'var(--teal-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all var(--dur) var(--ease-out)' }}>
          <Icon name={open ? 'minus' : 'plus'} size={18} stroke={2} />
        </span>
      </button>
      <div style={{ maxHeight: open ? 320 : 0, overflow: 'hidden', transition: 'max-height var(--dur-slow) var(--ease-out)' }}>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--ink-500)', margin: '0 0 24px', maxWidth: 760, textWrap: 'pretty' }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const faqs = [
    { q: 'Do I need an appointment?', a: 'No. You are welcome to walk in during open hours. Booking a same-day spot online just means a shorter, more predictable wait.' },
    { q: 'Can I see how long the wait is before I come in?', a: 'Yes. The estimated wait time is shown online so you can plan your day.' },
    { q: 'Is the visit covered?', a: 'Most visits are covered by MSP for eligible BC residents. If you are not sure about your coverage, ask us at check-in.' },
    { q: 'Can Tidewell be my family doctor\u2019s office?', a: 'Yes. Many patients start with a walk-in visit and then choose to attach to a regular provider and care team here. Just let us know.' },
    { q: 'Do you see children?', a: 'Yes. We care for every age, from newborns to seniors.' },
    { q: 'Can I get a virtual appointment?', a: 'Yes, for concerns that are suitable for phone or video. We will let you know if you need to be seen in person.' },
    { q: 'What if it\u2019s an emergency?', a: 'For chest pain, difficulty breathing, severe bleeding, signs of stroke, or any life-threatening concern, call 911 or go to the nearest emergency department. Tidewell is for urgent-but-not-emergency and ongoing care.' },
    { q: 'What languages do you speak?', a: 'Our team speaks English, Cantonese, Mandarin, Tagalog, Punjabi, and Spanish. Ask when you book or check in.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section bg="var(--paper)" id="faq">
      <Container style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 56, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <Overline style={{ marginBottom: 14 }}>FAQ</Overline>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 38, lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink-900)', margin: '0 0 16px' }}>Questions, answered</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--ink-500)', margin: 0, maxWidth: 280 }}>Still wondering about something? Call us at <a href="tel:+16045550123" style={{ color: 'var(--teal-700)', fontWeight: 600, textDecoration: 'none' }}>(604) 555-0123</a>.</p>
        </div>
        <div>
          {faqs.map((f, i) => (
            <FAQItem key={i} q={f.q} a={f.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </Container>
    </Section>
  );
}
window.FAQ = FAQ;