// ERP Vision — shared UI components
const { useState, useEffect, useRef } = React;

/* ---------- Icons ---------- */
const ICONS = {
  grid: <g><rect x="4" y="4" width="7" height="7" rx="1.6"></rect><rect x="13" y="4" width="7" height="7" rx="1.6"></rect><rect x="4" y="13" width="7" height="7" rx="1.6"></rect><rect x="13" y="13" width="7" height="7" rx="1.6"></rect></g>,
  ledger: <g><rect x="5" y="3.5" width="14" height="17" rx="2"></rect><path d="M9 8h6M9 12h6M9 16h3.5"></path></g>,
  box: <g><path d="M21 8l-9-5-9 5 9 5 9-5z"></path><path d="M3 8v8l9 5 9-5V8"></path><path d="M12 13v8"></path></g>,
  users: <g><circle cx="9" cy="7.5" r="3.5"></circle><path d="M2.5 20.5v-1.5a4.5 4.5 0 0 1 4.5-4.5h4a4.5 4.5 0 0 1 4.5 4.5v1.5"></path><path d="M16 4.6a3.5 3.5 0 0 1 0 5.8M18.5 14.7a4.5 4.5 0 0 1 3 4.3v1.5"></path></g>,
  building: <g><path d="M3 21h18"></path><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16"></path><path d="M9 7h1.5M13.5 7H15M9 11h1.5M13.5 11H15M9 15h1.5M13.5 15H15"></path></g>,
  file: <g><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"></path><path d="M14 3v5h5"></path></g>,
  download: <g><path d="M12 4v11M7 11l5 5 5-5"></path><path d="M5 20h14"></path></g>,
  search: <g><circle cx="11" cy="11" r="6.5"></circle><path d="M21 21l-4.4-4.4"></path></g>,
  plus: <g><path d="M12 5v14M5 12h14"></path></g>,
  x: <g><path d="M18 6L6 18M6 6l12 12"></path></g>,
  menu: <g><path d="M4 7h16M4 12h16M4 17h16"></path></g>,
  chevD: <g><path d="M6 9l6 6 6-6"></path></g>,
  chevR: <g><path d="M9 6l6 6-6 6"></path></g>,
  upRight: <g><path d="M7 17L17 7M8 7h9v9"></path></g>,
  downRight: <g><path d="M7 7l10 10M17 8v9H8"></path></g>,
  check: <g><path d="M5 13l4 4L19 7"></path></g>,
  calendar: <g><rect x="3.5" y="5" width="17" height="15.5" rx="2"></rect><path d="M16 3v4M8 3v4M3.5 11h17"></path></g>,
  filter: <g><path d="M4 6h16M7 12h10M10 18h4"></path></g>,
  sliders: <g><path d="M4 8h10M18 8h2M4 16h2M10 16h10"></path><circle cx="16" cy="8" r="2.2"></circle><circle cx="8" cy="16" r="2.2"></circle></g>,
  alert: <g><path d="M12 3.5l9.5 16.5h-19z"></path><path d="M12 10v4.5M12 17.6h.01"></path></g>,
  send: <g><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"></path></g>,
  clock: <g><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5V12l3 2.5"></path></g>,
  bell: <g><path d="M18 8.5a6 6 0 0 0-12 0c0 6.5-2.5 8-2.5 8h17S18 15 18 8.5"></path><path d="M13.7 20.5a2 2 0 0 1-3.4 0"></path></g>,
  command: <g><path d="M9 9V6a3 3 0 1 0-3 3h3zM15 9h3a3 3 0 1 0-3-3v3zM15 15v3a3 3 0 1 0 3-3h-3zM9 15H6a3 3 0 1 0 3 3v-3z"></path><rect x="9" y="9" width="6" height="6"></rect></g>,
  cog: <g><circle cx="12" cy="12" r="3.1"></circle><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1-1.55 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09a1.7 1.7 0 0 0 1.55-1 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.87.34h.09a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.55 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.87v.09a1.7 1.7 0 0 0 1.55 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.55 1z"></path></g>,
  spark: <g><path d="M12 3l1.8 5.7L19.5 10l-5.7 1.8L12 17.5l-1.8-5.7L4.5 10l5.7-1.3z"></path></g>,
  moon: <g><path d="M20 13.2A8 8 0 1 1 10.8 4a6.4 6.4 0 0 0 9.2 9.2z"></path></g>,
  user: <g><circle cx="12" cy="8" r="3.6"></circle><path d="M5 20c.8-3.6 3.6-5.4 7-5.4s6.2 1.8 7 5.4"></path></g>,
  edit: <g><path d="M4 20l.9-3.6L15.6 5.7a2 2 0 0 1 2.8 0l-.1-.1a2 2 0 0 1 0 2.8L7.6 19.1z"></path><path d="M13.5 7.5l3 3"></path></g>,
  sun: <g><circle cx="12" cy="12" r="4"></circle><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8"></path></g>,
  target: <g><circle cx="12" cy="12" r="8.5"></circle><circle cx="12" cy="12" r="4.8"></circle><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"></circle></g>,
  dot: <g><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"></circle></g>,
  shield: <g><path d="M12 3l7.5 2.7v5.4c0 4.6-3.2 7.9-7.5 9.4-4.3-1.5-7.5-4.8-7.5-9.4V5.7L12 3z"></path><path d="M9 11.8l2 2 4-4.2"></path></g>,
  lock: <g><rect x="5" y="11" width="14" height="9" rx="2"></rect><path d="M8 11V8a4 4 0 0 1 8 0v3"></path></g>,
  mail: <g><rect x="3" y="5" width="18" height="14" rx="2.2"></rect><path d="M4 7l8 5.5L20 7"></path></g>,
  key: <g><circle cx="8" cy="8" r="4"></circle><path d="M11 11l8 8M16 16l2-2M19 19l1.5-1.5"></path></g>,
  trash: <g><path d="M4 7h16M9 7V5a1.6 1.6 0 0 1 1.6-1.6h2.8A1.6 1.6 0 0 1 15 5v2M6.5 7l.8 12.2a1.6 1.6 0 0 0 1.6 1.5h6.2a1.6 1.6 0 0 0 1.6-1.5L18.5 7"></path></g>,
  ban: <g><circle cx="12" cy="12" r="8.5"></circle><path d="M6 6l12 12"></path></g>,
  minus: <g><path d="M5 12h14"></path></g>,
  tag: <g><path d="M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V5a2 2 0 0 1 2-2h8l7.6 7.6a2 2 0 0 1 0 2.8z"></path><circle cx="7.5" cy="7.5" r="1.4" fill="currentColor" stroke="none"></circle></g>,
  image: <g><rect x="3.5" y="4.5" width="17" height="15" rx="2"></rect><circle cx="9" cy="9.5" r="1.7"></circle><path d="M20.5 15l-4.3-4.3L7.5 19.5"></path></g>,
  chart: <g><path d="M4 20V4M4 20h16"></path><rect x="7.5" y="11" width="2.6" height="6" rx="0.6" fill="currentColor" stroke="none"></rect><rect x="12" y="7.5" width="2.6" height="9.5" rx="0.6" fill="currentColor" stroke="none"></rect><rect x="16.5" y="13" width="2.6" height="4" rx="0.6" fill="currentColor" stroke="none"></rect></g>,
  globe: <g><circle cx="12" cy="12" r="8.5"></circle><path d="M3.5 12h17"></path><path d="M12 3.5c2.2 2.3 3.4 5.3 3.4 8.5S14.2 18.2 12 20.5c-2.2-2.3-3.4-5.3-3.4-8.5S9.8 5.8 12 3.5z"></path></g>,
  /* drawn LTR (door left, arrow leaving right); the RTL sheet mirrors it */
  logout: <g><path d="M9.5 3.5H6a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h3.5"></path><path d="M14 8l4 4-4 4M18 12H9.5"></path></g>
};
function Icon({ name, size = 18, stroke = 1.7, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {ICONS[name] || null}
    </svg>
  );
}


Object.assign(window, { ICONS, Icon });