/* PulseCosmetics — 1:1 port of src/app/components/store/cosmetics/**
   27 accessories across 4 slots. Each has a `Render` (overlay on 100×140 Pulse body)
   and a `Preview` (standalone icon).
   Slot render order (back → front): EFFECT, BADGE, GLASSES, HAT. */

const R = React.createElement;

/* ────────── HATS ────────── */
const HatCrown = () => (
  <g>
    <path d="M30 38 L35 22 L42 32 L50 15 L58 32 L65 22 L70 38 L68 42 L32 42 Z" fill="#FFD700" stroke="#FFA500" strokeWidth="1.5"/>
    <circle cx="50" cy="24" r="3" fill="#FF6B6B" stroke="#CC5555" strokeWidth="0.5"/>
    <circle cx="38" cy="30" r="2" fill="#3B82F6" stroke="#2563EB" strokeWidth="0.5"/>
    <circle cx="62" cy="30" r="2" fill="#3B82F6" stroke="#2563EB" strokeWidth="0.5"/>
    <rect x="32" y="38" width="36" height="4" fill="#FFA500" rx="1"/>
  </g>
);
const HatCrownPreview = () => (
  <svg width="48" height="48" viewBox="25 10 50 40" fill="none"><HatCrown/></svg>
);

const HatParty = () => (
  <g>
    <path d="M35 42 L50 8 L65 42 Z" fill="#9D4EDD" stroke="#7C3AED" strokeWidth="1.5"/>
    <path d="M40 36 L47 18" stroke="#FFD700" strokeWidth="2" strokeLinecap="round"/>
    <path d="M50 32 L52 20" stroke="#FF6B6B" strokeWidth="2" strokeLinecap="round"/>
    <path d="M58 38 L55 26" stroke="#22C55E" strokeWidth="2" strokeLinecap="round"/>
    <circle cx="50" cy="6" r="4" fill="#FF6B6B"/>
    <circle cx="48" cy="4" r="2" fill="#FFD700"/>
    <circle cx="52" cy="7" r="2" fill="#22C55E"/>
    <ellipse cx="50" cy="42" rx="16" ry="3" fill="#7C3AED"/>
  </g>
);
const HatPartyPreview = () => (<svg width="48" height="48" viewBox="25 0 50 50" fill="none"><HatParty/></svg>);

const HatTopHat = () => (
  <g>
    <ellipse cx="50" cy="42" rx="28" ry="6" fill="#1f2937"/>
    <rect x="30" y="12" width="40" height="30" rx="2" fill="#1f2937"/>
    <rect x="30" y="32" width="40" height="6" fill="#9D4EDD"/>
    <ellipse cx="50" cy="12" rx="20" ry="4" fill="#374151"/>
    <path d="M35 18 Q38 16 40 18" fill="none" stroke="white" strokeWidth="1.5" opacity="0.3"/>
  </g>
);
const HatTopHatPreview = () => (<svg width="48" height="48" viewBox="25 5 50 45" fill="none"><HatTopHat/></svg>);

const HatCap = () => (
  <g transform="translate(-4, 1) scale(0.95)">
    <path d="M82 48 Q82 28 55 18 Q30 18 22 38 Q20 46 22 50 L55 50 Q65 48 75 47 Q80 47 82 48" fill="#3B82F6"/>
    <path d="M22 50 Q12 54 8 60 Q4 66 14 70 Q28 75 42 68 Q48 64 52 58 Q55 52 55 50" fill="#3B82F6"/>
    <path d="M52 20 Q54 36 53 50" stroke="white" strokeWidth="2" fill="none" opacity="0.5"/>
    <path d="M22 50 L55 50" stroke="white" strokeWidth="1.5" fill="none" opacity="0.4"/>
  </g>
);
const HatCapPreview = () => (
  <svg width="48" height="48" viewBox="0 0 100 100" fill="none">
    <path d="M85 50 Q85 28 55 18 Q30 18 22 38 Q20 48 22 52 L55 52 Q65 50 75 49 Q80 49 85 50" fill="#3B82F6"/>
    <path d="M22 52 Q14 56 10 62 Q6 68 15 72 Q28 78 42 72 Q48 68 52 62 Q55 56 55 52" fill="#3B82F6"/>
  </svg>
);

