;(function () {
/* StatCard — single stat tile with label / big value / sub. */

const StatCard = ({ label, value, sub, valueColor }) => {
  return (
    <div style={styles.card}>
      <span style={styles.label}>{label}</span>
      <span style={{ ...styles.value, color: valueColor || colors.ink }}>
        {value}
      </span>
      <span style={styles.sub}>{sub}</span>
    </div>
  );
};

const styles = {
  card: {
    backgroundColor: '#fff',
    borderRadius: '16px',
    padding: '14px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  label: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '12px',
    color: colors.muted,
    marginBottom: '6px',
  },
  value: {
    /* Gilroy 700 reads cleaner at 22px than Inter 400 — proper display-
       face weight, matches the rest of the headline numbers in the app. */
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '22px',
    lineHeight: '26px',
    marginBottom: '2px',
    fontVariantNumeric: 'tabular-nums',
    letterSpacing: '-0.3px',
  },
  sub: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted2,
  },
};

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