// Inline SVG icons — stroke-based, sized via `size` prop. Color inherits via currentColor.
const Icon = ({ children, size = 16, stroke = 1.6, className = "", style }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
    className={className} style={style} aria-hidden="true"
  >
    {children}
  </svg>
);

const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8" r="3.5"/><path d="M4.5 20c1.4-3.6 4.4-5.5 7.5-5.5s6.1 1.9 7.5 5.5"/></Icon>;
const IconKey = (p) => <Icon {...p}><circle cx="9" cy="14" r="3.5"/><path d="M11.5 11.5 20 3"/><path d="M17 6l2 2"/><path d="M15 8l2 2"/></Icon>;
const IconPlug = (p) => <Icon {...p}><path d="M9 3v4"/><path d="M15 3v4"/><path d="M7 7h10v4a5 5 0 0 1-10 0V7Z"/><path d="M12 16v5"/></Icon>;
const IconUpload = (p) => <Icon {...p}><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></Icon>;
const IconFolder = (p) => <Icon {...p}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/></Icon>;
const IconCpu = (p) => <Icon {...p}><rect x="6" y="6" width="12" height="12" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3"/></Icon>;
const IconBuilding = (p) => <Icon {...p}><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/></Icon>;
const IconUsers = (p) => <Icon {...p}><circle cx="9" cy="9" r="3"/><path d="M3 19c1.2-3 3.6-4.5 6-4.5s4.8 1.5 6 4.5"/><circle cx="17" cy="8" r="2.5"/><path d="M16 14.5c2.6 0 4.6 1.4 5.5 4"/></Icon>;
const IconCard = (p) => <Icon {...p}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><path d="M7 15h3"/></Icon>;
const IconChart = (p) => <Icon {...p}><path d="M4 20V8"/><path d="M10 20V4"/><path d="M16 20v-7"/><path d="M22 20H2"/></Icon>;
const IconFile = (p) => <Icon {...p}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5"/></Icon>;
const IconChevR = (p) => <Icon {...p}><path d="m9 6 6 6-6 6"/></Icon>;
const IconChevD = (p) => <Icon {...p}><path d="m6 9 6 6 6-6"/></Icon>;
const IconChevL = (p) => <Icon {...p}><path d="m15 6-6 6 6 6"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconPencil = (p) => <Icon {...p}><path d="M4 20h4l11-11-4-4L4 16v4Z"/><path d="m13.5 6.5 4 4"/></Icon>;
const IconInfo = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h1v5h1"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="m5 12 5 5L20 7"/></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M6 6l12 12M18 6 6 18"/></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4-4"/></Icon>;
const IconBell = (p) => <Icon {...p}><path d="M6 9a6 6 0 0 1 12 0v4l2 3H4l2-3V9Z"/><path d="M10 19a2 2 0 0 0 4 0"/></Icon>;
const IconQuestion = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4"/><path d="M12 17h.01"/></Icon>;
const IconCopy = (p) => <Icon {...p}><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></Icon>;
const IconTrash = (p) => <Icon {...p}><path d="M4 7h16"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><path d="M6 7v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7"/><path d="M10 11v6M14 11v6"/></Icon>;
const IconMore = (p) => <Icon {...p}><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3 1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></Icon>;
const IconExternal = (p) => <Icon {...p}><path d="M14 4h6v6"/><path d="M20 4 10 14"/><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5"/></Icon>;
const IconDownload = (p) => <Icon {...p}><path d="M12 4v12"/><path d="m7 11 5 5 5-5"/><path d="M4 20h16"/></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const IconPalette = (p) => <Icon {...p}><path d="M12 3a9 9 0 1 0 0 18c1.5 0 2.5-1 2.5-2.3 0-.7-.3-1.3-.8-1.7-.5-.5-.7-1-.7-1.5 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4A9 9 0 0 0 12 3Z"/><circle cx="7.5" cy="11" r="1"/><circle cx="9.5" cy="7" r="1"/><circle cx="14.5" cy="7" r="1"/><circle cx="16.5" cy="11" r="1"/></Icon>;
const IconMenu = (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>;
const IconArrowL = (p) => <Icon {...p}><path d="M19 12H5"/><path d="m12 5-7 7 7 7"/></Icon>;
const IconShield = (p) => <Icon {...p}><path d="M12 3 5 6v6c0 4.5 3 8.4 7 9 4-.6 7-4.5 7-9V6l-7-3Z"/></Icon>;
const IconCommand = (p) => <Icon {...p}><path d="M9 6V4.5A1.5 1.5 0 1 1 10.5 6H9Zm0 0v3m0 9v1.5A1.5 1.5 0 1 1 7.5 18H9Zm0 0v-3m6-6h1.5A1.5 1.5 0 1 1 15 7.5V6Zm0 0H9m6 6v3m0 3v1.5A1.5 1.5 0 1 0 16.5 18H15Zm0 0H9m0 0v3m-3-3h12"/></Icon>;
const IconLogout = (p) => <Icon {...p}><path d="M9 5H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3"/><path d="m16 8 4 4-4 4"/><path d="M20 12H10"/></Icon>;
const IconWebhook = (p) => <Icon {...p}><circle cx="6.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/><circle cx="12" cy="6" r="2.5"/><path d="M8.5 17.5h6"/><path d="m11 8 -3 5"/><path d="m13 8 3 5"/></Icon>;
const IconList = (p) => <Icon {...p}><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></Icon>;

// Brand logo — compact catalogue mark
const Logo = ({ size = 28, accent }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <rect x="6" y="5" width="16" height="22" rx="3" stroke="var(--ink)" strokeWidth="2.4"/>
    <path d="M11 11h6M11 16h10M11 21h7" stroke={accent || "var(--accent)"} strokeWidth="2.4" strokeLinecap="round"/>
    <path d="M23 9h3v16a2 2 0 0 1-2 2h-3" stroke={accent || "var(--accent)"} strokeWidth="2.4" strokeLinecap="round"/>
  </svg>
);

Object.assign(window, {
  Icon, IconUser, IconKey, IconPlug, IconUpload, IconFolder, IconCpu, IconBuilding,
  IconUsers, IconCard, IconChart, IconFile, IconChevR, IconChevD, IconChevL, IconPlus,
  IconPencil, IconInfo, IconCheck, IconClose, IconSearch, IconBell, IconQuestion,
  IconCopy, IconTrash, IconMore, IconSettings, IconExternal, IconDownload, IconClock,
  IconPalette, IconMenu, IconArrowL, IconShield, IconCommand, IconLogout, IconWebhook, IconList, Logo
});
