// SVG icons — 1.5px stroke, rounded caps/joins. Match SF Symbols outline style.
const Icon = ({ children, size = 20, className = "", style = {} }) => (
  <svg
    viewBox="0 0 24 24"
    width={size}
    height={size}
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    style={style}
    aria-hidden="true"
  >
    {children}
  </svg>
);

const IconLocation = (p) => <Icon {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z" /><circle cx="12" cy="10" r="3" /></Icon>;
const IconCalendar = (p) => <Icon {...p}><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></Icon>;
const IconPlayers = (p) => <Icon {...p}><circle cx="9" cy="8" r="4" /><path d="M3 21c0-3 3-6 6-6s6 3 6 6" /><circle cx="17" cy="7" r="3" /><path d="M21 19c0-2-2-4-4-4" /></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></Icon>;
const IconMessage = (p) => <Icon {...p}><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" /></Icon>;
const IconProfile = (p) => <Icon {...p}><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-7 8-7s8 3 8 7" /></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M20 6L9 17l-5-5" /></Icon>;
const IconArrow = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7" /></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14" /></Icon>;
const IconStar = (p) => <Icon {...p}><path d="M12 2l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-1.5z" /></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8" /></Icon>;
const IconMenu = (p) => <Icon {...p}><path d="M3 6h18M3 12h18M3 18h18" /></Icon>;
const IconClose = (p) => <Icon {...p}><path d="M6 6l12 12M18 6l-12 12" /></Icon>;
const IconCoffee = (p) => <Icon {...p}><path d="M6 2v3M10 2v3M14 2v3M4 8h14v7a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM18 9h2a2 2 0 1 1 0 4h-2" /></Icon>;
const IconHeart = (p) => <Icon {...p}><path d="M12 21s-8-5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-8 11-8 11z" /></Icon>;
const IconFilter = (p) => <Icon {...p}><path d="M3 6h18M6 12h12M10 18h4" /></Icon>;
const IconTrophy = (p) => <Icon {...p}><path d="M8 4h8v6a4 4 0 0 1-8 0zM4 4h4v3a3 3 0 0 1-3-3zM20 4h-4v3a3 3 0 0 0 3-3zM12 14v4M8 21h8" /></Icon>;

// tile glyph — simplified mahjong tile outline
const TileGlyph = ({ size = 40, style = {} }) => (
  <svg width={size} height={size * 1.35} viewBox="0 0 40 54" fill="none" style={style} aria-hidden="true">
    <rect x="2" y="2" width="36" height="50" rx="5" fill="#FFF" stroke="currentColor" strokeWidth="1.5" />
    <circle cx="20" cy="18" r="5" fill="none" stroke="currentColor" strokeWidth="1.5" />
    <circle cx="13" cy="33" r="3" fill="currentColor" />
    <circle cx="27" cy="33" r="3" fill="currentColor" />
    <circle cx="20" cy="44" r="3" fill="currentColor" />
  </svg>
);

Object.assign(window, {
  Icon, IconLocation, IconCalendar, IconClock, IconPlayers, IconSearch,
  IconMessage, IconProfile, IconCheck, IconArrow, IconPlus, IconStar,
  IconSparkle, IconMenu, IconClose, IconCoffee, IconHeart, IconFilter, IconTrophy,
  TileGlyph
});