// Gestileerde auto-silhouetten in SVG. Eén kleur, vector, schaalbaar.
// Elk neemt {color, accent, className, style} props.

const Supercar = ({ color = '#111', accent = '#c96442', style, className }) => (
  <svg viewBox="0 0 600 200" className={className} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* low slung hypercar */}
    <path d="M 30 155 Q 50 145 80 142 L 130 138 Q 160 110 200 100 L 280 92 Q 320 78 380 80 L 460 88 Q 510 92 540 110 L 575 130 Q 580 138 575 150 L 560 158 Z" fill={color}/>
    <path d="M 200 100 L 280 92 Q 320 78 380 80 L 440 86 L 420 110 L 220 110 Z" fill={accent} opacity="0.85"/>
    {/* windshield highlight */}
    <path d="M 235 100 L 290 90 Q 325 82 375 84 L 410 88 L 395 105 L 245 108 Z" fill="#fff" opacity="0.18"/>
    {/* wheels */}
    <circle cx="135" cy="158" r="28" fill="#0a0a0a"/>
    <circle cx="135" cy="158" r="14" fill={color === '#111' ? '#222' : '#1a1a1a'}/>
    <circle cx="135" cy="158" r="6" fill={accent}/>
    <circle cx="475" cy="158" r="28" fill="#0a0a0a"/>
    <circle cx="475" cy="158" r="14" fill={color === '#111' ? '#222' : '#1a1a1a'}/>
    <circle cx="475" cy="158" r="6" fill={accent}/>
    {/* headlight */}
    <path d="M 555 130 L 575 138 L 575 145 L 555 142 Z" fill="#fff8d8"/>
  </svg>
);

const F1Car = ({ color = '#111', accent = '#c96442', style, className }) => (
  <svg viewBox="0 0 600 200" className={className} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* front wing */}
    <rect x="20" y="148" width="80" height="14" rx="2" fill={color}/>
    <rect x="20" y="160" width="80" height="6" rx="1" fill={accent}/>
    {/* nose */}
    <path d="M 100 150 L 200 142 L 240 130 L 280 130 L 280 165 L 100 165 Z" fill={color}/>
    {/* cockpit/halo */}
    <path d="M 280 130 L 340 100 L 400 95 L 420 130 Z" fill={color}/>
    <path d="M 320 110 Q 340 88 380 88 Q 410 88 420 105" stroke={accent} strokeWidth="4" fill="none"/>
    {/* sidepod */}
    <path d="M 280 130 L 480 128 L 520 145 L 520 165 L 280 165 Z" fill={color}/>
    {/* rear wing */}
    <rect x="500" y="90" width="14" height="60" fill={color}/>
    <rect x="490" y="86" width="40" height="12" fill={color}/>
    <rect x="490" y="98" width="40" height="4" fill={accent}/>
    {/* wheels */}
    <circle cx="160" cy="165" r="22" fill="#0a0a0a"/>
    <circle cx="160" cy="165" r="9" fill={accent}/>
    <circle cx="475" cy="165" r="22" fill="#0a0a0a"/>
    <circle cx="475" cy="165" r="9" fill={accent}/>
    {/* number panel */}
    <circle cx="375" cy="125" r="14" fill="#fff"/>
    <text x="375" y="131" textAnchor="middle" fontFamily="Anton, sans-serif" fontSize="18" fill={color}>7</text>
  </svg>
);

const ClassicCar = ({ color = '#111', accent = '#c96442', style, className }) => (
  <svg viewBox="0 0 600 200" className={className} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* classic 60s coupe — taller, rounder */}
    <path d="M 40 160 Q 60 150 100 148 L 140 142 L 175 105 Q 200 90 260 88 L 360 88 Q 410 92 440 110 L 470 142 L 540 148 Q 565 152 570 160 L 565 170 L 45 170 Z" fill={color}/>
    {/* greenhouse */}
    <path d="M 175 105 Q 200 92 260 90 L 360 90 Q 405 94 432 110 L 410 112 L 200 112 Z" fill={accent} opacity="0.9"/>
    <path d="M 200 100 L 260 96 L 305 96 L 305 110 L 205 110 Z" fill="#fff" opacity="0.22"/>
    <path d="M 310 96 L 355 96 Q 395 100 420 110 L 310 110 Z" fill="#fff" opacity="0.18"/>
    {/* chrome strip */}
    <rect x="60" y="138" width="490" height="2.5" fill="#dcdcdc" opacity="0.8"/>
    {/* wheels */}
    <circle cx="155" cy="170" r="25" fill="#0a0a0a"/>
    <circle cx="155" cy="170" r="14" fill="#dcdcdc"/>
    <circle cx="155" cy="170" r="5" fill={accent}/>
    <circle cx="455" cy="170" r="25" fill="#0a0a0a"/>
    <circle cx="455" cy="170" r="14" fill="#dcdcdc"/>
    <circle cx="455" cy="170" r="5" fill={accent}/>
    {/* headlight */}
    <circle cx="555" cy="148" r="6" fill="#fff8d8"/>
  </svg>
);