const HatCowboy = () => (
  <g>
    <path d="M10 45 Q20 52 50 48 Q80 52 90 45 Q85 40 50 42 Q15 40 10 45" fill="#8B4513"/>
    <path d="M28 42 Q25 25 35 18 Q50 12 65 18 Q75 25 72 42" fill="#A0522D"/>
    <path d="M35 18 Q50 25 65 18" fill="none" stroke="#8B4513" strokeWidth="2"/>
    <rect x="28" y="36" width="44" height="5" rx="1" fill="#5D3A1A"/>
    <rect x="47" y="36" width="6" height="5" fill="#FFD700"/>
  </g>
);
const HatCowboyPreview = () => (<svg width="48" height="48" viewBox="5 8 90 45" fill="none"><HatCowboy/></svg>);

const HatChristmas = () => (
  <g>
    <ellipse cx="50" cy="48" rx="26" ry="6" fill="white"/>
    <circle cx="30" cy="48" r="1.5" fill="#E5E7EB"/>
    <circle cx="70" cy="48" r="1.5" fill="#E5E7EB"/>
    <path d="M28 48 Q30 30 50 20 Q70 35 72 48" fill="#DC2626"/>
    <path d="M50 20 Q65 15 78 25" fill="#DC2626" stroke="#DC2626" strokeWidth="8" strokeLinecap="round"/>
    <circle cx="78" cy="25" r="8" fill="white"/>
  </g>
);
const HatChristmasPreview = () => (<svg width="48" height="48" viewBox="22 12 65 45" fill="none"><HatChristmas/></svg>);

const HatBunny = () => (
  <g>
    <ellipse cx="50" cy="45" rx="22" ry="5" fill="#F9A8D4" stroke="#EC4899" strokeWidth="1"/>
    <ellipse cx="32" cy="20" rx="8" ry="22" fill="white" stroke="#F3F4F6" strokeWidth="1"/>
    <ellipse cx="32" cy="22" rx="4" ry="14" fill="#FBCFE8"/>
    <ellipse cx="68" cy="18" rx="8" ry="22" fill="white" stroke="#F3F4F6" strokeWidth="1" transform="rotate(10 68 18)"/>
    <ellipse cx="68" cy="20" rx="4" ry="14" fill="#FBCFE8" transform="rotate(10 68 20)"/>
  </g>
);
const HatBunnyPreview = () => (<svg width="48" height="48" viewBox="18 -8 64 60" fill="none"><HatBunny/></svg>);

const HatWitch = () => (
  <g>
    <ellipse cx="50" cy="48" rx="30" ry="7" fill="#1f2937"/>
    <ellipse cx="50" cy="46" rx="28" ry="5" fill="#374151"/>
    <path d="M28 48 L50 0 L72 48" fill="#1f2937"/>
    <path d="M50 0 Q70 10 65 25" fill="#1f2937" stroke="#1f2937" strokeWidth="10" strokeLinecap="round"/>
    <path d="M30 42 Q50 38 70 42" fill="none" stroke="#9D4EDD" strokeWidth="5"/>
    <rect x="45" y="38" width="10" height="8" rx="1" fill="#FFD700"/>
    <rect x="47" y="40" width="6" height="4" fill="#1f2937"/>
  </g>
);
const HatWitchPreview = () => (<svg width="48" height="48" viewBox="15 -5 70 60" fill="none"><HatWitch/></svg>);

const HatOrange = () => (
  <g>
    <rect x="28" y="38" width="44" height="12" rx="2" fill="#F97316"/>
    <path d="M28 38 L28 30 L38 36 L50 25 L62 36 L72 30 L72 38" fill="#F97316"/>
    <circle cx="50" cy="30" r="4" fill="#FFD700" stroke="#F59E0B" strokeWidth="1"/>
    <circle cx="28" cy="32" r="3" fill="#FFD700" stroke="#F59E0B" strokeWidth="1"/>
    <circle cx="72" cy="32" r="3" fill="#FFD700" stroke="#F59E0B" strokeWidth="1"/>
    <rect x="30" y="42" width="40" height="4" fill="#EA580C"/>
    <circle cx="40" cy="44" r="2" fill="#FFD700"/>
    <circle cx="50" cy="44" r="2" fill="#FFD700"/>
    <circle cx="60" cy="44" r="2" fill="#FFD700"/>
  </g>
);
const HatOrangePreview = () => (<svg width="48" height="48" viewBox="22 20 56 35" fill="none"><HatOrange/></svg>);

