// ProMTK — Icons & UI Atoms (enterprise, theme-aware)
// Stroke icons on 24×24 grid, 1.8 stroke. Colors read from CSS vars so
// dark/light swaps in real time without re-render.

const c = (k) => `var(--pm-${k})`; // css var helper

const Icon = ({ name, size = 22, color = 'currentColor', strokeWidth = 1.8, style }) => {
  const p = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home: <path {...p} d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-4v-6h-8v6H4a1 1 0 0 1-1-1v-8.5Z"/>,
    wallet: <><path {...p} d="M3 7.5A2.5 2.5 0 0 1 5.5 5h12A2.5 2.5 0 0 1 20 7.5V9h.5A1.5 1.5 0 0 1 22 10.5v6A1.5 1.5 0 0 1 20.5 18H20v.5A2.5 2.5 0 0 1 17.5 21h-12A2.5 2.5 0 0 1 3 18.5v-11Z"/><circle cx="17" cy="13.5" r="1.3" fill={color} stroke="none"/></>,
    message: <path {...p} d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-6l-4 3v-3H6a2 2 0 0 1-2-2V6Z"/>,
    user: <><circle {...p} cx="12" cy="8" r="3.5"/><path {...p} d="M5 20c.8-3.5 3.7-5.5 7-5.5s6.2 2 7 5.5"/></>,
    bell: <><path {...p} d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15L6 16Z"/><path {...p} d="M10 21a2 2 0 0 0 4 0"/></>,
    qr: <><rect {...p} x="3" y="3" width="7" height="7" rx="1.2"/><rect {...p} x="14" y="3" width="7" height="7" rx="1.2"/><rect {...p} x="3" y="14" width="7" height="7" rx="1.2"/><path {...p} d="M14 14h3v3m0 4h4v-4m-4-3h-1"/></>,
    car: <><path {...p} d="M5 16v3m14-3v3M4 13l1.5-4.5A2 2 0 0 1 7.4 7h9.2a2 2 0 0 1 1.9 1.5L20 13m-16 0v3h16v-3m-16 0h16"/><circle cx="7.5" cy="15" r="1.2" fill={color}/><circle cx="16.5" cy="15" r="1.2" fill={color}/></>,
    tool: <path {...p} d="M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2.1-2.1 2.4-2.2Z"/>,
    users: <><circle {...p} cx="9" cy="8" r="3"/><circle {...p} cx="17" cy="9" r="2.5"/><path {...p} d="M3 19c.7-3 3-4.5 6-4.5s5.3 1.5 6 4.5M15 14c2.4.2 4.3 1.6 5 4"/></>,
    doc: <><path {...p} d="M6 3h8l4 4v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"/><path {...p} d="M14 3v4h4M8 12h8M8 16h6"/></>,
    speaker: <><path {...p} d="M3 10v4h3l5 4V6l-5 4H3Z"/><path {...p} d="M14 9a4 4 0 0 1 0 6m3-9a7 7 0 0 1 0 12"/></>,
    vote: <><path {...p} d="M5 7V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2M3 9h18v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path {...p} d="m8 13 2.5 2.5L16 10"/></>,
    sos: <><circle {...p} cx="12" cy="12" r="9"/><path {...p} d="M12 7v5m0 3v.01"/></>,
    settings: <><circle {...p} cx="12" cy="12" r="3"/><path {...p} d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></>,
    chevronRight: <path {...p} d="m9 6 6 6-6 6"/>,
    chevronLeft: <path {...p} d="m15 6-6 6 6 6"/>,
    chevronDown: <path {...p} d="m6 9 6 6 6-6"/>,
    chevronUp: <path {...p} d="m6 15 6-6 6 6"/>,
    plus: <path {...p} d="M12 5v14M5 12h14"/>,
    minus: <path {...p} d="M5 12h14"/>,
    close: <path {...p} d="M6 6l12 12M18 6 6 18"/>,
    check: <path {...p} d="m5 12 5 5L20 7"/>,
    search: <><circle {...p} cx="11" cy="11" r="6"/><path {...p} d="m20 20-4-4"/></>,
    filter: <path {...p} d="M3 5h18l-7 9v5l-4 2v-7L3 5Z"/>,
    calendar: <><rect {...p} x="3" y="5" width="18" height="16" rx="2"/><path {...p} d="M3 9h18M8 3v4m8-4v4"/></>,
    clock: <><circle {...p} cx="12" cy="12" r="9"/><path {...p} d="M12 7v5l3 2"/></>,
    location: <><path {...p} d="M12 21s-7-6.4-7-12a7 7 0 1 1 14 0c0 5.6-7 12-7 12Z"/><circle {...p} cx="12" cy="9" r="2.5"/></>,
    phone: <path {...p} d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2Z"/>,
    camera: <><path {...p} d="M4 7h3l2-2h6l2 2h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z"/><circle {...p} cx="12" cy="13" r="3.5"/></>,
    mic: <><rect {...p} x="9" y="3" width="6" height="12" rx="3"/><path {...p} d="M5 11a7 7 0 0 0 14 0M12 18v3"/></>,
    lock: <><rect {...p} x="5" y="11" width="14" height="9" rx="2"/><path {...p} d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
    key: <><circle {...p} cx="8" cy="12" r="4"/><path {...p} d="M12 12h9l-2 2m-3-2v3"/></>,
    lightbulb: <path {...p} d="M9 18h6M10 21h4M8 14a5 5 0 1 1 8 0c-.7.9-1.5 1.7-1.5 3v1h-5v-1c0-1.3-.8-2.1-1.5-3Z"/>,
    shield: <path {...p} d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/>,
    shieldCheck: <><path {...p} d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/><path {...p} d="m8.5 12 2.5 2.5L15.5 10"/></>,
    arrowUp: <path {...p} d="M12 19V5m-6 6 6-6 6 6"/>,
    arrowDown: <path {...p} d="M12 5v14m-6-6 6 6 6-6"/>,
    arrowRight: <path {...p} d="M5 12h14m-6-6 6 6-6 6"/>,
    refresh: <path {...p} d="M3 12a9 9 0 0 1 15.5-6.3L21 8M21 4v4h-4M21 12a9 9 0 0 1-15.5 6.3L3 16m0 4v-4h4"/>,
    eye: <><path {...p} d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle {...p} cx="12" cy="12" r="3"/></>,
    more: <><circle cx="6" cy="12" r="1.6" fill={color}/><circle cx="12" cy="12" r="1.6" fill={color}/><circle cx="18" cy="12" r="1.6" fill={color}/></>,
    flame: <path {...p} d="M12 3c1 4 5 5 5 10a5 5 0 1 1-10 0c0-2 1-3 2-4-1-3 1-5 3-6Z"/>,
    drop: <path {...p} d="M12 3s6 7 6 11a6 6 0 1 1-12 0c0-4 6-11 6-11Z"/>,
    wifi: <><path {...p} d="M5 12a10 10 0 0 1 14 0M8.5 15a5 5 0 0 1 7 0"/><circle cx="12" cy="18" r="1.3" fill={color}/></>,
    bolt: <path {...p} d="M13 3 4 14h6l-1 7 9-11h-6l1-7Z"/>,
    film: <><rect {...p} x="3" y="5" width="18" height="14" rx="2"/><path {...p} d="M3 9h18M3 15h18M8 5v14m8-14v14"/></>,
    heart: <path {...p} d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z"/>,
    send: <path {...p} d="M4 12 21 4l-8 17-2-7-7-2Z"/>,
    pin: <path {...p} d="M12 2v4m0 0L8 10v4h8v-4l-4-4Zm0 10v9"/>,
    menu: <path {...p} d="M4 6h16M4 12h16M4 18h16"/>,
    grid: <><rect {...p} x="3" y="3" width="7" height="7" rx="1"/><rect {...p} x="14" y="3" width="7" height="7" rx="1"/><rect {...p} x="3" y="14" width="7" height="7" rx="1"/><rect {...p} x="14" y="14" width="7" height="7" rx="1"/></>,
    trash: <path {...p} d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13"/>,
    download: <path {...p} d="M12 4v12m-5-5 5 5 5-5M4 20h16"/>,
    upload: <path {...p} d="M12 20V8m-5 5 5-5 5 5M4 4h16"/>,
    star: <path {...p} d="m12 3 2.8 6 6.2.9-4.5 4.4 1 6.2L12 17.5 6.5 20.5l1-6.2L3 9.9 9.2 9 12 3Z"/>,
    ac: <><circle {...p} cx="12" cy="12" r="2.5"/><path {...p} d="M12 3v6m0 6v6M3 12h6m6 0h6M6 6l4 4m4 4 4 4M6 18l4-4m4-4 4-4"/></>,
    elevator: <><rect {...p} x="5" y="3" width="14" height="18" rx="2"/><path {...p} d="M12 3v18M9 8l-2 2 2 2m6-4 2 2-2 2"/></>,
    doorOpen: <><path {...p} d="M13 3v18M4 21V5l9-2v18H4Z"/><circle cx="11" cy="12" r=".8" fill={color}/></>,
    temperature: <><path {...p} d="M10 4a2 2 0 1 1 4 0v10a4 4 0 1 1-4 0V4Z"/><circle cx="12" cy="17" r="2" fill={color}/></>,
    signature: <path {...p} d="M3 17c3 0 4-10 8-10s4 10 8 10M6 21h14"/>,
    megaphone: <path {...p} d="M3 10v4l12 5V5L3 10Zm12-4 5 1v8l-5 1M6 14l2 5h3l-2-5"/>,
    check2: <><circle {...p} cx="12" cy="12" r="9"/><path {...p} d="m8 12 3 3 5-6"/></>,
    info: <><circle {...p} cx="12" cy="12" r="9"/><path {...p} d="M12 8v.01M11 12h1v5h1"/></>,
    sparkle: <path {...p} d="M12 3v4m0 10v4M3 12h4m10 0h4M6.5 6.5l2.5 2.5m6 6 2.5 2.5M6.5 17.5l2.5-2.5m6-6 2.5-2.5"/>,
    sun: <><circle {...p} cx="12" cy="12" r="4"/><path {...p} d="M12 3v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4M5.6 18.4 7 17m10-10 1.4-1.4"/></>,
    moon: <path {...p} d="M21 13a9 9 0 1 1-10-10 7 7 0 0 0 10 10Z"/>,
    chart: <path {...p} d="M4 20V10m6 10V4m6 16v-8m6 8V8"/>,
    building: <><rect {...p} x="4" y="3" width="16" height="18" rx="1"/><path {...p} d="M8 8h2m4 0h2M8 12h2m4 0h2M8 16h2m4 0h2"/></>,
    receipt: <><path {...p} d="M6 3h12v18l-2-1.5L14 21l-2-1.5L10 21l-2-1.5L6 21V3Z"/><path {...p} d="M9 8h6M9 12h6M9 16h4"/></>,
    badge: <><path {...p} d="M12 3 3 7v5c0 5 4 8 9 10 5-2 9-5 9-10V7l-9-4Z"/><path {...p} d="m9 12 2 2 4-4"/></>,
    fingerprint: <path {...p} d="M12 3a9 9 0 0 1 9 9v1M8 21c-.5-2 0-4 0-6a4 4 0 0 1 8 0v2M12 21v-8M5 13a7 7 0 0 1 7-7c3 0 5 1 6 3"/>,
    mail: <><rect {...p} x="3" y="5" width="18" height="14" rx="2"/><path {...p} d="m3 7 9 7 9-7"/></>,
    alert: <><path {...p} d="M12 3 2 20h20L12 3Z"/><path {...p} d="M12 10v4m0 2v.01"/></>,
    trending: <path {...p} d="m3 17 6-6 4 4 8-8m0 0h-5m5 0v5"/>,
    link: <path {...p} d="M9 15a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-.7.7M15 9a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l.7-.7"/>,
    cash: <><rect {...p} x="3" y="6" width="18" height="12" rx="2"/><circle {...p} cx="12" cy="12" r="2.5"/><path {...p} d="M7 10v.01M17 14v.01"/></>,
    scale: <path {...p} d="M12 3v18M5 7l-3 5c1 1.5 2 2 3 2s2-.5 3-2L5 7Zm14 0-3 5c1 1.5 2 2 3 2s2-.5 3-2l-3-5ZM8 21h8"/>,
    plug: <path {...p} d="M9 3v5m6-5v5M7 13a5 5 0 0 0 10 0V8H7v5ZM12 18v3"/>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={style}>{paths[name]}</svg>;
};

