/* New patients — getting started steps, what to bring, coverage note */
function NewPatients({ onBook }) {
  const steps = [
    'Book a same-day visit online, or walk in during open hours.',
    'Bring your BC Services Card (or other ID and insurance details if you are not yet on MSP).',
    'Tell us at check-in if you would like to become a regular patient. We will talk you through attachment and next steps.',
  ];
  const bring = [
    'Your BC Services Card or photo ID',
    'A list of current medications, if any',
    'Any relevant past records or specialist letters, if handy',
  ];
  return (
    <Section bg="var(--paper)" id="new-patients">
      <Container style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 60, alignItems: 'start' }}>
        <div>
          <Overline style={{ marginBottom: 14 }}>New patients</Overline>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 38, lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink-900)', margin: '0 0 14px' }}>New here? Start in two minutes</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--ink-500)', margin: '0 0 30px', maxWidth: 480 }}>Whether you need care today or a regular family doctor, here is how to begin.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 16 }}>
                <div style={{ flex: 'none', width: 36, height: 36, borderRadius: '50%', background: 'var(--teal-700)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 15, fontFamily: 'var(--font-sans)' }}>{i + 1}</div>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.5, color: 'var(--ink-700)', margin: '6px 0 0' }}>{s}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}>
            <Button size="md" icon="calendar-check" onClick={onBook}>Book your first visit</Button>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <img src="assets/images/new-patients.png" alt="A new patient visit"
               style={{ width: '100%', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-lg)', display: 'block' }} />
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)', padding: '24px 26px' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 15.5, color: 'var(--ink-900)', marginBottom: 14 }}>What to bring</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {bring.map((b) => (
                <div key={b} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                  <Icon name="check" size={18} color="var(--teal-700)" style={{ flex: 'none', marginTop: 1 }} />
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--ink-700)' }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', background: 'var(--go-100)', borderRadius: 'var(--r-lg)', padding: '20px 22px' }}>
            <Icon name="shield-check" size={22} color="var(--go-700)" style={{ flex: 'none', marginTop: 1 }} />
            <div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 15, color: 'var(--go-700)', marginBottom: 4 }}>A note on coverage</div>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-700)', margin: 0 }}>Most visits are covered by the BC Medical Services Plan for eligible residents. If you are new to BC or between coverage, ask us at check-in and we will explain your options plainly.</p>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}
window.NewPatients = NewPatients;