const HatGraduation = () => (
  <g>
    <ellipse cx="50" cy="42" rx="22" ry="8" fill="#1f2937"/>
    <polygon points="20,35 80,35 75,42 25,42" fill="#1f2937"/>
    <polygon points="20,35 80,35 50,30" fill="#374151"/>
    <circle cx="50" cy="33" r="3" fill="#FFD700"/>
    <path d="M50 36 Q55 40 55 50 Q56 55 52 60" fill="none" stroke="#FFD700" strokeWidth="2" strokeLinecap="round"/>
    <path d="M48 60 L52 60 L54 70 L50 68 L46 70 Z" fill="#FFD700"/>
  </g>
);
const HatGraduationPreview = () => (<svg width="48" height="48" viewBox="15 25 70 50" fill="none"><HatGraduation/></svg>);

/* ────────── GLASSES ────────── */
const GlassesSunglasses = () => (
  <g>
    <ellipse cx="38" cy="65" rx="12" ry="10" fill="#1f2937" opacity="0.9"/>
    <ellipse cx="38" cy="65" rx="12" ry="10" fill="none" stroke="#1f2937" strokeWidth="2"/>
    <ellipse cx="62" cy="65" rx="12" ry="10" fill="#1f2937" opacity="0.9"/>
    <ellipse cx="62" cy="65" rx="12" ry="10" fill="none" stroke="#1f2937" strokeWidth="2"/>
    <line x1="26" y1="65" x2="74" y2="65" stroke="#1f2937" strokeWidth="3"/>
    <ellipse cx="34" cy="62" rx="4" ry="2" fill="white" opacity="0.3"/>
    <ellipse cx="58" cy="62" rx="4" ry="2" fill="white" opacity="0.3"/>
  </g>
);
const GlassesSunglassesPreview = () => (<svg width="48" height="48" viewBox="20 50 60 30" fill="none"><GlassesSunglasses/></svg>);

const GlassesNerd = () => (
  <g>
    <circle cx="38" cy="65" r="11" fill="rgba(255,255,255,0.1)" stroke="#374151" strokeWidth="3"/>
    <circle cx="62" cy="65" r="11" fill="rgba(255,255,255,0.1)" stroke="#374151" strokeWidth="3"/>
    <path d="M49 65 Q50 62 51 65" fill="none" stroke="#374151" strokeWidth="3"/>
    <rect x="48" y="63" width="4" height="4" fill="#F5F5DC" stroke="#D4D4AA" strokeWidth="0.5"/>
  </g>
);
const GlassesNerdPreview = () => (<svg width="48" height="48" viewBox="22 50 56 30" fill="none"><GlassesNerd/></svg>);

const GlassesSwim = () => (
  <g>
    <ellipse cx="38" cy="65" rx="14" ry="11" fill="rgba(59,130,246,0.3)" stroke="#0EA5E9" strokeWidth="3"/>
    <ellipse cx="62" cy="65" rx="14" ry="11" fill="rgba(59,130,246,0.3)" stroke="#0EA5E9" strokeWidth="3"/>
    <rect x="47" y="62" width="6" height="6" rx="2" fill="#374151"/>
    <path d="M24 65 Q20 65 18 68" fill="none" stroke="#374151" strokeWidth="3" strokeLinecap="round"/>
    <path d="M76 65 Q80 65 82 68" fill="none" stroke="#374151" strokeWidth="3" strokeLinecap="round"/>
    <ellipse cx="34" cy="61" rx="4" ry="2" fill="white" opacity="0.4"/>
    <ellipse cx="58" cy="61" rx="4" ry="2" fill="white" opacity="0.4"/>
  </g>
);
const GlassesSwimPreview = () => (<svg width="48" height="48" viewBox="18 50 64 30" fill="none"><GlassesSwim/></svg>);

