// Inline SVG icons + stylized product glyphs.
// All icons are 24x24 viewBox stroke-only so they inherit currentColor.

const Icon = {
  home:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 11.5 12 5l8 6.5V19a1 1 0 0 1-1 1h-4v-5h-6v5H5a1 1 0 0 1-1-1z"/></svg>,
  chat:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.5A8 8 0 1 1 21 12z"/></svg>,
  fridge: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M5 10h14M8 6.5v1.5M8 13.5V16"/></svg>,
  basket: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 8h16l-1.5 10a2 2 0 0 1-2 1.7H7.5a2 2 0 0 1-2-1.7L4 8z"/><path d="M8 8 10 4M16 8 14 4"/></svg>,
  recipe: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 4h10a3 3 0 0 1 3 3v13H8a2 2 0 0 1-2-2z"/><path d="M9 9h7M9 13h5"/></svg>,
  truck:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="1.7"/><circle cx="17" cy="18" r="1.7"/></svg>,
  pantry: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M4 9h16M4 15h16M9 3v18M15 3v18"/></svg>,
  cart:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 4h2l2.2 11.3a2 2 0 0 0 2 1.7h7.7a2 2 0 0 0 2-1.5L20.5 8H6"/><circle cx="10" cy="20" r="1.3"/><circle cx="17" cy="20" r="1.3"/></svg>,
  mic:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 12a7 7 0 0 0 14 0M12 19v3"/></svg>,
  camera: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.5"/></svg>,
  plus:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  minus:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14"/></svg>,
  check:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12l5 5 9-11"/></svg>,
  send:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12l16-8-7 18-2-8z"/></svg>,
  play:   (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M7 5l12 7-12 7z"/></svg>,
  x:      (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  attach: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 12.5 12.5 20a5 5 0 0 1-7-7l8-8a3.5 3.5 0 0 1 5 5l-8 8a2 2 0 1 1-3-3l7-7"/></svg>,
  spark:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 17l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/></svg>,
  arrow:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  back:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>,
  trash:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>,
  sound:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 10v4h3l5 4V6L7 10z"/><path d="M16 9a4 4 0 0 1 0 6M19 6a8 8 0 0 1 0 12"/></svg>,
  more:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" {...p}><circle cx="6" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="18" cy="12" r="1"/></svg>,
  clock:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  filter: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 5h16M7 12h10M10 19h4"/></svg>,
  grid:   (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg>,
  globe:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18"/></svg>,
  box:    (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 8 12 3 3 8v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></svg>,
  chart:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 20h16"/><rect x="5.5" y="11" width="3" height="6" rx="0.5"/><rect x="10.5" y="6" width="3" height="11" rx="0.5"/><rect x="15.5" y="13" width="3" height="4" rx="0.5"/></svg>,
  store:  (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 10v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9"/><path d="M3 9l1.6-4.4A1 1 0 0 1 5.5 4h13a1 1 0 0 1 .9.6L21 9a2.5 2.5 0 0 1-4.5 1.5 2.5 2.5 0 0 1-4.5 0 2.5 2.5 0 0 1-4.5 0A2.5 2.5 0 0 1 3 9z"/></svg>,
  megaphone:(p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 10v3a1 1 0 0 0 1 1h2l8 5V5L7 10H5a1 1 0 0 0-1 1z"/><path d="M18 9a3.5 3.5 0 0 1 0 6"/></svg>,
};

// Stylized product glyphs — abstract, minimal, monochrome.
// Drawn as simple geometric primitives so they read as "placeholder" but intentional.
const Glyph = ({ kind, ...rest }) => {
  const props = { viewBox: "0 0 64 64", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round", ...rest };
  switch (kind) {
    case 'tomato':
      return (<svg {...props}><circle cx="32" cy="36" r="18"/><path d="M22 22c4 0 6 2 10 2s6-2 10-2"/><path d="M32 18v6"/></svg>);
    case 'leaf':
      return (<svg {...props}><path d="M14 50c0-18 14-32 36-32-2 22-16 36-32 32"/><path d="M18 46 38 26"/></svg>);
    case 'leaf-bunch':
      return (<svg {...props}><path d="M18 50c-2-14 6-26 22-26-2 14-8 26-22 26z"/><path d="M40 50c2-14-6-26-22-26 2 14 8 26 22 26z"/></svg>);
    case 'sphere':
      return (<svg {...props}><circle cx="32" cy="32" r="18"/><ellipse cx="32" cy="32" rx="18" ry="6"/></svg>);
    case 'bottle':
      return (<svg {...props}><path d="M28 10h8v8l4 8v22a4 4 0 0 1-4 4h-8a4 4 0 0 1-4-4V26z"/><path d="M28 26h8"/></svg>);
    case 'pasta':
      return (<svg {...props}><path d="M14 20c4 4 8 0 14 8s2 16 8 22M22 18c4 4 8 0 14 8s2 16 8 22M30 16c4 4 8 0 14 8s2 16 8 22"/></svg>);
    case 'bulb':
      return (<svg {...props}><path d="M32 12c8 0 14 8 14 18s-6 22-14 22-14-12-14-22 6-18 14-18z"/><path d="M32 12v40M22 24c4 0 6 4 10 4s6-4 10-4"/></svg>);
    case 'onion':
      return (<svg {...props}><path d="M16 36c0-12 8-22 16-22s16 10 16 22-8 16-16 16-16-4-16-16z"/><path d="M32 14V10M26 14l-2-4M38 14l2-4M20 36c4 4 8 6 12 6s8-2 12-6"/></svg>);
    case 'chilli':
      return (<svg {...props}><path d="M12 50c10-2 18-8 26-16s12-18 12-22c-4 0-14 4-22 12s-14 16-16 26z"/><path d="M44 16c2-4 6-4 8-2"/></svg>);
    case 'lemon':
      return (<svg {...props}><ellipse cx="32" cy="32" rx="20" ry="14" transform="rotate(-20 32 32)"/><path d="M14 26c4 8 12 14 22 18M50 38c-4-8-12-14-22-18"/></svg>);
    case 'eggs':
      return (<svg {...props}><ellipse cx="22" cy="34" rx="10" ry="14"/><ellipse cx="40" cy="38" rx="10" ry="14"/></svg>);
    case 'bread':
      return (<svg {...props}><path d="M10 30c0-8 8-14 22-14s22 6 22 14c0 4-4 6-8 6v14H18V36c-4 0-8-2-8-6z"/><path d="M22 36l4 14M32 36l0 14M42 36l-4 14"/></svg>);
    case 'carton':
      return (<svg {...props}><path d="M18 18l14-8 14 8v34H18z"/><path d="M18 18l14 8 14-8M32 26v26"/></svg>);
    case 'block':
      return (<svg {...props}><path d="M12 22h32l8 8v18H12V30z"/><path d="M44 22l8 8M12 30h32V22"/></svg>);
    case 'avocado':
      return (<svg {...props}><path d="M32 10c10 0 18 10 18 22s-8 22-18 22-18-10-18-22 8-22 18-22z"/><circle cx="32" cy="38" r="6"/></svg>);
    case 'beans':
      return (<svg {...props}><path d="M18 22c0-6 4-10 10-10s10 4 10 10-4 14-10 14-10-8-10-14z"/><path d="M26 38c0-6 4-10 10-10s10 4 10 10-4 14-10 14-10-8-10-14z"/></svg>);
    default:
      return (<svg {...props}><circle cx="32" cy="32" r="16"/></svg>);
  }
};

window.Icon = Icon;
window.Glyph = Glyph;
