/* ============================================================
   Icons — brand marks (Kick, Instagram, Facebook, TikTok,
   WhatsApp) + UI glyphs. Brand marks are filled; UI glyphs
   are 1.8-weight strokes. All inherit currentColor.
   ============================================================ */
const S = ({ children, fill, vb = '0 0 24 24', ...p }) => (
  <svg viewBox={vb} fill={fill ? 'currentColor' : 'none'}
       stroke={fill ? 'none' : 'currentColor'} strokeWidth="1.8"
       strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...p}>
    {children}
  </svg>
);

const Icon = {
  /* ---------- brand ---------- */
  Kick: () => (
    <S fill vb="0 0 32 32">
      <path d="M0 0h9.6v6.4h3.2V3.2h3.2V0H25.6v9.6h-3.2v3.2h-3.2v3.2h3.2v3.2h3.2V32H16v-3.2h-3.2v-3.2H9.6V32H0z"/>
    </S>
  ),
  Instagram: () => (
    <S>
      <rect x="2.5" y="2.5" width="19" height="19" rx="5.4"/>
      <circle cx="12" cy="12" r="4.3"/>
      <circle cx="17.4" cy="6.6" r="1.15" fill="currentColor" stroke="none"/>
    </S>
  ),
  Facebook: () => (
    <S fill>
      <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.313 0 2.686.235 2.686.235v2.969h-1.513c-1.49 0-1.955.93-1.955 1.886v2.266h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
    </S>
  ),
  TikTok: () => (
    <S fill>
      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
    </S>
  ),
  WhatsApp: () => (
    <S fill>
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.885-9.886 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.142 1.595 5.945L0 24l6.305-1.654a11.96 11.96 0 0 0 5.734 1.459h.005c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411"/>
    </S>
  ),

  /* ---------- UI ---------- */
  Crown: () => (<S><path d="M3 17h18M4 17l-1.4-8.5 5 3.5L12 5l4.4 7 5-3.5L20 17"/></S>),
  Star: () => (<S fill><path d="M12 2.5l2.6 6.3 6.8.5-5.2 4.4 1.7 6.6L12 17.3 6.1 20.8l1.7-6.6L2.6 9.8l6.8-.5z"/></S>),
  Shield: () => (<S><path d="M12 2.5l8 3v5.6c0 5-3.4 8.6-8 10.4-4.6-1.8-8-5.4-8-10.4V5.5z"/></S>),
  Flame: () => (<S><path d="M12 2.5c.6 3-1.8 4.3-1.8 6.6 0 1 .5 1.6 1 2 .2-1.3 1-2.2 1.9-2.7-.3 1.6.6 2.3 1.5 3.4.7.9 1.2 1.9 1.2 3.2A5.8 5.8 0 1 1 6.5 14c0-2.4 1.4-3.8 2.7-5.4C10.9 6.6 12.3 4.9 12 2.5z"/></S>),
  Eye: () => (<S><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></S>),
  Gamepad: () => (<S><path d="M7 11h4M9 9v4M15.5 10.5h.01M18 12.5h.01"/><path d="M7.5 6.5h9a4.5 4.5 0 0 1 4.4 3.6l1 5.1A2.6 2.6 0 0 1 17.4 18l-1.5-2.2a2 2 0 0 0-1.7-.9H9.8a2 2 0 0 0-1.7.9L6.6 18a2.6 2.6 0 0 1-4.9-1.8l1-5.1A4.5 4.5 0 0 1 7.5 6.5z"/></S>),
  Refresh: () => (<S><path d="M20 11a8 8 0 0 0-14.3-4.6M4 5v3.5h3.5M4 13a8 8 0 0 0 14.3 4.6M20 19v-3.5h-3.5"/></S>),
  Arrow: () => (<S><path d="M5 12h13M13 6l6 6-6 6"/></S>),
  Ext: () => (<S><path d="M14 4h6v6M20 4l-9 9M18 13v6H5V6h6"/></S>),
  Play: () => (<S fill><path d="M8 5v14l11-7z"/></S>),
  Bolt: () => (<S fill><path d="M13 2L4.5 13.5H11L10 22l8.5-11.5H12z"/></S>),
  Users: () => (<S><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19a5.5 5.5 0 0 1 11 0M16 5.2a3.2 3.2 0 0 1 0 6.1M17.5 19a5.5 5.5 0 0 0-2.3-4.5"/></S>),
  Sparkle: () => (<S fill><path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6z"/></S>),
  Close: () => (<S><path d="M6 6l12 12M18 6L6 18"/></S>),
  Sliders: () => (<S><path d="M4 8h10M18 8h2M4 16h2M10 16h10"/><circle cx="16" cy="8" r="2"/><circle cx="8" cy="16" r="2"/></S>),
  Chevron: () => (<S><path d="M6 9l6 6 6-6"/></S>),
  Globe: () => (<S><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15.5 0 18M12 3c-2.5 2.5-2.5 15.5 0 18"/></S>),
  VolOn: () => (<S><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" stroke="none"/><path d="M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/></S>),
  VolOff: () => (<S><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor" stroke="none"/><path d="M22 9l-5 6M17 9l5 6"/></S>),
  Pin: () => (<S><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.6"/></S>),
};

window.Icon = Icon;