const GlassesHeart = () => (
  <g>
    <path d="M38 58 C32 52 24 56 24 64 C24 72 38 80 38 80 C38 80 52 72 52 64 C52 56 44 52 38 58" fill="rgba(236,72,153,0.7)" stroke="#EC4899" strokeWidth="2"/>
    <path d="M62 58 C56 52 48 56 48 64 C48 72 62 80 62 80 C62 80 76 72 76 64 C76 56 68 52 62 58" fill="rgba(236,72,153,0.7)" stroke="#EC4899" strokeWidth="2"/>
    <line x1="38" y1="65" x2="48" y2="65" stroke="#EC4899" strokeWidth="2"/>
    <line x1="52" y1="65" x2="62" y2="65" stroke="#EC4899" strokeWidth="2"/>
  </g>
);
const GlassesHeartPreview = () => (<svg width="48" height="48" viewBox="15 48 70 38" fill="none"><GlassesHeart/></svg>);

const GlassesRound = () => (
  <g>
    <circle cx="38" cy="65" r="12" fill="rgba(255,255,255,0.1)" stroke="#1f2937" strokeWidth="2"/>
    <circle cx="62" cy="65" r="12" fill="rgba(255,255,255,0.1)" stroke="#1f2937" strokeWidth="2"/>
    <line x1="50" y1="63" x2="50" y2="67" stroke="#1f2937" strokeWidth="2"/>
    <line x1="26" y1="65" x2="20" y2="63" stroke="#1f2937" strokeWidth="2" strokeLinecap="round"/>
    <line x1="74" y1="65" x2="80" y2="63" stroke="#1f2937" strokeWidth="2" strokeLinecap="round"/>
  </g>
);
const GlassesRoundPreview = () => (<svg width="48" height="48" viewBox="18 50 64 30" fill="none"><GlassesRound/></svg>);

/* ────────── EFFECTS ────────── */
const EffectSparkle = () => (
  <g>
    <path d="M50 8 L46 16 L50 12 L54 16 Z" fill="#FFD700"/>
    <path d="M30 15 L27 21 L30 18 L33 21 Z" fill="#FFD700"/>
    <path d="M70 15 L67 21 L70 18 L73 21 Z" fill="#FFD700"/>
    <path d="M5 45 L1 52 L5 48 L9 52 Z" fill="#FFD700"/>
    <path d="M95 45 L91 52 L95 48 L99 52 Z" fill="#FFD700"/>
    <path d="M0 70 L-4 77 L0 73 L4 77 Z" fill="#FFD700"/>
    <path d="M100 70 L96 77 L100 73 L104 77 Z" fill="#FFD700"/>
    <path d="M8 95 L4 102 L8 98 L12 102 Z" fill="#FFD700"/>
    <path d="M92 95 L88 102 L92 98 L96 102 Z" fill="#FFD700"/>
    <circle cx="3" cy="55" r="1.5" fill="#FFD700" opacity="0.8"/>
    <circle cx="97" cy="55" r="1.5" fill="#FFD700" opacity="0.8"/>
    <circle cx="15" cy="30" r="1.2" fill="#FFF" opacity="0.8"/>
    <circle cx="85" cy="30" r="1.2" fill="#FFF" opacity="0.8"/>
  </g>
);
const EffectSparklePreview = () => (<svg width="48" height="48" viewBox="-10 0 120 130" fill="none"><EffectSparkle/></svg>);

