/* ═══════════════════════════════════════════════════════
   ICONS · curated SVG library
═══════════════════════════════════════════════════════ */
const Icon = ({ name, size = 22, ...rest }) => {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest };
  switch (name) {
    case 'menu': return <svg {...props}><path d="M4 7h16M4 12h16M4 17h10"/></svg>;
    case 'close': return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'back': return <svg {...props}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'home': return <svg {...props}><path d="M3 11l9-7 9 7v9a2 2 0 01-2 2h-4v-7H10v7H5a2 2 0 01-2-2v-9z"/></svg>;
    case 'trophy': return <svg {...props}><path d="M8 4h8v6a4 4 0 01-8 0V4z"/><path d="M5 4h3v3a3 3 0 01-3-3zM19 4h-3v3a3 3 0 003-3z"/><path d="M10 14v3M14 14v3M8 20h8"/></svg>;
    case 'cards': return <svg {...props}><rect x="3" y="5" width="11" height="15" rx="2" transform="rotate(-8 8.5 12.5)"/><rect x="10" y="4" width="11" height="15" rx="2" transform="rotate(8 15.5 11.5)"/></svg>;
    case 'wallet': return <svg {...props}><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M3 10h18M17 15h.01"/></svg>;
    case 'users': return <svg {...props}><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.6"/><path d="M14.7 14.5c2.6.5 5.3 1.9 5.3 5"/></svg>;
    case 'user': return <svg {...props}><circle cx="12" cy="8" r="3.6"/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6"/></svg>;
    case 'settings': return <svg {...props}><circle cx="12" cy="12" r="2.6"/><path d="M19.4 14a1.5 1.5 0 00.3 1.65l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.5 1.5 0 00-1.65-.3 1.5 1.5 0 00-.91 1.37V20a2 2 0 11-4 0v-.09a1.5 1.5 0 00-1-1.37 1.5 1.5 0 00-1.65.3l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.5 1.5 0 00.3-1.65 1.5 1.5 0 00-1.37-.91H4a2 2 0 110-4h.09a1.5 1.5 0 001.37-1 1.5 1.5 0 00-.3-1.65l-.06-.06A2 2 0 117.93 4.6l.06.06a1.5 1.5 0 001.65.3H10A1.5 1.5 0 0011 3.6V4a2 2 0 014 0v.09a1.5 1.5 0 00.91 1.37 1.5 1.5 0 001.65-.3l.06-.06A2 2 0 1120.45 7.93l-.06.06a1.5 1.5 0 00-.3 1.65V10a1.5 1.5 0 001.37.91H22a2 2 0 010 4h-.09a1.5 1.5 0 00-1.37.91z"/></svg>;
    case 'plus': return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'check': return <svg {...props}><path d="M5 12l5 5 9-11"/></svg>;
    case 'chevron': return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-down': return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'bell': return <svg {...props}><path d="M6 8a6 6 0 0112 0v5l1.5 3h-15L6 13V8z"/><path d="M10 19a2 2 0 004 0"/></svg>;
    case 'search': return <svg {...props}><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg>;
    case 'logout': return <svg {...props}><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>;
    case 'share': return <svg {...props}><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.1 11l7.8-4M8.1 13l7.8 4"/></svg>;
    case 'qr': return <svg {...props}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM20 14v3M14 20h7"/></svg>;
    case 'edit': return <svg {...props}><path d="M3 21l3-1 11-11-2-2L4 18l-1 3z"/><path d="M14 6l4 4"/></svg>;
    case 'trash': return <svg {...props}><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>;
    case 'sun': return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>;
    case 'moon': return <svg {...props}><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>;
    case 'spark': return <svg {...props}><path d="M12 3l1.6 5.2L19 10l-5.4 1.8L12 17l-1.6-5.2L5 10l5.4-1.8L12 3z"/></svg>;
    case 'fire': return <svg {...props}><path d="M12 22c5 0 7-4 7-7 0-3-2-5-3.5-6.5-1 .5-1.5 2-1.5 3 0-2-1.5-5-3-7-1 3-5 5-5 9 0 4 2.5 8.5 6 8.5z"/></svg>;
    case 'chart': return <svg {...props}><path d="M3 20h18"/><path d="M4 17l5-8 4 5 7-10"/></svg>;
    case 'clock': return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'pin': return <svg {...props}><path d="M12 21s-7-6.5-7-12a7 7 0 0114 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.6"/></svg>;
    case 'calendar': return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'crown': return <svg {...props}><path d="M3 8l4 4 5-7 5 7 4-4-2 11H5L3 8z"/></svg>;
    case 'skull': return <svg {...props}><path d="M5 11a7 7 0 1114 0v3l-1 2v3h-3l-1-2-1 2h-2l-1-2-1 2H6v-3l-1-2v-3z"/><circle cx="9.5" cy="11.5" r="1.4"/><circle cx="14.5" cy="11.5" r="1.4"/></svg>;
    case 'hourglass': return <svg {...props}><path d="M7 3h10v3l-4 6 4 6v3H7v-3l4-6-4-6V3z"/></svg>;
    case 'flame': return <svg {...props}><path d="M12 22c4 0 6-3 6-6 0-3-3-5-3-8 0 2-1 3-2 4 0-3-1-6-3-9-1 3-4 5-4 9 0 5 2 10 6 10z"/></svg>;
    case 'star': return <svg {...props}><path d="M12 3l2.8 6 6.4.9-4.6 4.5 1.1 6.4L12 17.8 6.3 20.8l1.1-6.4L2.8 9.9l6.4-.9L12 3z"/></svg>;
    case 'eye': return <svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'camera': return <svg {...props}><path d="M4 7h3l2-2h6l2 2h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2z"/><circle cx="12" cy="13" r="3.5"/></svg>;
    case 'lock': return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case 'mail': return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-up': return <svg {...props}><path d="M12 19V5M6 11l6-6 6 6"/></svg>;
    case 'arrow-down': return <svg {...props}><path d="M12 5v14M18 13l-6 6-6-6"/></svg>;
    case 'minus': return <svg {...props}><path d="M5 12h14"/></svg>;
    case 'filter': return <svg {...props}><path d="M3 5h18l-7 9v6l-4-2v-4L3 5z"/></svg>;
    case 'play': return <svg {...props}><path d="M6 4l14 8-14 8V4z"/></svg>;
    case 'stop': return <svg {...props}><rect x="5" y="5" width="14" height="14" rx="2"/></svg>;
    default: return null;
  }
};

