// Custom SVG icons for wishlist categories and principles.
// Consistent: 48×48 viewBox, bold 2.5-stroke line, warm palette accents.

const I = ({ children, size = 44, fill, ...rest }) => (
  <svg viewBox="0 0 48 48" width={size} height={size} fill="none" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {children}
  </svg>
);

// --- Wishlist icons ---
const IconHeadphones = (p) => (
  <I {...p}>
    <path d="M8 28 Q 8 10 24 10 Q 40 10 40 28" stroke="#2B1A14" />
    <rect x="6" y="26" width="10" height="16" rx="3" fill="#FF6B4A" stroke="#2B1A14" />
    <rect x="32" y="26" width="10" height="16" rx="3" fill="#FF6B4A" stroke="#2B1A14" />
    <circle cx="11" cy="34" r="1.6" fill="#FFD36B" />
    <circle cx="37" cy="34" r="1.6" fill="#FFD36B" />
  </I>
);
const IconShoe = (p) => (
  <I {...p}>
    <path d="M6 32 L 6 26 L 14 22 L 20 18 L 26 20 L 30 26 L 42 30 L 42 34 L 6 34 Z" fill="#FFD36B" stroke="#2B1A14" />
    <path d="M18 22 L 20 26 M24 20 L 26 24" stroke="#2B1A14" />
    <path d="M6 34 L 42 34" stroke="#FF6B4A" strokeWidth="2.5" />
  </I>
);
const IconTent = (p) => (
  <I {...p}>
    <path d="M6 38 L 24 10 L 42 38 Z" fill="#1F5A3F" stroke="#2B1A14" />
    <path d="M24 10 L 24 38" stroke="#2B1A14" />
    <path d="M20 38 L 24 28 L 28 38" fill="#FFD36B" stroke="#2B1A14" />
  </I>
);
const IconCoffee = (p) => (
  <I {...p}>
    <path d="M10 16 L 12 38 L 32 38 L 34 16 Z" fill="#FFF4E2" stroke="#2B1A14" />
    <path d="M34 20 L 40 20 Q 42 20 42 24 L 42 28 Q 42 32 38 32 L 33 32" stroke="#2B1A14" />
    <path d="M16 8 Q 14 12 16 14 M22 8 Q 20 12 22 14 M28 8 Q 26 12 28 14" stroke="#E0502F" />
  </I>
);
const IconCamera = (p) => (
  <I {...p}>
    <path d="M14 14 L 18 10 L 30 10 L 34 14 L 42 14 Q 44 14 44 16 L 44 36 Q 44 38 42 38 L 6 38 Q 4 38 4 36 L 4 16 Q 4 14 6 14 Z" fill="#FFB05A" stroke="#2B1A14" />
    <circle cx="24" cy="26" r="8" fill="#FFF4E2" stroke="#2B1A14" />
    <circle cx="24" cy="26" r="4" fill="#2B1A14" />
    <circle cx="38" cy="19" r="1.5" fill="#2B1A14" />
  </I>
);
const IconPan = (p) => (
  <I {...p}>
    <ellipse cx="20" cy="28" rx="14" ry="4" fill="#2B1A14" />
    <ellipse cx="20" cy="26" rx="14" ry="4" fill="#FFD36B" stroke="#2B1A14" />
    <path d="M34 26 L 44 24" stroke="#2B1A14" />
    <circle cx="16" cy="24" r="1.5" fill="#FF6B4A" />
    <circle cx="22" cy="22" r="1.5" fill="#FF6B4A" />
  </I>
);
const IconGamepad = (p) => (
  <I {...p}>
    <path d="M10 18 Q 4 18 4 28 Q 4 36 10 36 Q 14 36 16 32 L 32 32 Q 34 36 38 36 Q 44 36 44 28 Q 44 18 38 18 Q 34 18 32 22 L 16 22 Q 14 18 10 18 Z" fill="#FF6B4A" stroke="#2B1A14" />
    <rect x="10" y="26" width="6" height="2" fill="#2B1A14" />
    <rect x="12" y="24" width="2" height="6" fill="#2B1A14" />
    <circle cx="34" cy="26" r="1.5" fill="#FFD36B" />
    <circle cx="38" cy="30" r="1.5" fill="#FFD36B" />
  </I>
);
const IconWatch = (p) => (
  <I {...p}>
    <rect x="14" y="6" width="20" height="8" fill="#2B1A14" />
    <rect x="14" y="34" width="20" height="8" fill="#2B1A14" />
    <rect x="10" y="14" width="28" height="20" rx="4" fill="#FFF4E2" stroke="#2B1A14" />
    <path d="M24 20 L 24 24 L 28 26" stroke="#FF6B4A" strokeWidth="2.5" />
  </I>
);
const IconIsland = (p) => (
  <I {...p}>
    <ellipse cx="24" cy="38" rx="18" ry="4" fill="#F5DDA8" stroke="#2B1A14" />
    <path d="M22 36 L 22 20" stroke="#6B3A1E" strokeWidth="3" />
    <path d="M22 20 Q 10 16 8 22 M22 20 Q 34 16 36 22 M22 20 Q 14 12 12 18 M22 20 Q 30 12 32 18" stroke="#1F5A3F" strokeWidth="3" fill="none" />
    <path d="M6 42 Q 12 38 18 42 T 30 42 T 42 42" stroke="#5FB7E0" strokeWidth="2" fill="none" />
  </I>
);
const IconTicket = (p) => (
  <I {...p}>
    <path d="M4 14 L 44 14 Q 44 18 40 18 L 40 30 Q 44 30 44 34 L 4 34 Q 4 30 8 30 L 8 18 Q 4 18 4 14 Z" fill="#FF9EC0" stroke="#2B1A14" />
    <path d="M20 14 L 20 34" stroke="#2B1A14" strokeDasharray="2 2" />
    <path d="M28 20 L 32 24 L 36 20 M30 24 L 30 30" stroke="#2B1A14" />
  </I>
);
const IconShirt = (p) => (
  <I {...p}>
    <path d="M8 14 L 16 8 L 22 12 L 26 12 L 32 8 L 40 14 L 36 20 L 32 18 L 32 40 L 16 40 L 16 18 L 12 20 Z" fill="#6FD2D7" stroke="#2B1A14" />
  </I>
);
const IconSparkle = (p) => (
  <I {...p}>
    <path d="M24 6 L 26 20 L 40 22 L 26 24 L 24 38 L 22 24 L 8 22 L 22 20 Z" fill="#FFD36B" stroke="#2B1A14" />
    <circle cx="10" cy="10" r="1.5" fill="#FF6B4A" />
    <circle cx="40" cy="38" r="1.5" fill="#FF6B4A" />
  </I>
);
const IconHibiscus = (p) => (
  <I {...p}>
    {[0, 72, 144, 216, 288].map((r, i) => (
      <ellipse key={i} cx="24" cy="14" rx="7" ry="10" fill="#FF3D6E" stroke="#2B1A14" transform={`rotate(${r} 24 24)`} />
    ))}
    <circle cx="24" cy="24" r="4" fill="#FFD36B" stroke="#2B1A14" />
  </I>
);