// ─────────────────────────────────────────────────────────────
// Primitives — all reading CSS vars for theme
// ─────────────────────────────────────────────────────────────
const Card = ({ children, style, padding = 16, glow = false, onClick }) => (
  <div onClick={onClick} className={onClick ? 'pm-tap-soft' : ''} style={{
    background: c('bg3'), borderRadius: pmBase.r4,
    padding, border: `1px solid ${c('line')}`,
    boxShadow: glow ? pmBase.glow : pmBase.shadow2,
    cursor: onClick ? 'pointer' : 'default',
    ...style,
  }}>{children}</div>
);

const Pill = ({ children, color = pmBase.brand, bg, style }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '4px 10px', borderRadius: 999,
    background: bg || `${color}22`, color,
    fontSize: 11, fontWeight: 700, letterSpacing: 0.3,
    textTransform: 'uppercase',
    ...style,
  }}>{children}</span>
);

const Chip = ({ children, active, onClick, style }) => (
  <button onClick={onClick} className="pm-tap-soft" style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '8px 14px', borderRadius: 999, border: 'none',
    background: active ? pmBase.brand : c('bg3'),
    color: active ? '#fff' : c('fg2'),
    fontSize: 13, fontWeight: 600, fontFamily: pmBase.font,
    cursor: 'pointer', whiteSpace: 'nowrap',
    boxShadow: active ? '0 6px 16px rgba(124,92,255,0.35)' : 'none',
    ...style,
  }}>{children}</button>
);