const EffectRainbow = ({ gid = 'rb' }) => (
  <g>
    <defs>
      <linearGradient id={`rainbow-${gid}`} x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stopColor="#FF6B6B"/><stop offset="20%" stopColor="#FFA500"/>
        <stop offset="40%" stopColor="#FFD700"/><stop offset="60%" stopColor="#22C55E"/>
        <stop offset="80%" stopColor="#3B82F6"/><stop offset="100%" stopColor="#9D4EDD"/>
      </linearGradient>
    </defs>
    <path d={"M-8 95 A 60 60 0 0 1 108 95"} fill="none" stroke={`url(#rainbow-${gid})`} strokeWidth="5" opacity="0.5"/>
    <path d={"M2 93 A 50 50 0 0 1 98 93"} fill="none" stroke={`url(#rainbow-${gid})`} strokeWidth="4" opacity="0.4"/>
    <path d={"M12 90 A 42 42 0 0 1 88 90"} fill="none" stroke={`url(#rainbow-${gid})`} strokeWidth="3" opacity="0.3"/>
    <circle cx="-5" cy="55" r="3" fill="#FF6B6B" opacity="0.8"/>
    <circle cx="105" cy="55" r="3" fill="#9D4EDD" opacity="0.8"/>
    <circle cx="5" cy="38" r="2.5" fill="#FFA500" opacity="0.7"/>
    <circle cx="95" cy="38" r="2.5" fill="#3B82F6" opacity="0.7"/>
  </g>
);
const EffectRainbowPreview = () => (<svg width="48" height="48" viewBox="-15 20 130 85" fill="none"><EffectRainbow gid="p-rb"/></svg>);

const EffectFlame = ({ gid = 'fl' }) => (
  <g>
    <defs>
      <linearGradient id={`flame-${gid}`} x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stopColor="#EF4444"/><stop offset="50%" stopColor="#F97316"/><stop offset="100%" stopColor="#FBBF24"/>
      </linearGradient>
    </defs>
    <path d="M8 100 Q2 85 10 75 Q8 85 14 90 Q10 95 8 100" fill={`url(#flame-${gid})`} opacity="0.8"/>
    <path d="M-2 90 Q-8 75 0 65 Q-2 75 6 82 Q2 86 -2 90" fill={`url(#flame-${gid})`} opacity="0.7"/>
    <path d="M92 100 Q98 85 90 75 Q92 85 86 90 Q90 95 92 100" fill={`url(#flame-${gid})`} opacity="0.8"/>
    <path d="M102 90 Q108 75 100 65 Q102 75 94 82 Q98 86 102 90" fill={`url(#flame-${gid})`} opacity="0.7"/>
    <circle cx="5" cy="70" r="2" fill="#FBBF24" opacity="0.7"/>
    <circle cx="95" cy="70" r="2" fill="#FBBF24" opacity="0.7"/>
  </g>
);
const EffectFlamePreview = () => (<svg width="48" height="48" viewBox="-10 60 120 60" fill="none"><EffectFlame gid="p-fl"/></svg>);

const EffectSnow = () => (
  <g>
    <path d="M5 40 L5 52 M-1 46 L11 46 M1 42 L9 50 M1 50 L9 42" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.9"/>
    <path d="M95 40 L95 52 M89 46 L101 46 M91 42 L99 50 M91 50 L99 42" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.9"/>
    <path d="M10 80 L10 92 M4 86 L16 86 M6 82 L14 90 M6 90 L14 82" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.8"/>
    <path d="M90 80 L90 92 M84 86 L96 86 M86 82 L94 90 M86 90 L94 82" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.8"/>
    <circle cx="0" cy="60" r="2" fill="white" opacity="0.7"/>
    <circle cx="100" cy="60" r="2" fill="white" opacity="0.7"/>
    <circle cx="50" cy="15" r="1.5" fill="white" opacity="0.6"/>
  </g>
);
const EffectSnowPreview = () => (<svg width="48" height="48" viewBox="-10 20 120 100" fill="none"><EffectSnow/></svg>);

