// Brand-colored platform icons — inline SVGs.
// Each icon renders at the requested size and uses its own brand color
// via CSS var/fill so we can "blend" them with each button.

const TikTokIcon = ({ size = 22 }) => (
  // Two-tone TikTok glyph (cyan/magenta/white)
  <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
    <path d="M19.6 5.8a5.3 5.3 0 01-3.8-1.8 5.4 5.4 0 01-1.3-3.3h-3.6v14.6a2.9 2.9 0 11-2.1-2.8v-3.7A6.6 6.6 0 106 20.3a6.6 6.6 0 008.5-6.3V8.8a8.9 8.9 0 005.1 1.6V6.8a5.5 5.5 0 01-.1-1z" fill="currentColor"/>
  </svg>
);

const XIcon = ({ size = 20 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M18.9 2.3h3.3l-7.2 8.2 8.5 11.2h-6.7l-5.2-6.8-6 6.8H2.3l7.7-8.8L1.9 2.3h6.9l4.7 6.2zm-1.2 17.5h1.8L6.4 4.2H4.5z"/>
  </svg>
);

const InstagramIcon = ({ size = 20 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
  </svg>
);

const YouTubeIcon = ({ size = 22 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M23.5 6.5a3 3 0 00-2.1-2.1C19.5 4 12 4 12 4s-7.5 0-9.4.4A3 3 0 00.5 6.5 31 31 0 000 12a31 31 0 00.5 5.5 3 3 0 002.1 2.1C4.5 20 12 20 12 20s7.5 0 9.4-.4a3 3 0 002.1-2.1A31 31 0 0024 12a31 31 0 00-.5-5.5zM9.75 15.5v-7l6.5 3.5-6.5 3.5z"/>
  </svg>
);

const SpotifyIcon = ({ size = 20 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm4.6 14.4a.6.6 0 01-.9.2c-2.4-1.5-5.5-1.8-9.1-1a.6.6 0 11-.3-1.2c3.9-.9 7.3-.5 10 1.1.3.2.4.6.3.9zm1.2-2.7a.8.8 0 01-1.1.3c-2.8-1.7-7-2.2-10.3-1.2a.8.8 0 11-.4-1.5c3.8-1.1 8.4-.6 11.6 1.3.3.2.4.7.2 1.1zm.1-2.8c-3.3-2-8.9-2.2-12.1-1.2a.9.9 0 11-.6-1.8c3.7-1.1 9.9-.9 13.7 1.4a.9.9 0 01-1 1.6z"/>
  </svg>
);

// Minimal outline heart + paper-plane-ish mail, kept for secondary utility.
// We just reuse lucide Mail + Gift via window.lucide when needed.

Object.assign(window, { TikTokIcon, XIcon, InstagramIcon, YouTubeIcon, SpotifyIcon });