const Btn = ({ children, variant = 'primary', onClick, icon, full, style, loading, disabled, type = 'button', ...rest }) => {
  const variants = {
    primary: { background: pmBase.gradient, color: '#fff', boxShadow: '0 10px 24px -8px rgba(124,92,255,0.55)' },
    secondary: { background: c('bg3'), color: c('fg'), border: `1px solid ${c('line')}` },
    ghost: { background: 'transparent', color: c('fg2') },
    danger: { background: pmBase.danger, color: '#fff' },
    success: { background: pmBase.ok, color: '#fff' },
    enterprise: { background: pmBase.gradientEnterprise, color: '#fff' },
  };
  const isDisabled = disabled || loading;
  return (
    <button
      type={type}
      onClick={isDisabled ? undefined : onClick}
      disabled={isDisabled}
      className="pm-tap"
      aria-busy={loading ? 'true' : undefined}
      {...rest}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        padding: '14px 18px', borderRadius: pmBase.r3, border: 'none',
        fontSize: 15, fontWeight: 700, fontFamily: pmBase.font,
        cursor: isDisabled ? 'not-allowed' : 'pointer', width: full ? '100%' : undefined, letterSpacing: -0.1,
        opacity: isDisabled ? 0.45 : 1,
        filter: isDisabled ? 'saturate(0.7)' : 'none',
        transition: 'opacity .2s, filter .2s',
        minHeight: 48,
        whiteSpace: 'nowrap',
        ...variants[variant], ...style,
      }}
    >
      {loading ? <span style={{ width: 16, height: 16, borderRadius: 8, border: '2px solid currentColor', borderTopColor: 'transparent', animation: 'pm-spin 0.8s linear infinite', display: 'inline-block' }}/> : icon && <Icon name={icon} size={18} />}
      {children}
    </button>
  );
};

