// Monochrome social / streaming icons. Stroke-based, white, line.
// Drawn as simple geometric glyphs inspired by each platform but not branded marks.

const Icon = ({ children, size = 18, className = '', ...rest }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.4"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    {...rest}
  >
    {children}
  </svg>
);

const IconInstagram = (p) => (
  <Icon {...p}>
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" />
  </Icon>
);

const IconYouTube = (p) => (
  <Icon {...p}>
    <rect x="2.5" y="6" width="19" height="12" rx="3" />
    <path d="M10 9.5 L15 12 L10 14.5 Z" fill="currentColor" stroke="none" />
  </Icon>
);

const IconSpotify = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M7 9.5 C10.5 8.5 14 9 17 10.5" />
    <path d="M7.5 12.5 C10.5 11.8 13.5 12.2 16 13.5" />
    <path d="M8 15.2 C10.5 14.8 12.8 15 15 16" />
  </Icon>
);

const IconAppleMusic = (p) => (
  <Icon {...p}>
    <path d="M9 17 V8 L17 6.5 V15" />
    <circle cx="7.5" cy="17" r="1.8" />
    <circle cx="15.5" cy="15" r="1.8" />
  </Icon>
);

const IconSoundCloud = (p) => (
  <Icon {...p}>
    <path d="M4 15 V11" />
    <path d="M6.5 16 V10" />
    <path d="M9 16.5 V8.5" />
    <path d="M11.5 16.5 V7" />
    <path d="M14 16.5 V6.5 C16.5 6.5 18 8 18.2 10.5 C19.5 10.7 20.5 12 20.5 13.5 C20.5 15.2 19.2 16.5 17.5 16.5 Z" />
  </Icon>
);

const IconFacebook = (p) => (
  <Icon {...p}>
    <path d="M14 21 V13 H16.5 L17 10 H14 V8.2 C14 7.3 14.3 7 15.2 7 H17 V4.2 C16.5 4.1 15.5 4 14.5 4 C12.3 4 11 5.3 11 7.7 V10 H9 V13 H11 V21" />
  </Icon>
);

const IconTikTok = (p) => (
  <Icon {...p}>
    <path d="M13 3 V15.5 A3.5 3.5 0 1 1 9.5 12" />
    <path d="M13 3 C13.5 5.5 15.2 7.2 18 7.5" />
  </Icon>
);

const IconAmazonMusic = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M9 10 V14 M9 10 C9 9 10 8.5 11 8.5 C12 8.5 13 9 13 10 V14 M13 11 C13 11 11.5 11.2 10.5 11.8 C9.8 12.2 9.5 13 10 13.6 C10.6 14.3 12 14 13 13" />
    <path d="M6 16.5 C9 18 15 18 18 16.5" />
  </Icon>
);

const IconCDBaby = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <circle cx="12" cy="12" r="2" />
    <path d="M12 3 A9 9 0 0 1 21 12" />
  </Icon>
);

const IconArrow = (p) => (
  <Icon {...p}>
    <path d="M5 12 H19" />
    <path d="M13 6 L19 12 L13 18" />
  </Icon>
);

const IconPlay = (p) => (
  <Icon {...p}>
    <path d="M8 5 L19 12 L8 19 Z" fill="currentColor" />
  </Icon>
);

Object.assign(window, {
  IconInstagram, IconYouTube, IconSpotify, IconAppleMusic,
  IconSoundCloud, IconFacebook, IconTikTok, IconAmazonMusic,
  IconCDBaby, IconArrow, IconPlay,
});