const EffectStars = () => (
  <g>
    <path d="M8 45 L10 50 L15 50 L11 54 L13 59 L8 56 L3 59 L5 54 L1 50 L6 50 Z" fill="#FBBF24" opacity="0.9"/>
    <path d="M92 45 L94 50 L99 50 L95 54 L97 59 L92 56 L87 59 L89 54 L85 50 L90 50 Z" fill="#FBBF24" opacity="0.9"/>
    <path d="M50 8 L52 13 L57 13 L53 17 L55 22 L50 19 L45 22 L47 17 L43 13 L48 13 Z" fill="#FBBF24" opacity="0.8"/>
    <path d="M5 85 L6.5 88 L10 88 L7.5 90.5 L8.5 94 L5 92 L1.5 94 L2.5 90.5 L0 88 L3.5 88 Z" fill="#A78BFA" opacity="0.8"/>
    <path d="M95 85 L96.5 88 L100 88 L97.5 90.5 L98.5 94 L95 92 L91.5 94 L92.5 90.5 L90 88 L93.5 88 Z" fill="#A78BFA" opacity="0.8"/>
    <circle cx="-3" cy="65" r="2.5" fill="#EC4899" opacity="0.7"/>
    <circle cx="103" cy="65" r="2.5" fill="#34D399" opacity="0.7"/>
  </g>
);
const EffectStarsPreview = () => (<svg width="48" height="48" viewBox="-10 0 120 120" fill="none"><EffectStars/></svg>);

const EffectMatrix = ({ gid = 'mx' }) => (
  <g>
    <defs>
      <radialGradient id={`matrix-glow-${gid}`} cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#22C55E" stopOpacity="0.4"/>
        <stop offset="100%" stopColor="#22C55E" stopOpacity="0"/>
      </radialGradient>
    </defs>
    <ellipse cx="50" cy="75" rx="55" ry="50" fill={`url(#matrix-glow-${gid})`}/>
    <text x="5" y="45" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.7">1</text>
    <text x="5" y="55" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.5">0</text>
    <text x="5" y="65" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.3">1</text>
    <text x="-2" y="75" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.6">0</text>
    <text x="-2" y="85" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.4">1</text>
    <text x="92" y="45" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.7">0</text>
    <text x="92" y="55" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.5">1</text>
    <text x="92" y="65" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.3">0</text>
    <text x="98" y="75" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.6">1</text>
    <text x="98" y="85" fill="#22C55E" fontSize="8" fontFamily="monospace" opacity="0.4">0</text>
    <circle cx="3" cy="50" r="2" fill="#22C55E" opacity="0.5"/>
    <circle cx="97" cy="50" r="2" fill="#22C55E" opacity="0.5"/>
  </g>
);
const EffectMatrixPreview = () => (<svg width="48" height="48" viewBox="-10 30 120 90" fill="none"><EffectMatrix gid="p-mx"/></svg>);

/* ────────── BADGES (positioned bottom-right of body at 72,88) ────────── */
const BadgeStar = () => (
  <g transform="translate(72, 88)">
    <circle cx="0" cy="0" r="10" fill="#FFD700" stroke="#FFA500" strokeWidth="1.5"/>
    <path d="M0 -6 L1.5 -2 L6 -2 L2.5 1 L4 6 L0 3 L-4 6 L-2.5 1 L-6 -2 L-1.5 -2 Z" fill="#FFF" stroke="#FFA500" strokeWidth="0.5"/>
  </g>
);
const BadgeStarPreview = () => (
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#FFD700" stroke="#FFA500" strokeWidth="1.5"/>
    <path d="M12 6 L13.5 10 L18 10 L14.5 13 L16 18 L12 15 L8 18 L9.5 13 L6 10 L10.5 10 Z" fill="#FFF" stroke="#FFA500" strokeWidth="0.5"/>
  </svg>
);

const BadgeLightning = () => (
  <g transform="translate(72, 88)">
    <circle cx="0" cy="0" r="10" fill="#3B82F6" stroke="#2563EB" strokeWidth="1.5"/>
    <path d="M2 -7 L-2 -1 L1 -1 L-2 7 L4 0 L1 0 Z" fill="#FFD700" stroke="#FFA500" strokeWidth="0.5"/>
  </g>
);
const BadgeLightningPreview = () => (
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#3B82F6" stroke="#2563EB" strokeWidth="1.5"/>
    <path d="M14 5 L10 11 L13 11 L10 19 L16 12 L13 12 Z" fill="#FFD700" stroke="#FFA500" strokeWidth="0.5"/>
  </svg>
);

