/* The Snowberry website — Care model: section heading + four stats + supporting cards */
function CareModel() {
  const { SectionHeading, Stat, Card } = window.TheSnowberryDesignSystem_ed783b;
  const stats = [
    { value: '12', label: 'Residents, by design' },
    { value: '1:5', label: 'Caregiver ratio' },
    { value: '24/7', label: 'Coverage · eMAR' },
    { value: '1', label: 'In-house chef' },
  ];
  const cards = [
    { t: 'Known by name', b: 'A home small enough that every resident is known by name, story, and routine, not a room number.' },
    { t: 'Real care, around the clock', b: 'One caregiver for every five residents, present and attentive, day and night, with full eMAR documentation.' },
    { t: 'Real food, every day', b: 'Home-cooked meals from scratch at one shared table. Medication management and memory-aware support.' },
  ];
  return (
    <section id="care" style={{ background: 'var(--surface-page)', padding: '112px 40px' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHeading
          eyebrowNumber="One"
          eyebrow="Capacity & Care"
          title="Clinical rigor, residential scale."
          lead="The clinical rigor of a larger operator and the warmth of a real home. Twelve seats at one table."
        />
        <div className="sb-stats-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, margin: '56px 0', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
          {stats.map((s, i) => (
            <div key={i} style={{ padding: '40px 24px', borderLeft: i ? '1px solid var(--hairline)' : 'none' }}>
              <Stat value={s.value} label={s.label} align="center" />
            </div>
          ))}
        </div>
        <div className="sb-cards-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {cards.map((c, i) => (
            <Card key={i} tone="paper" pad="lg">
              <img src="assets/logos/sprig-green.png" alt="" style={{ height: 64, marginBottom: 14, marginLeft: -10 }} />
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 24, color: 'var(--green-700)', margin: '0 0 10px', letterSpacing: '-0.01em' }}>{c.t}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0 }}>{c.b}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CareModel = CareModel;