// ============ Icons (material-ish, stroke) ============
const Icon = ({ name, size = 18, style }) => {
  const s = { width: size, height: size, ...style };
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.7,
    strokeLinecap: "round", strokeLinejoin: "round",
  };
  switch (name) {
    case "home":
      return <svg {...common}><path d="M3 11.5 12 4l9 7.5"/><path d="M5 10v10h14V10"/></svg>;
    case "analytics":
      return <svg {...common}><path d="M4 20V10"/><path d="M10 20V4"/><path d="M16 20v-8"/><path d="M22 20H2"/></svg>;
    case "workflow":
      return <svg {...common}><rect x="3" y="4" width="6" height="6" rx="1.5"/><rect x="15" y="4" width="6" height="6" rx="1.5"/><rect x="9" y="14" width="6" height="6" rx="1.5"/><path d="M9 7h6"/><path d="M12 10v4"/></svg>;
    case "users":
      return <svg {...common}><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.6-3.3 3.3-5.5 6.5-5.5s5.9 2.2 6.5 5.5"/><circle cx="17" cy="7" r="2.5"/><path d="M17 12c2.7 0 4.7 1.8 5 4.5"/></svg>;
    case "search":
      return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "settings":
      return <svg {...common}><circle cx="12" cy="12" r="2.5"/><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 9 19.4a1.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 4.6 9a1.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.3H9a1.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.8V9a1.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"/></svg>;
    case "play":
      return <svg {...common}><path d="M7 5v14l12-7z"/></svg>;
    case "check":
      return <svg {...common}><path d="m5 12 5 5L20 7"/></svg>;
    case "x":
      return <svg {...common}><path d="m6 6 12 12M18 6 6 18"/></svg>;
    case "plus":
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "arrow-up":
      return <svg {...common}><path d="M12 19V5M5 12l7-7 7 7"/></svg>;
    case "arrow-down":
      return <svg {...common}><path d="M12 5v14M5 12l7 7 7-7"/></svg>;
    case "arrow-right":
      return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "download":
      return <svg {...common}><path d="M12 3v12m0 0 5-5m-5 5-5-5"/><path d="M5 21h14"/></svg>;
    case "filter":
      return <svg {...common}><path d="M4 5h16l-6 8v5l-4 2v-7z"/></svg>;
    case "zap":
      return <svg {...common}><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>;
    case "chevron":
      return <svg {...common}><path d="m9 6 6 6-6 6"/></svg>;
    case "more":
      return <svg {...common}><circle cx="5" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.2" fill="currentColor" stroke="none"/></svg>;
    case "refresh":
      return <svg {...common}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>;
    case "sparkle":
      return <svg {...common}><path d="M12 3v4m0 10v4M3 12h4m10 0h4m-2.8-7.2-2.8 2.8m-5.6 5.6L6 17.2m0-12.4 2.8 2.8m5.6 5.6 2.8 2.8"/></svg>;
    case "database":
      return <svg {...common}><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14a8 3 0 0 0 16 0V5"/><path d="M4 12a8 3 0 0 0 16 0"/></svg>;
    case "cube":
      return <svg {...common}><path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="m3 7 9 5 9-5"/><path d="M12 12v10"/></svg>;
    case "brain":
      return <svg {...common}><path d="M8 3a3.5 3.5 0 0 0-3 5.2A3.5 3.5 0 0 0 4 14a3.5 3.5 0 0 0 4 3.4V21h1V3z"/><path d="M16 3a3.5 3.5 0 0 1 3 5.2A3.5 3.5 0 0 1 20 14a3.5 3.5 0 0 1-4 3.4V21h-1V3z"/></svg>;
    case "rocket":
      return <svg {...common}><path d="M14 4c3 0 6 3 6 6l-7 7-5-5z"/><path d="M8 12 4 14l1 5 5 1 2-4"/><circle cx="15" cy="9" r="1.2"/></svg>;
    case "email":
      return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case "moon":
      return <svg {...common}><path d="M20 14.5A8 8 0 1 1 9.5 4 6.5 6.5 0 0 0 20 14.5z"/></svg>;
    case "sun":
      return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4 12H2m20 0h-2m-2.8-7.2-1.4 1.4m-9.6 9.6-1.4 1.4m0-12.4 1.4 1.4m9.6 9.6 1.4 1.4"/></svg>;
    case "globe":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18"/><path d="M12 3a14 14 0 0 0 0 18"/></svg>;
    case "sliders":
      return <svg {...common}><path d="M4 6h10M4 12h6M4 18h14"/><circle cx="17" cy="6" r="2"/><circle cx="13" cy="12" r="2"/><circle cx="19" cy="18" r="2"/></svg>;
    case "info":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h1v4h1"/></svg>;
    case "trending":
      return <svg {...common}><path d="M3 17 9 11l4 4 8-8"/><path d="M14 4h7v7"/></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "store":
      return <svg {...common}><path d="M3 9 4 4h16l1 5"/><path d="M3 9v11h18V9"/><path d="M9 20v-6h6v6"/></svg>;
    case "logo":
      // AntEater-inspired: stylized anteater snout + magnifier ring
      return (
        <svg viewBox="0 0 24 24" width={size} height={size} fill="none">
          <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.6" opacity=".4"/>
          <path d="M4 13c1.5-2 3.5-3 5.5-3 1.3 0 2.3.5 3 1.2L15 9.5c.3-.3.8-.3 1 0l1.5 1.5c.3.3.3.7 0 1l-6 6c-.3.3-.8.3-1 0L4 13z" fill="currentColor"/>
          <circle cx="8.5" cy="10.5" r=".9" fill="#fff" opacity=".9"/>
        </svg>
      );
    default:
      return null;
  }
};

Object.assign(window, { Icon });