// Icon library — pure SVG, no emojis
const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.6 }) => {
  const sw = strokeWidth;
  const icons = {
    package: <><path d="M21 8L12 3 3 8m18 0v8l-9 5-9-5V8m18 0l-9 5m0 0L3 8m9 5v8" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" fill="none"/></>,
    bell: <><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    check: <path d="M20 6L9 17l-5-5" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    x: <path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth={sw} strokeLinecap="round"/>,
    shield: <path d="M12 2l7 4v6c0 5-3.5 9.74-7 11-3.5-1.26-7-6-7-11V6l7-4z" stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round"/>,
    users: <><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round"/><circle cx="9" cy="7" r="4" stroke={color} strokeWidth={sw} fill="none"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round"/></>,
    smartphone: <><rect x="5" y="2" width="14" height="20" rx="2" stroke={color} strokeWidth={sw} fill="none"/><line x1="12" y1="18" x2="12.01" y2="18" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    monitor: <><rect x="2" y="3" width="20" height="14" rx="2" stroke={color} strokeWidth={sw} fill="none"/><line x1="8" y1="21" x2="16" y2="21" stroke={color} strokeWidth={sw} strokeLinecap="round"/><line x1="12" y1="17" x2="12" y2="21" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    key: <><circle cx="7.5" cy="15.5" r="5.5" stroke={color} strokeWidth={sw} fill="none"/><path d="M21 2l-9.6 9.6M15.5 7.5l3 3" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    clock: <><circle cx="12" cy="12" r="10" stroke={color} strokeWidth={sw} fill="none"/><path d="M12 6v6l4 2" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" stroke={color} strokeWidth={sw} fill="none"/><line x1="16" y1="2" x2="16" y2="6" stroke={color} strokeWidth={sw} strokeLinecap="round"/><line x1="8" y1="2" x2="8" y2="6" stroke={color} strokeWidth={sw} strokeLinecap="round"/><line x1="3" y1="10" x2="21" y2="10" stroke={color} strokeWidth={sw}/></>,
    qr: <><rect x="3" y="3" width="7" height="7" rx="1" stroke={color} strokeWidth={sw} fill="none"/><rect x="14" y="3" width="7" height="7" rx="1" stroke={color} strokeWidth={sw} fill="none"/><rect x="3" y="14" width="7" height="7" rx="1" stroke={color} strokeWidth={sw} fill="none"/><path d="M14 14h3v3h-3zM17 17h4v4h-4z" stroke={color} strokeWidth={sw} fill="none"/></>,
    arrowRight: <path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    chevronRight: <path d="M9 18l6-6-6-6" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    chevronDown: <path d="M6 9l6 6 6-6" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2" stroke={color} strokeWidth={sw} fill="none"/><path d="M2 8l10 6 10-6" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round"/></>,
    audit: <><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    barcode: <><path d="M3 5v14M7 5v14M11 5v10M15 5v14M19 5v14" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    search: <><circle cx="11" cy="11" r="7" stroke={color} strokeWidth={sw} fill="none"/><line x1="21" y1="21" x2="16.5" y2="16.5" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    plus: <path d="M12 5v14M5 12h14" stroke={color} strokeWidth={sw} strokeLinecap="round"/>,
    moon: <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round"/>,
    chart: <><line x1="18" y1="20" x2="18" y2="10" stroke={color} strokeWidth={sw} strokeLinecap="round"/><line x1="12" y1="20" x2="12" y2="4" stroke={color} strokeWidth={sw} strokeLinecap="round"/><line x1="6" y1="20" x2="6" y2="14" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    headset: <path d="M3 14v-2a9 9 0 1118 0v2M21 14v3a2 2 0 01-2 2h-1v-7h1a2 2 0 012 2zM3 14v3a2 2 0 002 2h1v-7H5a2 2 0 00-2 2z" stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round"/>,
    megaphone: <path d="M3 11v3a1 1 0 001 1h2.5l5.5 5V6L6.5 11H3zM18 8a4 4 0 010 8" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    telegram: <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    whatsapp: <path d="M3 21l1.65-3.8a9 9 0 113.4 3.4L3 21M9 10a.5.5 0 01.5-.5 1 1 0 011 1 3 3 0 003 3 1 1 0 011 1 .5.5 0 01-.5.5A4.5 4.5 0 019 10z" stroke={color} strokeWidth={sw} fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    book: <path d="M4 19.5A2.5 2.5 0 016.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round"/>,
    spreadsheet: <><rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth={sw} fill="none"/><line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth={sw}/><line x1="3" y1="15" x2="21" y2="15" stroke={color} strokeWidth={sw}/><line x1="9" y1="3" x2="9" y2="21" stroke={color} strokeWidth={sw}/><line x1="15" y1="3" x2="15" y2="21" stroke={color} strokeWidth={sw}/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2" stroke={color} strokeWidth={sw} fill="none"/><path d="M7 11V7a5 5 0 0110 0v4" stroke={color} strokeWidth={sw} fill="none"/></>,
    sparkles: <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 14l.75 2.25L22 17l-2.25.75L19 20l-.75-2.25L16 17l2.25-.75L19 14z" stroke={color} strokeWidth={sw} fill="none" strokeLinejoin="round"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      {icons[name] || null}
    </svg>
  );
};

window.Icon = Icon;