/* Suit glyphs as proper shapes (not emoji) */
const Suit = ({ kind = 'spade', size = 14, ...rest }) => {
  const s = { width: size, height: size, viewBox: '0 0 24 24', fill: 'currentColor', ...rest };
  switch (kind) {
    case 'spade': return <svg {...s}><path d="M12 2c4 5 8 8 8 12a5 5 0 01-7 4.6c.5 1.6 1.4 2.6 2.4 3.4H8.6c1-.8 1.9-1.8 2.4-3.4A5 5 0 014 14c0-4 4-7 8-12z"/></svg>;
    case 'heart': return <svg {...s}><path d="M12 21s-9-6-9-12a5 5 0 019-3 5 5 0 019 3c0 6-9 12-9 12z"/></svg>;
    case 'diamond': return <svg {...s}><path d="M12 2l8 10-8 10-8-10 8-10z"/></svg>;
    case 'club': return <svg {...s}><circle cx="12" cy="7.5" r="3.5"/><circle cx="7.5" cy="13" r="3.5"/><circle cx="16.5" cy="13" r="3.5"/><path d="M10.5 14h3l-.5 4c.6 1.6 1.5 2.6 2.5 3.4H8.5c1-.8 1.9-1.8 2.5-3.4l-.5-4z"/></svg>;
    default: return null;
  }
};

/* Logo lockup - "Royal Flush" identity */
const Logo = ({ size = 'md', variant = 'stack', tone = 'default' }) => {
  // variant: stack (logo + wordmark) | mark (icon only) | wordmark
  const dim = size === 'lg' ? 64 : size === 'sm' ? 28 : 44;
  const titleSize = size === 'lg' ? 26 : size === 'sm' ? 14 : 18;
  const subSize = size === 'lg' ? 11 : size === 'sm' ? 7 : 9;
  const goldClass = tone === 'mono' ? '' : 'grad-gold';
  const mark = (
    <svg width={dim} height={dim} viewBox="0 0 64 64" style={{ filter: 'drop-shadow(0 4px 12px rgba(212,175,55,0.3))' }}>
      <defs>
        <linearGradient id="lg-gold" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--gold-1)"/>
          <stop offset="60%" stopColor="var(--gold)"/>
          <stop offset="100%" stopColor="var(--gold-deep)"/>
        </linearGradient>
        <linearGradient id="lg-red" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="var(--red-1)"/>
          <stop offset="100%" stopColor="var(--red-deep)"/>
        </linearGradient>
      </defs>
      {/* outer ring */}
      <circle cx="32" cy="32" r="30" fill="none" stroke="url(#lg-gold)" strokeWidth="1.5" opacity="0.5"/>
      <circle cx="32" cy="32" r="26" fill="none" stroke="url(#lg-gold)" strokeWidth="0.6" opacity="0.7"/>
      {/* layered suit composition */}
      <g transform="translate(32 33)">
        <path d="M0 -14c4 5 8 8 8 12a5 5 0 01-7 4.6c.5 1.6 1.4 2.6 2.4 3.4h-6.8c1-.8 1.9-1.8 2.4-3.4A5 5 0 01-8 -2c0-4 4-7 8-12z"
              fill="url(#lg-gold)" transform="scale(1.05)"/>
        <path d="M0 -3 L 5 4 L 0 11 L -5 4 Z" fill="url(#lg-red)" opacity="0.95"/>
      </g>
      {/* corner pips */}
      <text x="9" y="14" fontSize="7" fill="var(--gold)" fontFamily="Cinzel" fontWeight="700">SCP</text>
      <text x="48" y="58" fontSize="7" fill="var(--gold)" fontFamily="Cinzel" fontWeight="700" textAnchor="middle">♠</text>
    </svg>
  );
  if (variant === 'mark') return mark;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      {mark}
      <div style={{ lineHeight: 1 }}>
        <div className={`font-display ${goldClass}`}
             style={{ fontSize: titleSize, letterSpacing: '0.18em', fontWeight: 800 }}>
          STACK&nbsp;CONTROL
        </div>
        <div className="font-display"
             style={{ fontSize: subSize, letterSpacing: '0.55em', color: 'var(--ink-3)', marginTop: 4 }}>
          POKER&nbsp;CLUB
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Icon, Suit, Logo });