/* By the numbers — illustrative stats + press blurbs from credibility-kit */
function ByTheNumbers() {
  const stats = [
    { fig: '~12 min', label: 'average wait when you book a same-day spot online' },
    { fig: '7 days', label: 'a week, with extended evening hours on weekdays' },
    { fig: '~3,400', label: 'patients attached to a regular provider here' },
    { fig: '6', label: 'languages spoken across the care team' },
    { fig: '~92%', label: 'of surveyed patients would recommend us to a friend' },
  ];
  const press = [
    { quote: 'A model for what neighbourhood primary care can be when it is built around the patient\u2019s time.', src: 'Local Vancouver outlet' },
    { quote: 'Part walk-in clinic, part family practice, and notably calmer than either usually feels.', src: 'Regional health publication' },
    { quote: 'A small idea with an outsized effect on how people experience getting care.', src: 'Technology & cities newsletter' },
  ];
  return (
    <Section bg="var(--teal-900)" style={{ padding: '80px 0' }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 36 }}>
          <Overline style={{ color: 'var(--teal-200)' }}>By the numbers</Overline>
          <IllusTag style={{ background: 'rgba(255,255,255,0.12)', color: 'rgba(255,255,255,0.78)' }}>Illustrative figures</IllusTag>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 28 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ borderLeft: '1px solid rgba(255,255,255,0.16)', paddingLeft: 22 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 42, lineHeight: 1, color: '#fff', letterSpacing: '-0.02em' }}>{s.fig}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.45, color: 'rgba(255,255,255,0.72)', marginTop: 12 }}>{s.label}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
          {press.map((p, i) => (
            <div key={i} style={{ borderTop: '2px solid var(--teal-400)', paddingTop: 20 }}>
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontStyle: 'italic', fontSize: 18, lineHeight: 1.45, color: 'rgba(255,255,255,0.92)', margin: '0 0 14px', textWrap: 'pretty' }}>{'\u201C'}{p.quote}{'\u201D'}</p>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--teal-200)' }}>{p.src}</div>
            </div>
          ))}
        </div>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'rgba(255,255,255,0.5)', margin: '36px 0 0' }}>
          Figures and coverage are invented for this demo and must be replaced with measured, sourced numbers before any real use.
        </p>
      </Container>
    </Section>
  );
}
window.ByTheNumbers = ByTheNumbers;