// ===== Icons (inline SVG) =====
const Icon = ({ name, size = 18, color = "currentColor", strokeWidth = 1.8, style, className }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round",
    style, className,
  };
  switch (name) {
    case "search":      return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case "bell":        return <svg {...props}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>;
    case "user":        return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case "users":       return <svg {...props}><circle cx="9" cy="8" r="3.5"/><path d="M3 20a6 6 0 0 1 12 0"/><circle cx="17" cy="8" r="3"/><path d="M16 20a5.5 5.5 0 0 1 5.5-5.5"/></svg>;
    case "building":    return <svg {...props}><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 16h.01M15 16h.01"/></svg>;
    case "calendar":    return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case "user-plus":   return <svg {...props}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M19 8v6M16 11h6"/></svg>;
    case "user-minus":  return <svg {...props}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M16 11h6"/></svg>;
    case "logout":      return <svg {...props}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>;
    case "filter":      return <svg {...props}><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg>;
    case "download":    return <svg {...props}><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></svg>;
    case "excel":       return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9l6 6M15 9l-6 6"/></svg>;
    case "pdf":         return <svg {...props}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8 13h1M8 17h6"/></svg>;
    case "chart-bar":   return <svg {...props}><path d="M3 3v18h18"/><rect x="7" y="10" width="3" height="8"/><rect x="12" y="6" width="3" height="12"/><rect x="17" y="13" width="3" height="5"/></svg>;
    case "chart-pie":   return <svg {...props}><path d="M21 12a9 9 0 1 1-9-9v9z"/><path d="M12 3a9 9 0 0 1 9 9h-9z"/></svg>;
    case "trend":       return <svg {...props}><path d="M3 17l6-6 4 4 8-8"/><path d="M17 7h4v4"/></svg>;
    case "hourglass":   return <svg {...props}><path d="M6 3h12M6 21h12M7 3c0 5 5 6 5 9s-5 4-5 9M17 3c0 5-5 6-5 9s5 4 5 9"/></svg>;
    case "cake":        return <svg {...props}><path d="M3 21h18v-7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z"/><path d="M3 16c2 1 2-1 4 0s2-1 4 0 2-1 4 0 2-1 4 0"/><path d="M8 8V4M12 8V4M16 8V4"/></svg>;
    case "check":       return <svg {...props}><path d="M5 12l5 5L20 7"/></svg>;
    case "close":       return <svg {...props}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "edit":        return <svg {...props}><path d="M3 21h4l11-11-4-4L3 17z"/><path d="M14 6l4 4"/></svg>;
    case "trash":       return <svg {...props}><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>;
    case "more":        return <svg {...props}><circle cx="12" cy="6" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="18" r="1.4"/></svg>;
    case "lock":        return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case "mail":        return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case "phone":       return <svg {...props}><path d="M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "pin":         return <svg {...props}><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case "briefcase":   return <svg {...props}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18"/></svg>;
    case "graduation": return <svg {...props}><path d="M2 9l10-5 10 5-10 5z"/><path d="M6 11v5c0 2 3 3 6 3s6-1 6-3v-5"/></svg>;
    case "moon":        return <svg {...props}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>;
    case "sun":         return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>;
    case "camera":      return <svg {...props}><path d="M3 7h4l2-2h6l2 2h4a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="4"/></svg>;
    case "refresh":     return <svg {...props}><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>;
    case "sliders":     return <svg {...props}><path d="M4 21V14M4 10V3M12 21V12M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></svg>;
    case "chevron-r":   return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case "chevron-l":   return <svg {...props}><path d="M15 6l-6 6 6 6"/></svg>;
    case "chevron-d":   return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case "arrow-up":    return <svg {...props}><path d="M12 19V5M5 12l7-7 7 7"/></svg>;
    case "arrow-down":  return <svg {...props}><path d="M12 5v14M19 12l-7 7-7-7"/></svg>;
    case "sparkle":     return <svg {...props}><path d="M12 3l2 7 7 2-7 2-2 7-2-7-7-2 7-2z"/></svg>;
    case "spark":       return <svg {...props}><path d="M13 2L4 14h7l-2 8 9-12h-7z"/></svg>;
    case "wallet":      return <svg {...props}><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M16 13h2"/><path d="M3 9h18"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;