function StatCard({ label, en, value, trend, up, Icon }) {
  return (
    <div className="card" style={{ padding: 'var(--pad-card)', display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>{label}</div>
          <div className="eyebrow" style={{ marginTop: 2 }}>{en}</div>
        </div>
        <div style={{ width: 34, height: 34, display: 'grid', placeItems: 'center', borderRadius: 'var(--radius-sm)', background: 'var(--accent-soft)', color: 'var(--accent-strong)' }}>
          <Icon size={17} />
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <div className="mono" style={{ fontSize: 28, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{value}</div>
        <span className={`chip ${up ? 'chip-pos' : 'chip-neg'}`}>{trend}</span>
      </div>
    </div>
  );
}