const IconBtn = ({ name, size = 42, iconSize = 20, bg, color, onClick, style, badge }) => (
  <button onClick={onClick} className="pm-tap" style={{
    width: size, height: size, borderRadius: size / 2, border: 'none',
    background: bg || c('bg3'), color: color || c('fg'), cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    position: 'relative',
    ...style,
  }}>
    <Icon name={name} size={iconSize} />
    {badge && (
      <span style={{
        position: 'absolute', top: -2, right: -2,
        background: pmBase.danger, color: '#fff',
        fontSize: 10, fontWeight: 700, padding: '2px 5px',
        borderRadius: 8, minWidth: 16, textAlign: 'center',
        border: `2px solid ${c('bg')}`,
      }}>{badge}</span>
    )}
  </button>
);

const Avatar = ({ name, src, size = 40, style, status }) => {
  const initials = name ? name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase() : '';
  const hue = name ? name.charCodeAt(0) * 17 % 360 : 260;
  return (
    <div style={{ position: 'relative', display: 'inline-block', flexShrink: 0 }}>
      <div style={{
        width: size, height: size, borderRadius: size / 2,
        background: src ? `#333` : `linear-gradient(135deg, hsl(${hue},60%,55%), hsl(${(hue+60)%360},55%,45%))`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: size * 0.38, fontWeight: 700,
        overflow: 'hidden',
        ...style,
      }}>
        {src ? <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : initials}
      </div>
      {status && (
        <span style={{
          position: 'absolute', bottom: 0, right: 0,
          width: size * 0.28, height: size * 0.28, borderRadius: '50%',
          background: status === 'online' ? pmBase.ok : status === 'busy' ? pmBase.warn : pmBase.fg4,
          border: `2px solid ${c('bg2')}`,
        }}/>
      )}
    </div>
  );
};

