// Inline SVG icon set — kept minimal, no invented illustrations.
const Icon = {
  Logo: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M3 19V5l5 7 4-5 4 5 5-7v14" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round" strokeLinecap="round"/>
    </svg>
  ),
  Instagram: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor"/>
    </svg>
  ),
  ArrowRight: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  ArrowDown: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Check: ({ size = 14, color = 'var(--coral)' }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 12.5l4.5 4.5L19 7.5" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Plus: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  Minus: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  WhatsApp: ({ size = 26 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M20.5 3.5A11 11 0 0 0 3 17l-1 5 5.2-1.4A11 11 0 1 0 20.5 3.5Z" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M8.5 8.5c-.4 0-.8.1-1 .4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.3 2 3.2 5 4.4 2.5 1 3 .8 3.6.8.6-.1 1.8-.8 2-1.5.3-.7.3-1.3.2-1.5-.1-.2-.4-.3-.8-.5-.4-.2-2.1-1-2.4-1.1-.3-.1-.5-.2-.8.2-.2.3-.8 1.1-1 1.3-.2.2-.4.2-.7.1-.4-.2-1.5-.6-2.8-1.7-1-.9-1.7-2-2-2.4-.2-.3 0-.5.1-.7.1-.1.3-.3.5-.5.1-.2.2-.3.3-.5.1-.2.1-.4 0-.5-.1-.2-.7-2-1-2.7-.3-.7-.6-.6-.8-.6Z" fill="currentColor"/>
    </svg>
  ),
  Cat: ({ idx = 1, size = 26 }) => {
    // Tiny abstract glyphs per category — geometric, not illustrative
    const stroke = '#15110D';
    const sw = 1.6;
    const elements = {
      1: <><circle cx="12" cy="9" r="3" stroke={stroke} strokeWidth={sw}/><path d="M5 20c1-4 4-6 7-6s6 2 7 6" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></>,
      2: <><rect x="5" y="4" width="14" height="16" rx="2" stroke={stroke} strokeWidth={sw}/><path d="M8 9h8M8 13h8M8 17h5" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></>,
      3: <><path d="M5 5h10l4 4v10H5z" stroke={stroke} strokeWidth={sw} strokeLinejoin="round"/><path d="M15 5v4h4M9 13h6M9 17h6" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></>,
      4: <><rect x="6" y="3" width="12" height="18" rx="2" stroke={stroke} strokeWidth={sw}/><path d="M9 8h6M9 12h6M9 16h4" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></>,
      5: <><path d="M4 5h16v10H10l-3 4v-4H4z" stroke={stroke} strokeWidth={sw} strokeLinejoin="round"/><circle cx="9" cy="10" r="1" fill={stroke}/><circle cx="13" cy="10" r="1" fill={stroke}/><circle cx="17" cy="10" r="1" fill={stroke}/></>,
      6: <><path d="M3 5l4 8-2 6 6-2 8 4 2-2-4-8 2-6-6 2-8-4z" stroke={stroke} strokeWidth={sw} strokeLinejoin="round"/></>,
      7: <><circle cx="11" cy="11" r="6" stroke={stroke} strokeWidth={sw}/><path d="M16 16l5 5" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></>,
      8: <><path d="M4 18l5-10 4 6 3-4 4 8" stroke={stroke} strokeWidth={sw} strokeLinejoin="round" strokeLinecap="round"/><circle cx="9" cy="8" r="1.6" fill={stroke}/></>,
      9: <><circle cx="7" cy="7" r="3" stroke={stroke} strokeWidth={sw}/><circle cx="17" cy="17" r="3" stroke={stroke} strokeWidth={sw}/><path d="M10 7h7M7 10v7" stroke={stroke} strokeWidth={sw} strokeLinecap="round"/></>,
      10: <><path d="M4 9l8-5 8 5v11H4z" stroke={stroke} strokeWidth={sw} strokeLinejoin="round"/><path d="M9 20v-6h6v6" stroke={stroke} strokeWidth={sw} strokeLinejoin="round"/></>,
    };
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
        {elements[idx]}
      </svg>
    );
  },
};

window.Icon = Icon;