const Truck = ({ color = '#111', accent = '#c96442', style, className }) => (
  <svg viewBox="0 0 600 200" className={className} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* pickup truck */}
    {/* bed */}
    <rect x="240" y="100" width="280" height="60" fill={color}/>
    <rect x="250" y="106" width="260" height="48" fill={accent} opacity="0.4"/>
    {/* cab */}
    <path d="M 110 100 L 140 70 L 230 70 L 240 100 L 240 160 L 110 160 Z" fill={color}/>
    <path d="M 145 78 L 225 78 L 232 100 L 145 100 Z" fill={accent} opacity="0.85"/>
    <path d="M 152 84 L 220 84 L 226 98 L 152 98 Z" fill="#fff" opacity="0.2"/>
    {/* bumper */}
    <rect x="80" y="148" width="40" height="14" fill={color}/>
    <rect x="510" y="148" width="20" height="14" fill={color}/>
    {/* wheels (oversized — offroad) */}
    <circle cx="170" cy="160" r="32" fill="#0a0a0a"/>
    <circle cx="170" cy="160" r="14" fill="#222"/>
    <circle cx="170" cy="160" r="6" fill={accent}/>
    <circle cx="445" cy="160" r="32" fill="#0a0a0a"/>
    <circle cx="445" cy="160" r="14" fill="#222"/>
    <circle cx="445" cy="160" r="6" fill={accent}/>
    {/* lightbar */}
    <rect x="148" y="60" width="80" height="6" rx="2" fill={color}/>
    <rect x="152" y="62" width="72" height="2" fill="#fff8d8"/>
  </svg>
);

const RallyCar = ({ color = '#111', accent = '#c96442', style, className }) => (
  <svg viewBox="0 0 600 200" className={className} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* boxy 90s rally hatchback */}
    <path d="M 60 160 L 70 130 L 110 100 Q 140 90 180 88 L 380 88 Q 420 90 450 100 L 510 130 L 540 160 Z" fill={color}/>
    {/* greenhouse */}
    <path d="M 130 102 L 175 90 L 380 90 L 425 102 L 405 112 L 150 112 Z" fill={accent} opacity="0.9"/>
    <path d="M 140 100 L 180 92 L 280 92 L 280 110 L 155 110 Z" fill="#fff" opacity="0.22"/>
    {/* livery stripe */}
    <rect x="60" y="135" width="480" height="6" fill={accent}/>
    <rect x="60" y="143" width="480" height="2" fill="#fff" opacity="0.6"/>
    {/* number door panel */}
    <rect x="290" y="118" width="40" height="34" rx="3" fill="#fff"/>
    <text x="310" y="143" textAnchor="middle" fontFamily="Anton, sans-serif" fontSize="22" fill={color}>4</text>
    {/* fender flares hint */}
    <path d="M 110 160 L 200 160 L 200 168 L 110 168 Z" fill="#0a0a0a" opacity="0.5"/>
    <path d="M 400 160 L 490 160 L 490 168 L 400 168 Z" fill="#0a0a0a" opacity="0.5"/>
    {/* wheels */}
    <circle cx="155" cy="160" r="26" fill="#0a0a0a"/>
    <circle cx="155" cy="160" r="11" fill="#dcdcdc"/>
    <circle cx="155" cy="160" r="5" fill={accent}/>
    <circle cx="445" cy="160" r="26" fill="#0a0a0a"/>
    <circle cx="445" cy="160" r="11" fill="#dcdcdc"/>
    <circle cx="445" cy="160" r="5" fill={accent}/>
    {/* roof spotlights */}
    <rect x="200" y="78" width="180" height="6" rx="2" fill={color}/>
    <circle cx="220" cy="80" r="4" fill="#fff8d8"/>
    <circle cx="260" cy="80" r="4" fill="#fff8d8"/>
    <circle cx="300" cy="80" r="4" fill="#fff8d8"/>
    <circle cx="340" cy="80" r="4" fill="#fff8d8"/>
  </svg>
);

// Top-down silhouette for "garage view" / parking lot motifs
const TopDownCar = ({ color = '#111', accent = '#c96442', style, className }) => (
  <svg viewBox="0 0 200 400" className={className} style={style} fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M 50 30 Q 70 18 100 18 Q 130 18 150 30 L 160 80 L 160 320 Q 160 360 140 380 L 60 380 Q 40 360 40 320 L 40 80 Z" fill={color}/>
    <rect x="58" y="60" width="84" height="80" rx="6" fill={accent} opacity="0.5"/>
    <rect x="58" y="220" width="84" height="100" rx="6" fill={accent} opacity="0.5"/>
    {/* roof spine */}
    <rect x="98" y="160" width="4" height="50" fill={accent} opacity="0.6"/>
    {/* wheels */}
    <rect x="32" y="80" width="14" height="34" rx="3" fill="#0a0a0a"/>
    <rect x="154" y="80" width="14" height="34" rx="3" fill="#0a0a0a"/>
    <rect x="32" y="296" width="14" height="34" rx="3" fill="#0a0a0a"/>
    <rect x="154" y="296" width="14" height="34" rx="3" fill="#0a0a0a"/>
  </svg>
);

// Brick stud — a circular peg with a 'BRICKS' wordmark
const Stud = ({ size = 40, color = '#c96442', label = 'BRICKS', style }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: `radial-gradient(circle at 35% 30%, ${color}ee 0%, ${color} 50%, ${color}cc 100%)`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: `inset 0 -3px 6px rgba(0,0,0,0.25), inset 0 2px 3px rgba(255,255,255,0.3)`,
    fontFamily: '"Archivo Narrow", sans-serif', fontSize: size * 0.18, fontWeight: 800,
    color: 'rgba(255,255,255,0.85)', letterSpacing: '0.05em',
    ...style,
  }}>{label}</div>
);

Object.assign(window, { Supercar, F1Car, ClassicCar, Truck, RallyCar, TopDownCar, Stud });