const Progress = ({ value = 0.5, color = pmBase.brand, height = 6, bg, style }) => (
  <div style={{ width: '100%', height, background: bg || c('bg4'), borderRadius: height, overflow: 'hidden', ...style }}>
    <div style={{
      width: `${value * 100}%`, height: '100%',
      background: color.includes && color.includes('gradient') ? color : `linear-gradient(90deg, ${color}, ${color})`,
      borderRadius: height, transition: 'width .6s cubic-bezier(.2,.7,.3,1)',
    }} />
  </div>
);

const Ring = ({ value = 0.7, size = 72, stroke = 7, color = pmBase.brand, bg, children }) => {
  const r = (size - stroke) / 2;
  const circ = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke={bg || 'var(--pm-bg4)'} strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} fill="none"
          strokeDasharray={circ} strokeDashoffset={circ * (1 - value)} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1)' }}/>
      </svg>
      {children && <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>{children}</div>}
    </div>
  );
};

const SectionHeader = ({ title, action, onAction, subtitle }) => (
  <div style={{ display: 'flex', alignItems: subtitle ? 'flex-end' : 'center', justifyContent: 'space-between', padding: '0 20px 12px' }}>
    <div>
      <h3 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: c('fg'), letterSpacing: -0.3 }}>{title}</h3>
      {subtitle && <div style={{ fontSize: 11, color: c('fg3'), marginTop: 2, fontWeight: 500 }}>{subtitle}</div>}
    </div>
    {action && (
      <button onClick={onAction} style={{
        background: 'transparent', border: 'none', color: pmBase.brand,
        fontSize: 13, fontWeight: 700, cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 2,
      }}>{action} <Icon name="chevronRight" size={14}/></button>
    )}
  </div>
);

// Enterprise additions
const StatTile = ({ label, value, sub, trend, icon, color = pmBase.brand }) => (
  <div style={{
    padding: 14, borderRadius: pmBase.r3, background: c('bg3'),
    border: `1px solid ${c('line')}`, position: 'relative', overflow: 'hidden',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
      <div style={{ width: 32, height: 32, borderRadius: 10, background: `${color}22`, color, display: 'grid', placeItems: 'center' }}>
        {icon && <Icon name={icon} size={16}/>}
      </div>
      {trend != null && (
        <span style={{ fontSize: 11, fontWeight: 700, color: trend > 0 ? pmBase.ok : pmBase.danger, display: 'flex', alignItems: 'center', gap: 2 }}>
          <Icon name={trend > 0 ? 'arrowUp' : 'arrowDown'} size={12}/>{Math.abs(trend)}%
        </span>
      )}
    </div>
    <div style={{ fontSize: 22, fontWeight: 800, color: c('fg'), marginTop: 10, letterSpacing: -0.5 }}>{value}</div>
    <div style={{ fontSize: 11, color: c('fg3'), fontWeight: 600 }}>{label}</div>
    {sub && <div style={{ fontSize: 10, color: c('fg4'), marginTop: 2 }}>{sub}</div>}
  </div>
);

// Counter animates on mount
const Counter = ({ value, duration = 900, prefix = '', suffix = '', decimals = 0 }) => {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const e = 1 - Math.pow(1 - t, 3);
      setN(value * e);
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, [value, duration]);
  return <>{prefix}{n.toLocaleString('az', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })}{suffix}</>;
};

// Segmented tabs (enterprise)
const Segmented = ({ tabs, value, onChange }) => (
  <div style={{ display: 'flex', gap: 4, background: c('bg3'), padding: 4, borderRadius: 12, border: `1px solid ${c('line')}` }}>
    {tabs.map(t => (
      <button key={t.id} onClick={() => onChange(t.id)} className="pm-tap-soft" style={{
        flex: 1, padding: '9px 10px', borderRadius: 9, border: 'none', cursor: 'pointer',
        background: value === t.id ? c('bg4') : 'transparent',
        color: value === t.id ? c('fg') : c('fg3'),
        fontSize: 12, fontWeight: 700, fontFamily: pmBase.font, letterSpacing: -0.1,
        boxShadow: value === t.id ? pmBase.shadow1 : 'none',
      }}>{t.label}</button>
    ))}
  </div>
);

Object.assign(window, { Icon, Card, Pill, Chip, Btn, IconBtn, Avatar, Progress, Ring, SectionHeader, StatTile, Counter, Segmented });