// Huul icon set — original flat line/solid icons, 24px viewport.
// All stroke-based with currentColor so we can color via CSS.

const Icon = ({ children, size = 20, color = 'currentColor', style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
    style={{ flexShrink: 0, ...style }}>
    {children}
  </svg>
);

const IconChevronR = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const IconChevronL = (p) => <Icon {...p}><path d="M15 6l-6 6 6 6"/></Icon>;
const IconChevronD = (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>;
const IconPlus     = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconCheck    = (p) => <Icon {...p}><path d="M4 12l5 5L20 6"/></Icon>;
const IconX        = (p) => <Icon {...p}><path d="M6 6l12 12M18 6L6 18"/></Icon>;
const IconEdit     = (p) => <Icon {...p}><path d="M4 20h4l10.5-10.5a2.1 2.1 0 00-3-3L5 17v3z"/><path d="M14 6l3 3"/></Icon>;
const IconTrash    = (p) => <Icon {...p}><path d="M4 7h16M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13"/></Icon>;
const IconShare    = (p) => <Icon {...p}><path d="M12 3v13"/><path d="M7 8l5-5 5 5"/><path d="M5 14v5a2 2 0 002 2h10a2 2 0 002-2v-5"/></Icon>;
const IconSearch   = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></Icon>;
const IconLink     = (p) => <Icon {...p}><path d="M10 14a4 4 0 015.66 0l2.83-2.83a4 4 0 00-5.66-5.66L11 7.17"/><path d="M14 10a4 4 0 01-5.66 0L5.51 12.83a4 4 0 005.66 5.66L13 16.83"/></Icon>;
const IconStore    = (p) => <Icon {...p}><path d="M4 9l1-5h14l1 5"/><path d="M5 9v10a1 1 0 001 1h12a1 1 0 001-1V9"/><path d="M4 9h16"/></Icon>;
const IconUser     = (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></Icon>;
const IconGrid     = (p) => <Icon {...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"/></Icon>;
const IconList     = (p) => <Icon {...p}><path d="M4 6h16M4 12h16M4 18h16"/></Icon>;
const IconCamera   = (p) => <Icon {...p}><path d="M4 8h3l2-3h6l2 3h3a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V9a1 1 0 011-1z"/><circle cx="12" cy="13" r="4"/></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1A1.7 1.7 0 004.6 9a1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h0A1.7 1.7 0 009 3.1V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v0a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></Icon>;
const IconHome     = (p) => <Icon {...p}><path d="M3 11l9-7 9 7"/><path d="M5 10v10a1 1 0 001 1h3v-6h6v6h3a1 1 0 001-1V10"/></Icon>;
const IconEye      = (p) => <Icon {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></Icon>;
const IconCopy     = (p) => <Icon {...p}><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 00-2-2H5a2 2 0 00-2 2v9a2 2 0 002 2h3"/></Icon>;
const IconImage    = (p) => <Icon {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5-9 9"/></Icon>;
const IconSparkle  = (p) => <Icon {...p}><path d="M12 3l1.5 5 5 1.5-5 1.5L12 16l-1.5-5-5-1.5 5-1.5L12 3z"/><path d="M19 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8.8-2z"/></Icon>;
const IconArrowR   = (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>;
const IconDrag     = (p) => <Icon {...p}><circle cx="9" cy="6" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="6" r="1.2" fill="currentColor" stroke="none"/><circle cx="9" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="9" cy="18" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="18" r="1.2" fill="currentColor" stroke="none"/></Icon>;
const IconBack     = (p) => <Icon {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></Icon>;
const IconChart    = (p) => <Icon {...p}><path d="M4 20V14"/><path d="M9 20V8"/><path d="M14 20V11"/><path d="M19 20V4"/></Icon>;

// Brand marks — simplified, monochrome, for social bento tiles
const IconIG = ({ size=26 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <rect x="3" y="3" width="18" height="18" rx="5" stroke="#E4405F" strokeWidth="1.8"/>
    <circle cx="12" cy="12" r="4" stroke="#E4405F" strokeWidth="1.8"/>
    <circle cx="17.5" cy="6.5" r="1.1" fill="#E4405F"/>
  </svg>
);
const IconTikTok = ({ size=26 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="#0F0F10">
    <path d="M16.5 3c.2 1.6 1 3 2.2 3.9 1 .7 2.2 1.1 3.3 1.1v3.3c-1.5 0-3-.3-4.3-.9-.6-.3-1.2-.6-1.7-1v6.3c0 3.6-2.9 6.5-6.5 6.5S3 19.2 3 15.6 5.9 9 9.5 9c.4 0 .7 0 1.1.1v3.4c-.3-.1-.7-.2-1.1-.2-1.7 0-3.2 1.4-3.2 3.2 0 1.8 1.4 3.2 3.2 3.2s3.2-1.4 3.2-3.2V3h3.8z"/>
  </svg>
);
const IconX_Brand = ({ size=26 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="#0F0F10">
    <path d="M17.5 3h3.3l-7.2 8.2L22 21h-6.5l-5.1-6.6L4.5 21H1.2l7.7-8.8L1 3h6.7l4.6 6.1L17.5 3zm-1.2 16h1.8L7.8 5H5.9l10.4 14z"/>
  </svg>
);
const IconFB = ({ size=26 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="#1877F2">
    <path d="M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.6V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.3.2 2.3.2v2.5h-1.3c-1.3 0-1.7.8-1.7 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0022 12z"/>
  </svg>
);
const IconYT = ({ size=26 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="#FF0000">
    <path d="M22.5 8.2a2.8 2.8 0 00-2-2C18.8 5.8 12 5.8 12 5.8s-6.8 0-8.5.4a2.8 2.8 0 00-2 2C1.2 9.9 1.2 12 1.2 12s0 2.1.3 3.8a2.8 2.8 0 002 2C5.2 18.2 12 18.2 12 18.2s6.8 0 8.5-.4a2.8 2.8 0 002-2c.3-1.7.3-3.8.3-3.8s0-2.1-.3-3.8zM9.8 15.3V8.7l5.6 3.3-5.6 3.3z"/>
  </svg>
);
const IconLI = ({ size=26 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="#0A66C2">
    <path d="M20.4 3H3.6A.6.6 0 003 3.6v16.8a.6.6 0 00.6.6h16.8a.6.6 0 00.6-.6V3.6a.6.6 0 00-.6-.6zM8.3 18.3H5.6V9.8h2.7v8.5zM7 8.6a1.6 1.6 0 110-3.1 1.6 1.6 0 010 3.1zm11.3 9.7h-2.7v-4.2c0-1-.4-1.7-1.3-1.7a1.4 1.4 0 00-1.3 1c-.1.2-.1.4-.1.6v4.3H10.2V9.8h2.7v1.2a2.7 2.7 0 012.4-1.3c1.8 0 3 1.2 3 3.6v5z"/>
  </svg>
);
const IconWhatsApp = ({ size=22, color='#fff' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1c-.2.3-.8.9-1 1.1s-.4.2-.6.1c-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1s0-.4.1-.6l.4-.5c.1-.1.2-.3.3-.5s0-.3 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.5c-.2 0-.5.1-.7.3-.3.3-.9 1-.9 2.3s1 2.7 1.1 2.9c.1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 2-1.4s.3-1.3.2-1.4c-.1-.1-.3-.2-.6-.3z M12 2a10 10 0 00-8.5 15.2L2 22l4.9-1.4A10 10 0 1012 2zm0 18.2a8.2 8.2 0 01-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1112 20.2z"/>
  </svg>
);

Object.assign(window, {
  Icon, IconChevronR, IconChevronL, IconChevronD, IconPlus, IconCheck, IconX,
  IconEdit, IconTrash, IconShare, IconSearch, IconLink, IconStore, IconUser,
  IconGrid, IconList, IconCamera, IconSettings, IconHome, IconEye, IconCopy,
  IconImage, IconSparkle, IconArrowR, IconDrag, IconBack, IconChart,
  IconIG, IconTikTok, IconX_Brand, IconFB, IconYT, IconLI, IconWhatsApp,
});
