// icons.jsx — small SVG icons + illustrative SVGs
const Icon = ({ name, size = 18, color = "currentColor", strokeWidth = 1.8 }) => {
  const s = { width: size, height: size, stroke: color, fill: "none", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "pin":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M12 21s-7-7.5-7-12a7 7 0 0114 0c0 4.5-7 12-7 12z" /><circle cx="12" cy="9" r="2.5" /></svg>);
    case "calendar":
      return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></svg>);
    case "clock":
      return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>);
    case "search":
      return (<svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></svg>);
    case "chevron-down":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M6 9l6 6 6-6" /></svg>);
    case "chevron-left":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M15 6l-6 6 6 6" /></svg>);
    case "chevron-right":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M9 6l6 6-6 6" /></svg>);
    case "arrow-right":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 6l6 6-6 6" /></svg>);
    case "arrow-left":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M19 12H5M11 6l-6 6 6 6" /></svg>);
    case "phone":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z" /></svg>);
    case "users":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" /></svg>);
    case "luggage":
      return (<svg viewBox="0 0 24 24" {...s}><rect x="6" y="6" width="12" height="14" rx="2" /><path d="M9 6V4a2 2 0 012-2h2a2 2 0 012 2v2M10 10v8M14 10v8" /></svg>);
    case "settings":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" /><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" /></svg>);
    case "door":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M5 21V4a1 1 0 011-1h12a1 1 0 011 1v17M3 21h18M15 12v.01" /></svg>);
    case "snowflake":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M12 2v20M4.93 4.93l14.14 14.14M2 12h20M4.93 19.07L19.07 4.93M9 4l3-2 3 2M9 20l3 2 3-2M4 9l-2 3 2 3M20 9l2 3-2 3" /></svg>);
    case "fuel":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M3 22h12M4 22V4a2 2 0 012-2h7a2 2 0 012 2v18M4 13h11M16 8l3 3v8a2 2 0 11-4 0M19 5l-3-3" /></svg>);
    case "compass":
      return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="M16.24 7.76l-2.12 6.36-6.36 2.12 2.12-6.36 6.36-2.12z" /></svg>);
    case "shield":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="M9 12l2 2 4-4" /></svg>);
    case "x":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M18 6L6 18M6 6l12 12" /></svg>);
    case "check":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12l5 5L20 7" /></svg>);
    case "plus":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14" /></svg>);
    case "filter":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" /></svg>);
    case "instagram":
      return (<svg viewBox="0 0 24 24" {...s}><rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zM17.5 6.5h.01" /></svg>);
    case "facebook":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" /></svg>);
    case "whatsapp":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" /></svg>);
    case "star":
      return (<svg viewBox="0 0 24 24" {...s} fill={color}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>);
    case "play":
      return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="18" height="16" rx="3" /><path d="M10 9l5 3-5 3z" fill={color} stroke="none" /></svg>);
    case "cash":
      return (<svg viewBox="0 0 24 24" {...s}><rect x="2" y="6" width="20" height="12" rx="2" /><circle cx="12" cy="12" r="3" /><path d="M6 10v4M18 10v4" /></svg>);
    case "send":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" /></svg>);
    case "car":
      return (<svg viewBox="0 0 24 24" {...s}><path d="M5 17h14M3 13l2-6h14l2 6M5 17a2 2 0 104 0 2 2 0 00-4 0zM15 17a2 2 0 104 0 2 2 0 00-4 0zM3 13v4h2M21 13v4h-2" /></svg>);
    default:
      return null;
  }
};

window.Icon = Icon;
