// Stats bar — full-bleed Ink, giant mono numerals (the bold moment)
function HpStats({ stats }) {
  return (
    <section
      className="hp-section--tight"
      style={{
        background: "var(--ink)",
        color: "var(--cream)",
        borderTop: "1px solid var(--ink)",
      }}
    >
      <div className="hp-container">
        <div className="hp-eyebrow-row">
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.32em",
            textTransform: "uppercase", color: "oklch(0.72 0.005 60)",
            borderBottom: "1px solid var(--coral)", paddingBottom: 2,
          }}>The numbers</span>
          <span className="hp-hide-sm" style={{
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.32em",
            textTransform: "uppercase", color: "oklch(0.55 0.005 60)",
          }}>Tracked · audited · postback-verified</span>
        </div>
        <div className="hp-stats">
          {stats.map((s, i) => (
            <div key={i} className="hp-stat">
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 500,
                fontSize: "clamp(48px, 6vw, 88px)", letterSpacing: "-0.05em",
                lineHeight: 0.95, color: "var(--cream)",
              }}>
                {s.value}<span style={{ color: "var(--coral)" }}>{s.suffix}</span>
              </div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em",
                textTransform: "uppercase", color: "oklch(0.72 0.005 60)", marginTop: 18,
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HpStats = HpStats;