// Numbers section — market data
function Numbers({ t }) {
  const narrow = window.useNarrow(768);
  return (
    <Section id="numbers">
      <SectionHead kicker={t.kicker} title={t.title}/>
      <div style={{
        display: "grid",
        gridTemplateColumns: narrow ? "minmax(0,1fr)" : "repeat(3, minmax(0, 1fr))",
        gap: 1, background: "var(--rule)",
        border: "1px solid var(--rule)",
      }}>
        {t.stats.map((s, i) => (
          <div key={i} style={{
            background: "var(--bg)",
            padding: narrow ? "28px 20px" : "40px 32px",
            minWidth: 0,
          }}>
            <div className="serif" style={{
              fontSize: narrow ? "clamp(40px, 10vw, 56px)" : "clamp(48px, 5vw, 72px)",
              lineHeight: 0.95, letterSpacing: "-0.025em",
              fontWeight: 400,
              color: i % 5 === 2 ? "var(--accent)" : "var(--ink)",
            }}>{s.v}</div>
            <div style={{ marginTop: 14, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5, maxWidth: 280, textWrap: "pretty" }}>{s.l}</div>
          </div>
        ))}
      </div>
      <div className="mono" style={{ marginTop: 20, fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.04em" }}>
        {t.footnote}
      </div>
    </Section>
  );
}

window.Numbers = Numbers;