// Inline SVG icons — small line-style for clinical look.

const Icon = ({ d, size = 18, strokeWidth = 1.6, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={strokeWidth}
       strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);

const IconCheck = ({ size = 14 }) => (
  <Icon size={size} strokeWidth={2.2} d="M4 12.5l5 5L20 6.5" />
);
const IconX = ({ size = 14 }) => (
  <Icon size={size} strokeWidth={2} d={["M6 6l12 12", "M18 6L6 18"]} />
);
const IconChevron = ({ size = 14, dir = "down" }) => {
  const rot = { down: 0, up: 180, right: -90, left: 90 }[dir] || 0;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round"
         style={{ transform: `rotate(${rot}deg)` }}>
      <path d="M6 9l6 6 6-6" />
    </svg>
  );
};
const IconCart = ({ size = 20 }) => (
  <Icon size={size} d={[
    "M3 4h2.5l2.5 12.5a2 2 0 0 0 2 1.5h7.5a2 2 0 0 0 2-1.5L21 8H6",
    "M9 21a1 1 0 100-2 1 1 0 000 2z",
    "M18 21a1 1 0 100-2 1 1 0 000 2z"
  ]} />
);
const IconSearch = ({ size = 18 }) => (
  <Icon size={size} d={["M11 19a8 8 0 100-16 8 8 0 000 16z", "M21 21l-4.35-4.35"]} />
);
const IconUser = ({ size = 18 }) => (
  <Icon size={size} d={[
    "M20 21a8 8 0 10-16 0",
    "M12 13a4 4 0 100-8 4 4 0 000 8z"
  ]} />
);
const IconMenu = ({ size = 18 }) => (
  <Icon size={size} d={["M4 6h16", "M4 12h16", "M4 18h16"]} />
);
const IconShield = ({ size = 16 }) => (
  <Icon size={size} d={["M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z", "M9 12l2 2 4-4"]} />
);
const IconRefresh = ({ size = 16 }) => (
  <Icon size={size} d={[
    "M3 12a9 9 0 0115.5-6.5L21 8", "M21 3v5h-5",
    "M21 12a9 9 0 01-15.5 6.5L3 16", "M3 21v-5h5"
  ]} />
);
const IconSnooze = ({ size = 16 }) => (
  <Icon size={size} d={["M21 12.5A9 9 0 1111.5 3a7 7 0 109.5 9.5z"]} />
);
const IconLeaf = ({ size = 18 }) => (
  <Icon size={size} d={[
    "M11 20A7 7 0 014 13V4h9a7 7 0 010 14h-2z",
    "M11 20l9-9"
  ]} />
);
const IconShipping = ({ size = 16 }) => (
  <Icon size={size} d={[
    "M3 7h11v9H3z", "M14 10h4l3 3v3h-7",
    "M7 19a2 2 0 100-4 2 2 0 000 4z",
    "M17 19a2 2 0 100-4 2 2 0 000 4z"
  ]} />
);
const IconStar = ({ filled = true, size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24"
       fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5">
    <path d="M12 2.5l2.95 6.55L22 10l-5.5 4.85L18.18 22 12 18.4 5.82 22l1.68-7.15L2 10l7.05-.95z"/>
  </svg>
);

Object.assign(window, {
  Icon, IconCheck, IconX, IconChevron, IconCart, IconSearch, IconUser, IconMenu,
  IconShield, IconRefresh, IconSnooze, IconLeaf, IconShipping, IconStar,
});