// Inline SVG icons. Stroke-style, 1.6 width to match the spotify/dark UI vibe.
const ICON_PROPS = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.7,
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

const Icon = (path) => (props) => (
  <svg {...ICON_PROPS} {...props}>{path}</svg>
);

const IconLogo = Icon(<>
  <rect x="3" y="4" width="18" height="14" rx="2.5"/>
  <path d="M3 8h18"/>
  <circle cx="9" cy="13" r="2"/>
  <path d="M14 16l3-3 4 4"/>
</>);

const IconHome = Icon(<>
  <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"/>
</>);

const IconImage = Icon(<>
  <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"/>
</>);

const IconShotList = Icon(<>
  <rect x="3" y="4" width="14" height="16" rx="2"/>
  <path d="M7 9h6M7 13h6M7 17h4"/>
  <rect x="17" y="7" width="4" height="3" rx="0.5" fill="currentColor" opacity="0.25" stroke="none"/>
  <rect x="17" y="7" width="4" height="3" rx="0.5"/>
</>);

const IconFolder = Icon(<>
  <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
</>);

const IconStar = Icon(<>
  <path d="M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.8l-5.5 2.8 1.2-6.1L3.3 9.3l6-.7z"/>
</>);

const IconTeam = Icon(<>
  <circle cx="9" cy="9" r="3"/>
  <circle cx="17" cy="11" r="2.5"/>
  <path d="M3 19c0-3 2.7-5 6-5s6 2 6 5M14 19c0-2 1.5-3.5 3.5-3.5s3.5 1.5 3.5 3.5"/>
</>);

const IconChevDouble = Icon(<>
  <path d="M9 6l6 6-6 6M3 6l6 6-6 6"/>
</>);

const IconChevDown = Icon(<>
  <path d="M6 9l6 6 6-6"/>
</>);

const IconChevRight = Icon(<>
  <path d="M9 6l6 6-6 6"/>
</>);

const IconSearch = Icon(<>
  <circle cx="11" cy="11" r="7"/>
  <path d="M20 20l-3.5-3.5"/>
</>);

const IconBell = Icon(<>
  <path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/>
  <path d="M10 18a2 2 0 0 0 4 0"/>
</>);

const IconShare = Icon(<>
  <circle cx="6" cy="12" r="2.5"/>
  <circle cx="18" cy="6" r="2.5"/>
  <circle cx="18" cy="18" r="2.5"/>
  <path d="M8 11l8-4M8 13l8 4"/>
</>);

const IconExport = Icon(<>
  <path d="M12 4v11M7 9l5-5 5 5"/>
  <path d="M5 17v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2"/>
</>);

const IconPlus = Icon(<>
  <path d="M12 5v14M5 12h14"/>
</>);

const IconGrid = Icon(<>
  <rect x="3.5" y="3.5" width="7" height="7" rx="1"/>
  <rect x="13.5" y="3.5" width="7" height="7" rx="1"/>
  <rect x="3.5" y="13.5" width="7" height="7" rx="1"/>
  <rect x="13.5" y="13.5" width="7" height="7" rx="1"/>
</>);

const IconRows = Icon(<>
  <rect x="3.5" y="4.5" width="17" height="4" rx="1"/>
  <rect x="3.5" y="10.5" width="17" height="4" rx="1"/>
  <rect x="3.5" y="16.5" width="17" height="4" rx="1"/>
</>);

const IconSun = Icon(<>
  <circle cx="12" cy="12" r="4"/>
  <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>
</>);

const IconMoon = Icon(<>
  <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>
</>);

const IconPlay = Icon(<>
  <path d="M7 5l12 7-12 7z" fill="currentColor"/>
</>);

const IconEdit = Icon(<>
  <path d="M4 20h4l10-10-4-4L4 16z"/>
  <path d="M14 6l4 4"/>
</>);

const IconCamera = Icon(<>
  <path d="M3 8a2 2 0 0 1 2-2h2l1.5-2h7L17 6h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  <circle cx="12" cy="13" r="3.5"/>
</>);

const IconClock = Icon(<>
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 7v5l3 2"/>
</>);

const IconLocation = Icon(<>
  <path d="M12 21s7-7.6 7-13a7 7 0 0 0-14 0c0 5.4 7 13 7 13z"/>
  <circle cx="12" cy="8" r="2.5"/>
</>);

const IconAperture = Icon(<>
  <circle cx="12" cy="12" r="9"/>
  <path d="M12 3v9l8 4M3 12h9l4 8M12 21V12L4 8M21 12h-9L8 4"/>
</>);

const IconColumns = Icon(<>
  <rect x="3" y="4" width="18" height="16" rx="2"/>
  <path d="M9 4v16M15 4v16"/>
</>);

const IconMore = Icon(<>
  <circle cx="6" cy="12" r="1.4" fill="currentColor"/>
  <circle cx="12" cy="12" r="1.4" fill="currentColor"/>
  <circle cx="18" cy="12" r="1.4" fill="currentColor"/>
</>);

const IconTrash = Icon(<>
  <path d="M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/>
  <path d="M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/>
  <path d="M10 11v7M14 11v7"/>
</>);

const IconDuplicate = Icon(<>
  <rect x="8" y="8" width="12" height="12" rx="2"/>
  <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
</>);

const IconImageEmpty = Icon(<>
  <rect x="3" y="4" width="18" height="16" rx="2"/>
  <circle cx="9" cy="10" r="1.5"/>
  <path d="M21 16l-5-5-9 9"/>
</>);

const IconCheck = Icon(<>
  <path d="M5 12l5 5L20 7"/>
</>);

// expose globally
Object.assign(window, {
  IconLogo, IconHome, IconImage, IconShotList, IconFolder, IconStar, IconTeam,
  IconChevDouble, IconChevDown, IconChevRight, IconSearch, IconBell, IconShare,
  IconExport, IconPlus, IconGrid, IconRows, IconSun, IconMoon, IconPlay, IconEdit,
  IconCamera, IconClock, IconLocation, IconAperture, IconColumns, IconMore, IconTrash,
  IconDuplicate, IconImageEmpty, IconCheck,
});