// AKAI — Icons (line, 24px). Used across the app.
const Icon = {
  Logo: ({ size = 28, color = "currentColor" }) => (
    // AKAI wordmark — minimal recreation in flat type for the prototype
    <svg width={size * 2.6} height={size} viewBox="0 0 130 36" fill="none" aria-label="AKAI">
      <text x="0" y="28" fontFamily="Nunito Sans, sans-serif" fontWeight="900" fontSize="30" letterSpacing="2" fill={color}>AKAI</text>
    </svg>
  ),
  Search: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" strokeLinecap="round" />
    </svg>
  ),
  User: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="12" cy="8" r="4" /><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6" strokeLinecap="round" />
    </svg>
  ),
  Bag: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M5 8h14l-1.2 11.2A2 2 0 0 1 15.8 21H8.2a2 2 0 0 1-2-1.8L5 8Z" />
      <path d="M9 8V6a3 3 0 0 1 6 0v2" strokeLinecap="round" />
    </svg>
  ),
  Heart: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z" strokeLinejoin="round"/>
    </svg>
  ),
  Menu: (p) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <path d="M4 7h16M4 12h16M4 17h16"/>
    </svg>
  ),
  Close: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}>
      <path d="m6 6 12 12M18 6 6 18"/>
    </svg>
  ),
  Chev: ({ dir = "right", ...p }) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
         style={{ transform: dir === "left" ? "rotate(180deg)" : dir === "down" ? "rotate(90deg)" : dir === "up" ? "rotate(-90deg)" : "none" }} {...p}>
      <path d="m9 6 6 6-6 6"/>
    </svg>
  ),
  Plus: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>
  ),
  Minus: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M5 12h14"/></svg>
  ),
  Check: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m5 12 5 5L20 7"/></svg>
  ),
  Spark: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6" strokeLinecap="round"/></svg>
  ),
  // Category illustrative icons (thin)
  CatTV: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <rect x="5" y="9" width="38" height="24" rx="2.5"/>
      <path d="M16 39h16M24 33v6" strokeLinecap="round"/>
    </svg>
  ),
  CatClimate: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <rect x="5" y="10" width="38" height="14" rx="3"/>
      <path d="M10 24v3M16 24v5M22 24v3M28 24v5M34 24v3M40 24v5" strokeLinecap="round"/>
      <path d="M9 35c4 2 8-2 12 0s8 2 12 0 6-2 8 0" strokeLinecap="round"/>
    </svg>
  ),
  CatAudio: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <rect x="6" y="6" width="36" height="36" rx="4"/>
      <circle cx="24" cy="28" r="8"/>
      <circle cx="24" cy="28" r="2.5"/>
      <circle cx="36" cy="14" r="1.5" fill="currentColor"/>
    </svg>
  ),
  CatAcc: (p) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" {...p}>
      <rect x="18" y="5" width="12" height="38" rx="6"/>
      <circle cx="24" cy="13" r="1.5" fill="currentColor"/>
      <path d="M21 19h6M21 24h6M21 29h6M21 34h6" strokeLinecap="round"/>
    </svg>
  ),
  // Feature icons
  Hz: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M3 13s2-6 5-6 4 10 7 10 4-6 6-6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Hdr: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 3v18M3 12h18" strokeLinecap="round"/>
    </svg>
  ),
  Speaker: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M4 9h4l5-4v14l-5-4H4z" strokeLinejoin="round"/>
      <path d="M17 9c1.5 1 1.5 5 0 6M19 7c2.5 2 2.5 8 0 10" strokeLinecap="round"/>
    </svg>
  ),
  Truck: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M3 7h11v9H3zM14 11h4l3 3v2h-7"/>
      <circle cx="7.5" cy="17.5" r="1.8"/><circle cx="17.5" cy="17.5" r="1.8"/>
    </svg>
  ),
  Shield: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M12 3 4 6v6c0 5 4 8 8 9 4-1 8-4 8-9V6l-8-3Z" strokeLinejoin="round"/>
      <path d="m9 12 2 2 4-4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Phone: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 4h4l2 5-3 2c1 3 3 5 6 6l2-3 5 2v4c0 1-1 2-2 2A16 16 0 0 1 3 6c0-1 1-2 2-2Z" strokeLinejoin="round"/>
    </svg>
  ),
  Pin: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12Z"/>
      <circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
};

Object.assign(window, { Icon });