// --- Principle icons ---
const IconVault = (p) => (
  <I {...p}>
    <rect x="6" y="10" width="36" height="28" rx="3" fill="#FFF4E2" stroke="#2B1A14" />
    <circle cx="30" cy="24" r="7" fill="none" stroke="#2B1A14" />
    <circle cx="30" cy="24" r="2" fill="#FF6B4A" />
    <path d="M30 17 L 30 14 M37 24 L 40 24 M30 31 L 30 34 M23 24 L 20 24" stroke="#2B1A14" />
    <rect x="10" y="14" width="8" height="4" fill="#FFD36B" stroke="#2B1A14" />
  </I>
);
const IconNoDebt = (p) => (
  <I {...p}>
    <circle cx="24" cy="24" r="18" fill="#FF9EC0" stroke="#2B1A14" />
    <path d="M11 11 L 37 37" stroke="#E0502F" strokeWidth="3.5" />
    <path d="M18 20 L 18 28 M22 20 L 22 28 M26 20 L 26 28 M30 20 L 30 28" stroke="#2B1A14" />
  </I>
);
const IconKey = (p) => (
  <I {...p}>
    <circle cx="14" cy="24" r="8" fill="#FFD36B" stroke="#2B1A14" />
    <circle cx="14" cy="24" r="2.5" fill="#2B1A14" />
    <path d="M22 24 L 42 24 L 42 30 M34 24 L 34 30 M38 24 L 38 28" stroke="#2B1A14" strokeWidth="2.5" />
  </I>
);
const IconEye = (p) => (
  <I {...p}>
    <path d="M4 24 Q 14 10 24 10 Q 34 10 44 24 Q 34 38 24 38 Q 14 38 4 24 Z" fill="#FFF4E2" stroke="#2B1A14" />
    <circle cx="24" cy="24" r="7" fill="#FF6B4A" stroke="#2B1A14" />
    <circle cx="24" cy="24" r="3" fill="#2B1A14" />
    <circle cx="22" cy="22" r="1" fill="#FFF4E2" />
  </I>
);

Object.assign(window, {
  IconHeadphones, IconShoe, IconTent, IconCoffee, IconCamera, IconPan,
  IconGamepad, IconWatch, IconIsland, IconTicket, IconShirt, IconSparkle, IconHibiscus,
  IconVault, IconNoDebt, IconKey, IconEye,
});
