// Icons.jsx — inline SVG icon registry. Replaces Material Symbols font usage
// so icons render reliably without waiting on a CDN font.
// All icons are 24x24, stroke-based, weight 2, rounded line caps/joins.

const ICON_PATHS = {
  // navigation / chrome
  search:         <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
  search_off:     <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5M8 8l6 6"/></>,
  person:         <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
  favorite:       <path d="M19 14.5c0-2.6-2-4.5-4.5-4.5-1.4 0-2.7.6-3.5 1.6C10.2 10.6 9 10 7.5 10 5 10 3 11.9 3 14.5c0 4 8 8.5 8 8.5s8-4.5 8-8.5Z"/>,
  shopping_cart:  <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></>,
  shopping_basket:<><path d="M3 9h18l-2 12H5L3 9Z"/><path d="m8 9 4-6 4 6"/></>,
  location_on:    <><path d="M12 22s8-7.5 8-13a8 8 0 0 0-16 0c0 5.5 8 13 8 13Z"/><circle cx="12" cy="9" r="3"/></>,
  menu:           <><path d="M3 6h18M3 12h18M3 18h18"/></>,
  close:          <path d="M18 6 6 18M6 6l12 12"/>,
  chevron_right:  <path d="m9 6 6 6-6 6"/>,
  chevron_down:   <path d="m6 9 6 6 6-6"/>,
  arrow_forward:  <><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></>,
  add:            <><path d="M12 5v14M5 12h14"/></>,
  remove:         <path d="M5 12h14"/>,
  check:          <path d="m5 12 5 5L20 7"/>,
  // commerce
  local_shipping: <><path d="M3 6h11v9H3zM14 9h4l3 3v3h-7"/><circle cx="7.5" cy="17" r="2"/><circle cx="17.5" cy="17" r="2"/></>,
  credit_card:    <><rect x="2" y="6" width="20" height="13" rx="2"/><path d="M2 11h20"/></>,
  verified:       <><path d="m4.5 9 1.6-3.4L9.5 4 12 6.5 14.5 4l3.4 1.6L19.5 9 22 11.5l-2.5 2.5.5 3.5-3.4 1.6L14.5 22 12 19.5 9.5 22l-3.4-1.6L4.5 17 2 14.5 4.5 12 2 9.5z"/><path d="m9 12 2 2 4-4"/></>,
  support_agent:  <><path d="M3 12a9 9 0 0 1 18 0v4a3 3 0 0 1-3 3h-2v-7h5"/><path d="M3 16v-4h5v7H6a3 3 0 0 1-3-3"/></>,
  storefront:     <><path d="M3 7l1-4h16l1 4"/><path d="M3 7v3a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0V7"/><path d="M5 11v9h14v-9"/></>,
  star:           <path d="M12 2 14.91 8.61 22 9.27l-5.45 4.73L18.18 21 12 17.27 5.82 21l1.63-7L2 9.27l7.09-.66L12 2Z"/>,
  star_border:    <path d="M12 2 14.91 8.61 22 9.27l-5.45 4.73L18.18 21 12 17.27 5.82 21l1.63-7L2 9.27l7.09-.66L12 2Z"/>,
  check_circle:   <><circle cx="12" cy="12" r="10"/><path d="m8 12 3 3 5-6"/></>,
  lock:           <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
  delete:         <><path d="M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/></>,
  tune:           <><path d="M3 6h13M3 12h7M3 18h11"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="16" cy="18" r="2"/></>,
  // category icons
  devices:        <><rect x="2" y="4" width="12" height="13" rx="2"/><path d="M2 14h12"/><rect x="15" y="9" width="7" height="11" rx="2"/></>,
  chair:          <><path d="M5 12V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v7"/><path d="M3 14a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3H3z"/><path d="M5 17v4M19 17v4"/></>,
  spa:            <><path d="M12 22c-3.5-4-6-7-6-10a6 6 0 0 1 12 0c0 3-2.5 6-6 10Z"/><circle cx="12" cy="11" r="2"/></>,
  checkroom:      <><path d="M12 4a2 2 0 1 0-1.5 3.5"/><path d="M12 7v3l-9 9h18l-9-9V7"/></>,
  exercise:       <><path d="M5 8l3-3 5 5-3 3zM16 11l3 3-5 5-3-3zM10 13l1-1M13 10l1-1"/></>,
  child_care:     <><circle cx="12" cy="12" r="9"/><circle cx="9" cy="11" r="1.3"/><circle cx="15" cy="11" r="1.3"/><path d="M9 15c1 1 2 1.5 3 1.5s2-.5 3-1.5"/></>,
  construction:   <><path d="m14 4 6 6-3 3-6-6z"/><path d="M11 7 4 14l3 3 7-7"/><path d="m17 13 4 4-3 3-4-4z"/></>,
};

const Icon = ({ name, size = 20, color = "currentColor", fill = false, weight = 2, style }) => {
  const inner = ICON_PATHS[name] || ICON_PATHS.search;
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24"
      fill={fill ? color : "none"}
      stroke={fill ? "none" : color}
      strokeWidth={weight} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: "inline-block", verticalAlign: "middle", flexShrink: 0, ...style }}
    >
      {inner}
    </svg>
  );
};

window.AllenIcon = Icon;