// ---------- Icons ----------
const Icon = ({ name, className = "ic", size }) => {
  const s = size ? { width: size, height: size } : null;
  const common = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", className, style: s };
  const paths = {
    home:    <><path d="M3 11.5 12 4l9 7.5" /><path d="M5 10v10h14V10" /></>,
    chart:   <><path d="M3 3v18h18" /><path d="M7 14l4-4 3 3 5-6" /></>,
    wallet:  <><rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 10h18" /><circle cx="16" cy="14.5" r="1.2" fill="currentColor" /></>,
    users:   <><circle cx="9" cy="9" r="3" /><path d="M3 19c0-3 3-5 6-5s6 2 6 5" /><circle cx="17" cy="9" r="2.4" /><path d="M21 19c0-2.4-2-4-4-4" /></>,
    bot:     <><rect x="4" y="7" width="16" height="11" rx="3" /><circle cx="9" cy="12.5" r="1.1" fill="currentColor" /><circle cx="15" cy="12.5" r="1.1" fill="currentColor" /><path d="M12 4v3" /><circle cx="12" cy="3" r="1" fill="currentColor" /></>,
    wave:    <><path d="M3 12h2" /><path d="M7 8v8" /><path d="M11 5v14" /><path d="M15 8v8" /><path d="M19 11v2" /></>,
    send:    <><path d="m4 4 16 8-16 8 3-8-3-8z" /></>,
    message: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></>,
    log:     <><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M8 9h8M8 13h8M8 17h5" /></>,
    phone:   <><path d="M5 4h3l2 5-2 1c1 2 3 4 5 5l1-2 5 2v3a2 2 0 0 1-2 2c-9 0-15-6-15-15a2 2 0 0 1 2-2z" /></>,
    sip:     <><circle cx="12" cy="12" r="9" /><path d="M3 12h18" /><path d="M12 3a13 13 0 0 1 0 18" /><path d="M12 3a13 13 0 0 0 0 18" /></>,
    server:  <><rect x="3" y="4" width="18" height="6" rx="1.5" /><rect x="3" y="14" width="18" height="6" rx="1.5" /><circle cx="7" cy="7" r="0.8" fill="currentColor" /><circle cx="7" cy="17" r="0.8" fill="currentColor" /></>,
    tool:    <><path d="M14 2a4 4 0 0 0-1.4 7.3L4 18l2.5 2.5 8.7-8.7A4 4 0 0 0 14 2z" /></>,
    zap:     <><path d="m13 2-8 12h6l-1 8 8-12h-6l1-8z" /></>,
    settings:<><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 0 1-4 0v-.1a1.7 1.7 0 0 0-1.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 0 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 0 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 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></>,
    search:  <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    bell:    <><path d="M6 9a6 6 0 1 1 12 0c0 4 2 6 2 6H4s2-2 2-6z" /><path d="M10 19a2 2 0 0 0 4 0" /></>,
    plus:    <><path d="M12 5v14M5 12h14" /></>,
    chevR:   <><path d="m9 6 6 6-6 6" /></>,
    chevD:   <><path d="m6 9 6 6 6-6" /></>,
    arrUp:   <><path d="M12 19V5M5 12l7-7 7 7" /></>,
    arrDn:   <><path d="M12 5v14M5 12l7 7 7-7" /></>,
    arrR:    <><path d="M5 12h14M13 5l7 7-7 7" /></>,
    filter:  <><path d="M3 5h18l-7 9v6l-4-2v-4z" /></>,
    download:<><path d="M12 4v12M6 12l6 6 6-6" /><path d="M4 20h16" /></>,
    play:    <><path d="m6 4 14 8-14 8z" fill="currentColor" stroke="none" /></>,
    pause:   <><rect x="6" y="4" width="4" height="16" fill="currentColor" stroke="none" /><rect x="14" y="4" width="4" height="16" fill="currentColor" stroke="none" /></>,
    mic:     <><rect x="9" y="3" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0" /><path d="M12 18v3" /></>,
    micOff:  <><path d="M15 9V6a3 3 0 0 0-6 0" /><path d="M9 9v3a3 3 0 0 0 5.5 1.6" /><path d="M5 11a7 7 0 0 0 11.7 5.2" /><path d="M3 3l18 18" /><path d="M12 18v3" /></>,
    hangup:  <><path d="M22 16.5c-3-2.5-7-4-10-4s-7 1.5-10 4l3 3 2.5-2c.4-.3.5-.8.3-1.3l-.7-1.7A11 11 0 0 1 12 14a11 11 0 0 1 4.9 1.5l-.7 1.7c-.2.5-.1 1 .3 1.3l2.5 2 3-3z" fill="currentColor" stroke="none" transform="rotate(135 12 14)" /></>,
    edit:    <><path d="M4 20h4l11-11-4-4L4 16v4z" /><path d="m14 6 4 4" /></>,
    trash:   <><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="M6 6l1 14h10l1-14" /></>,
    copy:    <><rect x="8" y="8" width="13" height="13" rx="2" /><path d="M5 16V5a2 2 0 0 1 2-2h11" /></>,
    upload:  <><path d="M12 20V8M6 12l6-6 6 6" /><path d="M4 4h16" /></>,
    eye:     <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></>,
    check:   <><path d="m5 12 5 5 9-12" /></>,
    x:       <><path d="M6 6l12 12M18 6 6 18" /></>,
    sparkles:<><path d="m12 4 1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6z" /><path d="M18 17l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z" /></>,
    sun:     <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5" /></>,
    moon:    <><path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z" /></>,
    globe:   <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18" /></>,
    flame:   <><path d="M12 22c4 0 7-3 7-7 0-3-2-5-3-6-1 2-3 2-3 0 0-3 2-4 2-7 0 0-7 2-7 9 0 5 3 11 4 11z" /></>,
    drag:    <><circle cx="9" cy="6" r="1.2" fill="currentColor" /><circle cx="15" cy="6" r="1.2" fill="currentColor" /><circle cx="9" cy="12" r="1.2" fill="currentColor" /><circle cx="15" cy="12" r="1.2" fill="currentColor" /><circle cx="9" cy="18" r="1.2" fill="currentColor" /><circle cx="15" cy="18" r="1.2" fill="currentColor" /></>,
    more:    <><circle cx="5" cy="12" r="1.4" fill="currentColor" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /><circle cx="19" cy="12" r="1.4" fill="currentColor" /></>,
    play2:   <><circle cx="12" cy="12" r="9" /><path d="m10 8 6 4-6 4z" fill="currentColor" stroke="none" /></>,
    code:    <><path d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16" /></>,
    sip2:    <><path d="M4 6h12l4 4-4 4H4z" /></>,
    book:    <><path d="M4 5a2 2 0 0 1 2-2h14v18H6a2 2 0 0 0-2 2V5z" /><path d="M4 20a2 2 0 0 1 2-2h14" /></>,
    activity:<><path d="M3 12h4l3-8 4 16 3-8h4" /></>,
    layers:  <><path d="m12 3-9 5 9 5 9-5z" /><path d="m3 13 9 5 9-5" /><path d="m3 18 9 5 9-5" /></>,
    contact: <><circle cx="12" cy="10" r="3.5" /><path d="M4 21c0-4 4-7 8-7s8 3 8 7" /><circle cx="12" cy="10" r="9" /></>,
    cmd:      <><path d="M9 9V6a2 2 0 1 0-2 2h10a2 2 0 1 0-2-2v3" /><path d="M9 15v3a2 2 0 1 1-2-2h10a2 2 0 1 1-2 2v-3" /><path d="M9 9h6v6H9z" /></>,
    workflow: <><rect x="3" y="3" width="6" height="6" rx="1.5" /><rect x="15" y="3" width="6" height="6" rx="1.5" /><rect x="9" y="15" width="6" height="6" rx="1.5" /><path d="M6 9v3a3 3 0 0 0 3 3h3M18 9v3a3 3 0 0 1-3 3h-3" /></>,
    logout:   <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></>,
    key:      <><circle cx="7.5" cy="15.5" r="4.5" /><path d="m21 2-9.6 9.6" /><path d="m15.5 7.5 3 3L22 7l-3-3" /></>,
    lock:     <><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 1 1 8 0v4" /></>,
    unlock:   <><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0" /></>,
    refresh:  <><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></>,
  };
  return (
    <svg xmlns="http://www.w3.org/2000/svg" {...common}>
      {paths[name] || paths.home}
    </svg>
  );
};

window.Icon = Icon;