const BadgeHeart = () => (
  <g transform="translate(72, 88)">
    <circle cx="0" cy="0" r="10" fill="#EC4899" stroke="#DB2777" strokeWidth="1.5"/>
    <path d="M0 -3 C-2 -6 -6 -6 -6 -2 C-6 2 0 6 0 6 C0 6 6 2 6 -2 C6 -6 2 -6 0 -3" fill="#FFF" stroke="#DB2777" strokeWidth="0.5"/>
  </g>
);
const BadgeHeartPreview = () => (
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#EC4899" stroke="#DB2777" strokeWidth="1.5"/>
    <path d="M12 9 C10 6 6 6 6 10 C6 14 12 18 12 18 C12 18 18 14 18 10 C18 6 14 6 12 9" fill="#FFF" stroke="#DB2777" strokeWidth="0.5"/>
  </svg>
);

const BadgeTrophy = () => (
  <g transform="translate(72, 88)">
    <circle cx="0" cy="0" r="10" fill="#F59E0B" stroke="#D97706" strokeWidth="1.5"/>
    <path d="M-4 -5 L4 -5 L3 0 L1 0 L1 3 L3 3 L3 5 L-3 5 L-3 3 L-1 3 L-1 0 L-3 0 Z" fill="#FFF" stroke="#D97706" strokeWidth="0.5"/>
    <path d="M-4 -4 Q-6 -4 -6 -1 Q-6 1 -4 1" fill="none" stroke="#FFF" strokeWidth="1"/>
    <path d="M4 -4 Q6 -4 6 -1 Q6 1 4 1" fill="none" stroke="#FFF" strokeWidth="1"/>
  </g>
);
const BadgeTrophyPreview = () => (
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#F59E0B" stroke="#D97706" strokeWidth="1.5"/>
    <path d="M8 7 L16 7 L15 12 L13 12 L13 15 L15 15 L15 17 L9 17 L9 15 L11 15 L11 12 L9 12 Z" fill="#FFF" stroke="#D97706" strokeWidth="0.5"/>
  </svg>
);

const BadgeGame = () => (
  <g transform="translate(72, 88)">
    <circle cx="0" cy="0" r="10" fill="#8B5CF6" stroke="#7C3AED" strokeWidth="1.5"/>
    <rect x="-6" y="-3" width="12" height="6" rx="2" fill="#FFF"/>
    <rect x="-5" y="-1.5" width="1" height="3" fill="#7C3AED"/>
    <rect x="-6" y="-0.5" width="3" height="1" fill="#7C3AED"/>
    <circle cx="4" cy="-1" r="1" fill="#7C3AED"/>
    <circle cx="5.5" cy="0.5" r="1" fill="#7C3AED"/>
  </g>
);
const BadgeGamePreview = () => (
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#8B5CF6" stroke="#7C3AED" strokeWidth="1.5"/>
    <rect x="6" y="9" width="12" height="6" rx="2" fill="#FFF"/>
  </svg>
);

const BadgeBook = () => (
  <g transform="translate(72, 88)">
    <circle cx="0" cy="0" r="10" fill="#10B981" stroke="#059669" strokeWidth="1.5"/>
    <path d="M-6 -4 L0 -2 L6 -4 L6 5 L0 3 L-6 5 Z" fill="#FFF" stroke="#059669" strokeWidth="0.5"/>
    <line x1="0" y1="-2" x2="0" y2="3" stroke="#059669" strokeWidth="0.5"/>
  </g>
);
const BadgeBookPreview = () => (
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" fill="#10B981" stroke="#059669" strokeWidth="1.5"/>
    <path d="M6 8 L12 10 L18 8 L18 17 L12 15 L6 17 Z" fill="#FFF" stroke="#059669" strokeWidth="0.5"/>
  </svg>
);

