// StatCard - large Cormorant gold number + DM Mono micro-caps label.
const StatCard = ({ number, label, framed = true, align = 'left' }) => (
  <div style={{
    background: framed ? 'var(--bg-elev-1)' : 'transparent',
    border: framed ? '1px solid var(--border-soft)' : 0,
    borderRadius: 4, padding: framed ? '24px 22px' : 0,
    textAlign: align,
  }}>
    <div style={statStyles.number}>{number}</div>
    <div style={statStyles.label}>{label}</div>
  </div>
);

const statStyles = {
  number: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(40px, 4.2vw, 56px)',
    lineHeight: 1, letterSpacing: '-0.02em',
    color: 'var(--fg-accent)', fontWeight: 500,
  },
  label: {
    fontFamily: 'var(--font-mono)', fontSize: 10,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--fg-2)', marginTop: 12,
  },
};

// StatGrid - 2/3/4 column responsive grid.
const StatGrid = ({ children, cols = 4, framed = true }) => (
  <div style={{
    display: 'grid',
    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
    gap: 14,
  }} data-framed={framed}>
    {children}
  </div>
);

Object.assign(window, { StatCard, StatGrid });