// Shared icon set (stroke-based, line-icon style)
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: stroke,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  switch (name) {
    case "search":
      return (
        <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      );
    case "package":
      return (
        <svg {...props}>
          <path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5v-9Z"/>
          <path d="M3.5 7.5 12 12l8.5-4.5"/>
          <path d="M12 12v9"/>
        </svg>
      );
    case "bolt":
      return (
        <svg {...props}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg>
      );
    case "bell":
      return (
        <svg {...props}>
          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8Z"/>
          <path d="M10 21a2 2 0 0 0 4 0"/>
        </svg>
      );
    case "shield":
      return (
        <svg {...props}>
          <path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/>
          <path d="m9 12 2 2 4-4"/>
        </svg>
      );
    case "clock":
      return (
        <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
      );
    case "arrow-right":
      return (
        <svg {...props}><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
      );
    case "arrow-left":
      return (
        <svg {...props}><path d="M19 12H5"/><path d="m11 19-7-7 7-7"/></svg>
      );
    case "check":
      return (
        <svg {...props}><path d="m5 12 5 5 9-11"/></svg>
      );
    case "check-bold":
      return (
        <svg {...props} strokeWidth={2.4}><path d="m5 12 5 5 9-11"/></svg>
      );
    case "circle":
      return (
        <svg {...props}><circle cx="12" cy="12" r="3"/></svg>
      );
    case "pin":
      return (
        <svg {...props}>
          <path d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12Z"/>
          <circle cx="12" cy="9" r="2.5"/>
        </svg>
      );
    case "truck":
      return (
        <svg {...props}>
          <path d="M3 7h11v9H3z"/>
          <path d="M14 10h4l3 3v3h-7z"/>
          <circle cx="7" cy="18" r="2"/>
          <circle cx="17" cy="18" r="2"/>
        </svg>
      );
    case "phone":
      return (
        <svg {...props}>
          <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2Z"/>
        </svg>
      );
    case "msg":
      return (
        <svg {...props}><path d="M21 12a8 8 0 0 1-11.6 7.2L4 21l1.8-5.4A8 8 0 1 1 21 12Z"/></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 "card":
      return (
        <svg {...props}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></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 "warehouse":
      return (
        <svg {...props}>
          <path d="M3 10 12 5l9 5v10H3z"/>
          <path d="M8 20v-6h8v6"/>
        </svg>
      );
    case "sparkle":
      return (
        <svg {...props}>
          <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/>
        </svg>
      );
    case "share":
      return (
        <svg {...props}>
          <circle cx="6" cy="12" r="3"/>
          <circle cx="18" cy="6" r="3"/>
          <circle cx="18" cy="18" r="3"/>
          <path d="M8.7 13.5 15.3 17M15.3 7 8.7 10.5"/>
        </svg>
      );
    default:
      return null;
  }
};

window.Icon = Icon;