// icons.jsx — minimal monoline SVG icons, shared to window.
// Generic <Icon name size/> with a 24x24 viewBox, currentColor stroke.
const ICON_PATHS = {
  arrowLeft: <path d="M15 5l-7 7 7 7" />,
  chevronRight: <path d="M9 6l6 6-6 6" />,
  lock: <><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></>,
  shield: <path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z" />,
  check: <path d="M5 12.5l4.5 4.5L19 7" />,
  spark: <path d="M12 3l1.8 5.6L19.5 10l-5 2L12 18l-2.5-6-5-2 5.7-1.4L12 3z" />,
  flame: <path d="M12 3c.5 3-2 4-2 7a3 3 0 0 0 6 .3c1 1.4 1 2.7 1 3.7a5 5 0 1 1-10 0c0-3 2-4.5 3-6.5.8-1.6 1.5-3 2-4.5z" />,
  handshake: <path d="M3 12l4-4 5 4 2-2 3 3M14 10l3-3 4 4-3 3-2-2M7 8l-4 4 4 4" />,
  // category icons
  food: <><path d="M7 3v8M5 3v4a2 2 0 0 0 4 0V3M7 11v10" /><path d="M16 3c-2 0-3 2-3 5s1 4 3 4 0 0 0 0v9" /></>,
  cafe: <><path d="M5 9h11v4a5 5 0 0 1-10 0V9z" /><path d="M16 10h2.5a2 2 0 0 1 0 4H16" /><path d="M8 3v2M12 3v2" /></>,
  store: <><path d="M4 9l1-4h14l1 4M4 9v10h16V9M4 9a2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0" /></>,
  office: <><rect x="5" y="3" width="14" height="18" rx="1.5" /><path d="M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-4h4v4" /></>,
  academy: <><path d="M3 8l9-4 9 4-9 4-9-4z" /><path d="M7 10.5V16c0 1.2 2.2 2.5 5 2.5s5-1.3 5-2.5v-5.5" /></>,
  beauty: <><circle cx="7" cy="7" r="3" /><circle cx="7" cy="17" r="3" /><path d="M9.5 9L20 19M9.5 15L20 5" /></>,
  mart: <><circle cx="9" cy="20" r="1.4" /><circle cx="17" cy="20" r="1.4" /><path d="M3 4h2l2.2 11h10l2-7H6" /></>,
  dots: <><circle cx="6" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="18" cy="12" r="1.5" /></>,
  // liability options
  doc: <><path d="M7 3h7l4 4v14H7z" /><path d="M14 3v4h4M10 12h6M10 16h6" /></>,
  camera: <><path d="M3 8a2 2 0 0 1 2-2h2l1.5-2h7L19 6h0a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8z" /><circle cx="12" cy="12.5" r="3.2" /></>,
  crop: <><path d="M6 2v14a2 2 0 0 0 2 2h14" /><path d="M2 6h14a2 2 0 0 1 2 2v14" /></>,
  image: <><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="8.5" cy="9.5" r="1.6" /><path d="M21 15l-5-5L5 21" /></>,
  phone: <path d="M6 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L16 12l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z" />,
  clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
};

function Icon({ name, size = 24, stroke = 2, fill = "none", ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {ICON_PATHS[name] || null}
    </svg>
  );
}

Object.assign(window, { Icon });