// Minimal stroke-based icon set. All 24x24, currentColor.
const Icon = ({ children, size = 20, className = '', stroke = 1.5, ...rest }) => (
  <svg
    width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke}
    strokeLinecap="round" strokeLinejoin="round"
    className={className} {...rest}
  >{children}</svg>
);

const IBed = (p) => <Icon {...p}><path d="M3 18v-6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v6"/><path d="M3 14h18"/><path d="M3 18v3"/><path d="M21 18v3"/><circle cx="8" cy="11" r="1.4"/></Icon>;
const IBroom = (p) => <Icon {...p}><path d="M14 4l6 6"/><path d="M16 6l-7 7"/><path d="M9 13l-5 5c-.7.7-.4 2 .5 2.3l4 1.3c1 .3 2-.3 2.2-1.3l1.3-4c.3-.9-.3-1.9-1.3-2.2L9 13z"/></Icon>;
const ICheck = (p) => <Icon {...p}><path d="M4 12.5l5 5L20 6.5"/></Icon>;
const IClipboard = (p) => <Icon {...p}><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 3h6v3H9z"/><path d="M9 11h6"/><path d="M9 15h4"/></Icon>;
const IWrench = (p) => <Icon {...p}><path d="M14.5 3.5a4.5 4.5 0 0 0-5.4 5.4l-6 6a2 2 0 1 0 2.8 2.8l6-6a4.5 4.5 0 0 0 5.4-5.4l-2.6 2.6-2.5-.3-.3-2.5z"/></Icon>;
const IChat = (p) => <Icon {...p}><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4l-1 3.5A8 8 0 0 1 21 12z"/><path d="M8 11h8"/><path d="M8 14h5"/></Icon>;
const ICoffee = (p) => <Icon {...p}><path d="M4 10h13v5a5 5 0 0 1-10 0v0"/><path d="M17 11h2a2 2 0 0 1 0 5h-2"/><path d="M8 4c0 1-1 1.5-1 3"/><path d="M12 4c0 1-1 1.5-1 3"/></Icon>;
const IChart = (p) => <Icon {...p}><path d="M4 20V8"/><path d="M10 20V4"/><path d="M16 20v-8"/><path d="M3 20h18"/></Icon>;
const ICalendar = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18"/><path d="M8 3v4"/><path d="M16 3v4"/></Icon>;
const IBell = (p) => <Icon {...p}><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 19a2 2 0 0 0 4 0"/></Icon>;
const IArrow = (p) => <Icon {...p}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></Icon>;
const IArrowDown = (p) => <Icon {...p}><path d="M12 5v14"/><path d="M6 13l6 6 6-6"/></Icon>;
const ISpark = (p) => <Icon {...p}><path d="M12 3l1.8 4.6L18 9l-4.2 1.4L12 15l-1.8-4.6L6 9l4.2-1.4z"/><path d="M19 16l.7 1.8L21 19l-1.3.4L19 21l-.7-1.6L17 19l1.3-.4z"/></Icon>;
const IShield = (p) => <Icon {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></Icon>;
const IUsers = (p) => <Icon {...p}><circle cx="9" cy="8" r="3"/><path d="M3 20c.5-3 3-5 6-5s5.5 2 6 5"/><circle cx="17" cy="9" r="2.2"/><path d="M15 20c.3-2 1.5-3.5 3.5-3.5S21 18 21.5 20"/></Icon>;
const IKey = (p) => <Icon {...p}><circle cx="8" cy="15" r="3.5"/><path d="M10.5 12.5l8-8"/><path d="M14 7l3 3"/></Icon>;
const ICircle = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/></Icon>;
const IDot = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/></Icon>;
const IClose = (p) => <Icon {...p}><path d="M6 6l12 12M18 6L6 18"/></Icon>;
const IMenu = (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>;
const IPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const ISearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></Icon>;
const IBolt = (p) => <Icon {...p}><path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z"/></Icon>;
const IPhone = (p) => <Icon {...p}><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 19h2"/></Icon>;
const ITablet = (p) => <Icon {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M11 18h2"/></Icon>;
const ILaptop = (p) => <Icon {...p}><rect x="4" y="5" width="16" height="10" rx="1.5"/><path d="M2 19h20"/></Icon>;

// HotelApps brand mark — actual logo asset
const Logo = ({ size = 28 }) => (
  <img
    src="assets/logo-icon.png"
    alt="HotelApps"
    width={size}
    height={Math.round(size * 371 / 314)}
    style={{ display: 'block', objectFit: 'contain' }}
  />
);

Object.assign(window, {
  Icon, Logo,
  IBed, IBroom, ICheck, IClipboard, IWrench, IChat, ICoffee, IChart,
  ICalendar, IBell, IArrow, IArrowDown, ISpark, IShield, IUsers, IKey,
  ICircle, IDot, IClose, IMenu, IPlus, ISearch, IBolt, IPhone, ITablet, ILaptop
});