// Icons — clean stroke icons (Phosphor / Lucide style) + brand glyphs
// All sized to 1em so they scale via font-size or width/height.

const Icon = ({ d, fill, stroke = "currentColor", size = "1em", strokeWidth = 1.6, viewBox = "0 0 24 24", children, ...rest }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill || "none"} stroke={fill ? "none" : stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {d ? <path d={d} /> : children}
  </svg>
);

// ─── UI ──────────────────────────────────────────────────────
const IconDashboard = (p) => <Icon {...p}><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></Icon>;
const IconUsers = (p) => <Icon {...p}><circle cx="9" cy="9" r="3.2"/><path d="M3.5 19c.6-3 3-4.8 5.5-4.8s4.9 1.7 5.5 4.8"/><circle cx="17" cy="8" r="2.5"/><path d="M20.5 17.2c-.4-2-1.9-3.2-3.5-3.2"/></Icon>;
const IconKanban = (p) => <Icon {...p}><rect x="3" y="3" width="5" height="18" rx="1.5"/><rect x="10" y="3" width="5" height="12" rx="1.5"/><rect x="17" y="3" width="4" height="8" rx="1.5"/></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></Icon>;
const IconChart = (p) => <Icon {...p}><path d="M4 19V8M10 19v-6M16 19V4M22 19H2"/></Icon>;
const IconImport = (p) => <Icon {...p}><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconFilter = (p) => <Icon {...p}><path d="M3 5h18l-7 9v6l-4-2v-4z"/></Icon>;
const IconSort = (p) => <Icon {...p}><path d="M7 4v16M3 8l4-4 4 4M17 4v16M13 16l4 4 4-4"/></Icon>;
const IconColumns = (p) => <Icon {...p}><rect x="3" y="4" width="6" height="16" rx="1.5"/><rect x="11" y="4" width="6" height="16" rx="1.5"/><rect x="19" y="4" width="2" height="16" rx="1"/></Icon>;
const IconMore = (p) => <Icon {...p}><circle cx="5" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.5" fill="currentColor" stroke="none"/></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M18 6L6 18M6 6l12 12"/></Icon>;
const IconChevron = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const IconChevronDown = (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>;
const IconChevronLeft = (p) => <Icon {...p}><path d="M15 6l-6 6 6 6"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M5 12l5 5L20 7"/></Icon>;
const IconSun = (p) => <Icon {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></Icon>;
const IconMoon = (p) => <Icon {...p}><path d="M21 13a9 9 0 1 1-10-10 7 7 0 0 0 10 10z"/></Icon>;
const IconRefresh = (p) => <Icon {...p}><path d="M3 12a9 9 0 0 1 15.5-6.3L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.5 6.3L3 16M3 21v-5h5"/></Icon>;
const IconExternal = (p) => <Icon {...p}><path d="M14 4h6v6M20 4l-9 9M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/></Icon>;
const IconUpload = (p) => <Icon {...p}><path d="M12 16V4M7 9l5-5 5 5M5 21h14"/></Icon>;
const IconTrash = (p) => <Icon {...p}><path d="M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M10 11v6M14 11v6"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3l2.2 5.5L20 11l-5.8 2.5L12 19l-2.2-5.5L4 11l5.8-2.5z"/></Icon>;
const IconBell = (p) => <Icon {...p}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8M10 21a2 2 0 0 0 4 0"/></Icon>;
const IconMenuLeft = (p) => <Icon {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></Icon>;
const IconBookmark = (p) => <Icon {...p}><path d="M6 3h12v18l-6-4-6 4z"/></Icon>;
const IconMessage = (p) => <Icon {...p}><path d="M21 12c0 4.4-4 8-9 8a10 10 0 0 1-4-.8L3 21l1.8-4.5A8 8 0 0 1 3 12c0-4.4 4-8 9-8s9 3.6 9 8z"/></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></Icon>;
const IconPhone = (p) => <Icon {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L7.9 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z"/></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const IconPlay = (p) => <Icon {...p}><path d="M5 4v16l14-8z" fill="currentColor" stroke="none"/></Icon>;
const IconEye = (p) => <Icon {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></Icon>;
const IconLink = (p) => <Icon {...p}><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5"/></Icon>;
const IconLightning = (p) => <Icon {...p}><path d="M13 3L4 14h7l-1 7 9-11h-7z"/></Icon>;
const IconGlobe = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></Icon>;
const IconArrowUp = (p) => <Icon {...p}><path d="M12 19V5M5 12l7-7 7 7"/></Icon>;
const IconArrowDown = (p) => <Icon {...p}><path d="M12 5v14M19 12l-7 7-7-7"/></Icon>;
const IconStop = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M9 9h6v6H9z" fill="currentColor"/></Icon>;
const IconPlayBig = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M10 8l6 4-6 4z" fill="currentColor"/></Icon>;

// ─── Platform brand glyphs (rendered fully inside .platform-icon container) ───
const IconYT = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.6 7.2s-.2-1.4-.8-2c-.7-.8-1.5-.8-1.9-.9-2.7-.2-6.9-.2-6.9-.2s-4.2 0-6.9.2c-.4.1-1.2 0-1.9.9-.6.6-.8 2-.8 2S2 8.8 2 10.4v1.5C2 13.5 2.4 15 2.4 15s.2 1.4.8 2c.7.8 1.7.8 2.1.9 1.5.1 6.7.2 6.7.2s4.2 0 6.9-.2c.4-.1 1.2-.1 1.9-.9.6-.6.8-2 .8-2s.4-1.5.4-3.1v-1.5c0-1.6-.4-3.2-.4-3.2zM9.7 14.4V8.7l5.4 2.9z"/></svg>;
const IconTW = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 3v15h5v3h3l3-3h4l5-5V3H4zm17 9l-4 4h-4l-3 3v-3H7V5h14v7zm-5-4h-2v5h2V8zm-5 0H9v5h2V8z"/></svg>;
const IconTT = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.6 6.5c-1.7-.4-3-1.5-3.7-3H12v12.6c0 1.5-1.2 2.7-2.7 2.7-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7.3 0 .6 0 .9.1V9.9c-.3 0-.6-.1-.9-.1-3.4 0-6.2 2.8-6.2 6.2 0 3.4 2.8 6.2 6.2 6.2 3.4 0 6.2-2.8 6.2-6.2V9.7c1.4 1 3.1 1.6 5 1.6V7.7c-.4 0-.7-.4-.9-.5z"/></svg>;
const IconIG = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.6.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.6.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.3-.1-1.6-.1-4.9s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.9-.1zm0 1.8c-3.2 0-3.6 0-4.8.1-1.2.1-1.8.2-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.1.3-.3.9-.4 2.1-.1 1.2-.1 1.6-.1 4.8s0 3.6.1 4.8c.1 1.2.2 1.8.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.3.1.9.3 2.1.4 1.2.1 1.6.1 4.8.1s3.6 0 4.8-.1c1.2-.1 1.8-.2 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.1-.3.3-.9.4-2.1.1-1.2.1-1.6.1-4.8s0-3.6-.1-4.8c-.1-1.2-.2-1.8-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.3-.1-.9-.3-2.1-.4-1.2-.1-1.6-.1-4.8-.1zm0 3c2.7 0 5 2.2 5 5 0 2.7-2.2 5-5 5-2.7 0-5-2.2-5-5 0-2.7 2.2-5 5-5zm0 8.2c1.8 0 3.2-1.4 3.2-3.2s-1.4-3.2-3.2-3.2-3.2 1.4-3.2 3.2 1.4 3.2 3.2 3.2zm6.4-8.4c0 .6-.5 1.2-1.2 1.2-.7 0-1.2-.5-1.2-1.2 0-.7.5-1.2 1.2-1.2.7 0 1.2.5 1.2 1.2z"/></svg>;
const IconTG = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 4L2 11l6 2 2 7 4-5 6 5 2-16zm-4 3L9 14l-.5 4 2.5-3 4 3 3-11z"/></svg>;
const IconVK = () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.7 7.3c.1-.4 0-.7-.6-.7h-1.9c-.5 0-.7.3-.9.6 0 0-1 2.4-2.3 4-.5.4-.7.6-1 .6-.1 0-.3-.2-.3-.6V7.3c0-.5-.2-.7-.6-.7H9.2c-.3 0-.5.2-.5.4 0 .5.7.6.8 2v3c0 .6-.1.7-.4.7-.7 0-2.3-2.4-3.2-5.2-.2-.5-.4-.8-.9-.8H3.1c-.5 0-.6.3-.6.6 0 .5.7 3.1 3.1 6.5 1.6 2.4 3.9 3.7 6 3.7 1.2 0 1.4-.3 1.4-.7v-1.7c0-.5.1-.6.4-.6.3 0 .7.1 1.7 1 1.1 1.1 1.3 1.7 2 1.7h1.9c.5 0 .8-.3.6-.8-.2-.5-.9-1.2-1.7-2.1-.5-.5-1.1-1.1-1.3-1.4-.3-.4-.2-.5 0-.9 0 0 2.3-3.2 2.5-4.3z"/></svg>;

const PLATFORM_ICON = {
  youtube: IconYT,
  twitch: IconTW,
  tiktok: IconTT,
  instagram: IconIG,
  telegram: IconTG,
  vk: IconVK,
};

Object.assign(window, {
  Icon,
  IconDashboard, IconUsers, IconKanban, IconCalendar, IconChart, IconImport, IconSettings,
  IconSearch, IconPlus, IconFilter, IconSort, IconColumns, IconMore, IconClose,
  IconChevron, IconChevronDown, IconChevronLeft, IconCheck,
  IconSun, IconMoon, IconRefresh, IconExternal, IconUpload, IconTrash, IconSparkle,
  IconBell, IconMenuLeft, IconBookmark, IconMessage, IconMail, IconPhone, IconClock,
  IconPlay, IconEye, IconLink, IconLightning, IconGlobe, IconArrowUp, IconArrowDown,
  IconStop, IconPlayBig,
  PLATFORM_ICON,
});