/* ────────── REGISTRY ────────── */
const ACCESSORY_REGISTRY = {
  // Hats
  hat_crown:      { Render: HatCrown,      Preview: HatCrownPreview,      slot: 'HAT', label: 'Kroon' },
  hat_party:      { Render: HatParty,      Preview: HatPartyPreview,      slot: 'HAT', label: 'Feesthoed' },
  hat_tophat:     { Render: HatTopHat,     Preview: HatTopHatPreview,     slot: 'HAT', label: 'Hoge hoed' },
  hat_cap:        { Render: HatCap,        Preview: HatCapPreview,        slot: 'HAT', label: 'Pet' },
  hat_cowboy:     { Render: HatCowboy,     Preview: HatCowboyPreview,     slot: 'HAT', label: 'Cowboy' },
  hat_christmas:  { Render: HatChristmas,  Preview: HatChristmasPreview,  slot: 'HAT', label: 'Kerstmuts', seasonal: 'winter' },
  hat_bunny:      { Render: HatBunny,      Preview: HatBunnyPreview,      slot: 'HAT', label: 'Konijnenoren', seasonal: 'pasen' },
  hat_witch:      { Render: HatWitch,      Preview: HatWitchPreview,      slot: 'HAT', label: 'Heksenhoed',  seasonal: 'halloween' },
  hat_orange:     { Render: HatOrange,     Preview: HatOrangePreview,     slot: 'HAT', label: 'Koningsdag',  seasonal: 'koningsdag' },
  hat_graduation: { Render: HatGraduation, Preview: HatGraduationPreview, slot: 'HAT', label: 'Afstudeerhoed' },

  // Glasses
  glasses_sunglasses: { Render: GlassesSunglasses, Preview: GlassesSunglassesPreview, slot: 'GLASSES', label: 'Zonnebril' },
  glasses_nerd:       { Render: GlassesNerd,       Preview: GlassesNerdPreview,       slot: 'GLASSES', label: 'Nerdbril' },
  glasses_swim:       { Render: GlassesSwim,       Preview: GlassesSwimPreview,       slot: 'GLASSES', label: 'Zwembril' },
  glasses_heart:      { Render: GlassesHeart,      Preview: GlassesHeartPreview,      slot: 'GLASSES', label: 'Hartjesbril' },
  glasses_round:      { Render: GlassesRound,      Preview: GlassesRoundPreview,      slot: 'GLASSES', label: 'Ronde bril' },

  // Effects
  effect_sparkle: { Render: EffectSparkle, Preview: EffectSparklePreview, slot: 'EFFECT', label: 'Sparkle' },
  effect_rainbow: { Render: EffectRainbow, Preview: EffectRainbowPreview, slot: 'EFFECT', label: 'Regenboog' },
  effect_flame:   { Render: EffectFlame,   Preview: EffectFlamePreview,   slot: 'EFFECT', label: 'Vlammen' },
  effect_snow:    { Render: EffectSnow,    Preview: EffectSnowPreview,    slot: 'EFFECT', label: 'Sneeuw' },
  effect_stars:   { Render: EffectStars,   Preview: EffectStarsPreview,   slot: 'EFFECT', label: 'Sterren' },
  effect_matrix:  { Render: EffectMatrix,  Preview: EffectMatrixPreview,  slot: 'EFFECT', label: 'Matrix' },

  // Badges
  badge_star:      { Render: BadgeStar,      Preview: BadgeStarPreview,      slot: 'BADGE', label: 'Ster' },
  badge_lightning: { Render: BadgeLightning, Preview: BadgeLightningPreview, slot: 'BADGE', label: 'Bliksem' },
  badge_heart:     { Render: BadgeHeart,     Preview: BadgeHeartPreview,     slot: 'BADGE', label: 'Hart' },
  badge_trophy:    { Render: BadgeTrophy,    Preview: BadgeTrophyPreview,    slot: 'BADGE', label: 'Trofee' },
  badge_game:      { Render: BadgeGame,      Preview: BadgeGamePreview,      slot: 'BADGE', label: 'Controller' },
  badge_book:      { Render: BadgeBook,      Preview: BadgeBookPreview,      slot: 'BADGE', label: 'Boek' },
};

const ACCESSORY_RENDER_ORDER = ['EFFECT', 'BADGE', 'GLASSES', 'HAT'];

window.ACCESSORY_REGISTRY = ACCESSORY_REGISTRY;
window.ACCESSORY_RENDER_ORDER = ACCESSORY_RENDER_ORDER;
