// Stats — Clinicians §16. 4-up numerical metrics grid.
// Mirrors clinicians/stats-02.

function Stats({ scheme = "scheme-2", title = "Our impact, in numbers", lede, stats }) {
  return (
    <Section scheme={scheme}>
      <div className="kl-split" style={{ gap: 96, alignItems: "flex-end", marginBottom: 64 }}>
        <h2 style={{ fontSize: "var(--kl-text-h2)", lineHeight: 1.1 }}>{title}</h2>
        {lede && <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5, maxWidth: "44ch" }}>{lede}</p>}
      </div>
      <div className={`kl-cols-${stats.length}`} style={{ gap: 48 }}>
        {stats.map((s) => (
          <div key={s.label} style={{ borderTop: "2px solid var(--kl-plum)", paddingTop: 24 }}>
            <p style={{
              fontFamily: "var(--kl-font-display)",
              fontWeight: 500,
              fontSize: "var(--kl-text-h1)",
              color: "var(--kl-plum)",
              lineHeight: 1,
              letterSpacing: "-0.02em",
              marginBottom: 16,
            }}>{s.value}</p>
            <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.4, fontWeight: 500 }}>{s.label}</p>
            {s.note && <p style={{ fontSize: "var(--kl-text-small)", color: "var(--kl-fg-2)", marginTop: 6 }}>{s.note}</p>}
          </div>
        ))}
      </div>
    </Section>
  );
}

window.Stats = Stats;