// Inline SVG icon set. All icons are 24x24 viewbox, stroke=currentColor, fill=none,
// strokeWidth=1.6 by default. Pass {size, strokeWidth, ...rest} to override.

const Icon = ({ children, 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}>
    {children}
  </svg>
);

const IconSearch    = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></Icon>;
const IconCal       = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M3 10h18M8 3v4M16 3v4"/></Icon>;
const IconCog       = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></Icon>;
const IconChevron   = (p) => <Icon {...p}><path d="m9 6 6 6-6 6"/></Icon>;
const IconChevronDn = (p) => <Icon {...p}><path d="m6 9 6 6 6-6"/></Icon>;
const IconUser      = (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></Icon>;
const IconUsers     = (p) => <Icon {...p}><circle cx="9" cy="9" r="3.5"/><path d="M2 20a7 7 0 0 1 14 0"/><circle cx="17" cy="8" r="3"/><path d="M16 20a7 7 0 0 1 6-3"/></Icon>;
const IconPin       = (p) => <Icon {...p}><path d="M12 22s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12Z"/><circle cx="12" cy="10" r="2.5"/></Icon>;
const IconBox       = (p) => <Icon {...p}><path d="M3 7.5 12 3l9 4.5v9L12 21 3 16.5v-9Z"/><path d="m3 7.5 9 4.5 9-4.5M12 12v9"/></Icon>;
const IconSend      = (p) => <Icon {...p}><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4 20-7Z"/></Icon>;
const IconDownload  = (p) => <Icon {...p}><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></Icon>;
const IconLink      = (p) => <Icon {...p}><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.2 1.2"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.2-1.2"/></Icon>;
const IconTag       = (p) => <Icon {...p}><path d="m20.6 12.6-8 8a2 2 0 0 1-2.8 0l-7.4-7.4V3h10.2l8 8a2 2 0 0 1 0 2.8z"/><circle cx="7.5" cy="7.5" r="1.3" fill="currentColor" stroke="none"/></Icon>;
const IconFilter    = (p) => <Icon {...p}><path d="M3 5h18l-7 9v6l-4-2v-4L3 5Z"/></Icon>;
const IconClose     = (p) => <Icon {...p}><path d="M6 6l12 12M18 6 6 18"/></Icon>;
const IconCheck     = (p) => <Icon {...p}><path d="m5 12 4.5 4.5L19 7"/></Icon>;
const IconPlus      = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconExpand    = (p) => <Icon {...p}><path d="M9 5H5v4M19 9V5h-4M15 19h4v-4M5 15v4h4"/></Icon>;
const IconClock     = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;
const IconMore      = (p) => <Icon {...p}><circle cx="5"  cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></Icon>;
const IconArrowR    = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>;
const IconArrowL    = (p) => <Icon {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></Icon>;
const IconCard      = (p) => <Icon {...p}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h4"/></Icon>;
const IconMail      = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></Icon>;
const IconPhone     = (p) => <Icon {...p}><path d="M22 17v3a2 2 0 0 1-2.2 2A20 20 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L7.9 9.6a16 16 0 0 0 6.5 6.5l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6A2 2 0 0 1 22 17z"/></Icon>;
const IconSort      = (p) => <Icon {...p}><path d="M7 4v16M3 8l4-4 4 4M17 20V4M21 16l-4 4-4-4"/></Icon>;
const IconLayoutCols= (p) => <Icon {...p}><rect x="3" y="4" width="7" height="16" rx="1.5"/><rect x="14" y="4" width="7" height="16" rx="1.5"/></Icon>;
const IconLayoutRows= (p) => <Icon {...p}><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/></Icon>;

// Product-specific glyphs — used as the visual mark on browse tiles + result rows.
const GlyphAfternoonTea = (p) => <Icon {...p} strokeWidth={1.4}><path d="M5 9h12a3 3 0 0 1 0 6h-1"/><path d="M5 9v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3"/><path d="M8 4c1 1.2.5 2 0 3M11 3c1 1.2.5 2 0 3M14 4c1 1.2.5 2 0 3"/></Icon>;
const GlyphBrunch       = (p) => <Icon {...p} strokeWidth={1.4}><path d="M3 11h18l-1 5a3 3 0 0 1-3 2.5H7A3 3 0 0 1 4 16Z"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/><path d="M12 5V3"/></Icon>;
const GlyphLunch        = (p) => <Icon {...p} strokeWidth={1.4}><circle cx="12" cy="12" r="8"/><path d="M6 12h12M9 8c1 1.5 5 1.5 6 0"/></Icon>;
const GlyphDinner       = (p) => <Icon {...p} strokeWidth={1.4}><path d="M6 3v18M6 3c2 0 3 2 3 4s-1 4-3 4"/><path d="M18 3v18M18 11v-4a4 4 0 0 0-2-3"/></Icon>;
const GlyphEntry        = (p) => <Icon {...p} strokeWidth={1.4}><path d="M5 21V5a2 2 0 0 1 2-2h7l3 3v15"/><path d="M5 21h14"/><circle cx="13" cy="13" r="1.3" fill="currentColor" stroke="none"/></Icon>;
const GlyphCocktail     = (p) => <Icon {...p} strokeWidth={1.4}><path d="M4 5h16l-8 8Z"/><path d="M12 13v7M8 20h8"/><path d="M15 4c1-1 2-1 3 0"/></Icon>;
const GlyphBarReserved  = (p) => <Icon {...p} strokeWidth={1.4}><path d="M5 12V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4"/><rect x="4" y="12" width="16" height="6" rx="2"/><path d="M7 18v2M17 18v2"/></Icon>;
const GlyphKaraoke      = (p) => <Icon {...p} strokeWidth={1.4}><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3Z"/><path d="M6 11a6 6 0 0 0 12 0M12 17v4M9 21h6"/></Icon>;

const PRODUCT_GLYPHS = {
  'afternoon-tea': GlyphAfternoonTea,
  'bottomless-brunch': GlyphBrunch,
  'lunch': GlyphLunch,
  'dinner': GlyphDinner,
  'entry': GlyphEntry,
  'cocktail': GlyphCocktail,
  'bar-reservation': GlyphBarReserved,
  'karaoke': GlyphKaraoke,
};

Object.assign(window, {
  Icon, IconSearch, IconCal, IconCog, IconChevron, IconChevronDn, IconUser, IconUsers,
  IconPin, IconBox, IconSend, IconDownload, IconLink, IconTag, IconFilter, IconClose,
  IconCheck, IconPlus, IconExpand, IconClock, IconMore, IconArrowR, IconArrowL,
  IconCard, IconMail, IconPhone, IconSort, IconLayoutCols, IconLayoutRows,
  PRODUCT_GLYPHS,
});
