/* How it works — three steps, walk in or book ahead */
function HowItWorks({ onBook }) {
  const steps = [
    { icon: 'clock', n: '01', title: 'Check the wait, or book online', body: 'See today\u2019s estimated wait time before you leave home, then book a same-day spot or simply walk in.' },
    { icon: 'smartphone', n: '02', title: 'Check in on your phone', body: 'Fill out your details ahead of time so your visit starts the moment you arrive. Less clipboard, more care.' },
    { icon: 'stethoscope', n: '03', title: 'See your team, plan what\u2019s next', body: 'Get unhurried time with a clinician. Need a follow-up, a referral, or a regular provider? We set it up before you leave.' },
  ];
  return (
    <Section bg="var(--teal-800)" id="how">
      <Container>
        <SectionHead
          overline={<span style={{ color: 'var(--teal-200)' }}>How it works</span>}
          title={<span style={{ color: '#fff' }}>Getting seen, without the guesswork</span>}
          intro={<span style={{ color: 'rgba(255,255,255,0.82)' }}>Three simple steps, whether you walk in or book ahead.</span>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {steps.map((s) => (
            <div key={s.n} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 'var(--r-lg)', padding: '30px 28px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
                <div style={{ width: 52, height: 52, borderRadius: 'var(--r-md)', background: 'var(--teal-300)', color: 'var(--teal-900)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={s.icon} size={26} stroke={2} />
                </div>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 30, color: 'rgba(255,255,255,0.32)', letterSpacing: '-0.01em' }}>{s.n}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: '#fff', margin: '0 0 10px', letterSpacing: '-0.01em', lineHeight: 1.2 }}>{s.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40 }}>
          <Button size="lg" variant="white" icon="calendar-check" onClick={onBook}>Book a same-day visit</Button>
        </div>
      </Container>
    </Section>
  );
}
window.HowItWorks = HowItWorks;