// Truck side-view SVG component + Leaflet truck marker SVG
const { useState, useEffect, useRef, useMemo } = React;

window.TruckIllustration = function TruckIllustration() {
  return (
    <svg className="truck-illustration" viewBox="0 0 480 160" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="cabGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1a1a1a"/>
          <stop offset="1" stopColor="#0a0a0a"/>
        </linearGradient>
        <linearGradient id="trailerGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#f0f0f0"/>
          <stop offset="1" stopColor="#cdcdcd"/>
        </linearGradient>
        <linearGradient id="windowGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#5fb4d6"/>
          <stop offset="1" stopColor="#2a6f8c"/>
        </linearGradient>
        <radialGradient id="wheelGrad" cx="0.4" cy="0.4" r="0.7">
          <stop offset="0" stopColor="#3a3a3a"/>
          <stop offset="1" stopColor="#0a0a0a"/>
        </radialGradient>
      </defs>

      {/* shadow */}
      <ellipse cx="240" cy="138" rx="200" ry="6" fill="#000" opacity="0.4"/>

      {/* Trailer body */}
      <rect x="180" y="32" width="270" height="80" rx="3" fill="url(#trailerGrad)" stroke="#969696" strokeWidth="0.5"/>
      {/* Trailer panels */}
      <line x1="240" y1="38" x2="240" y2="106" stroke="#969696" strokeWidth="0.5"/>
      <line x1="300" y1="38" x2="300" y2="106" stroke="#969696" strokeWidth="0.5"/>
      <line x1="360" y1="38" x2="360" y2="106" stroke="#969696" strokeWidth="0.5"/>
      <line x1="420" y1="38" x2="420" y2="106" stroke="#969696" strokeWidth="0.5"/>

      {/* Yellow accent stripe */}
      <rect x="180" y="100" width="270" height="6" fill="#ffa500"/>
      {/* Continental wordmark on trailer (placeholder) */}
      <g transform="translate(206, 56)">
        <circle cx="6" cy="8" r="6" fill="#ffa500"/>
        <text x="18" y="13" fontFamily="Inter, sans-serif" fontSize="13" fontWeight="700" fill="#1a1a1a" letterSpacing="-0.5">Continental</text>
      </g>
      <text x="206" y="92" fontFamily="Inter, sans-serif" fontSize="9" fontWeight="500" fill="#737373" letterSpacing="2">LIVE FUEL EFFICIENCY DEMO</text>

      {/* Gap between cab and trailer */}
      <rect x="170" y="60" width="10" height="50" fill="#0a0a0a"/>

      {/* Cab */}
      <path d="M 40 112 L 40 56 Q 40 44 52 44 L 90 44 Q 96 44 100 50 L 116 70 L 168 70 L 168 112 Z"
            fill="url(#cabGrad)" stroke="#000" strokeWidth="0.5"/>

      {/* Cab roof spoiler */}
      <path d="M 56 44 L 56 32 Q 56 28 62 28 L 88 28 Q 96 28 100 36 L 100 44 Z"
            fill="#0a0a0a" stroke="#000" strokeWidth="0.5"/>

      {/* Windshield */}
      <path d="M 56 48 L 56 64 L 96 64 L 100 54 L 92 48 Z" fill="url(#windowGrad)" opacity="0.9"/>
      {/* Side window */}
      <rect x="103" y="54" width="14" height="12" rx="1" fill="url(#windowGrad)" opacity="0.85"/>

      {/* Yellow stripe on cab */}
      <rect x="42" y="98" width="126" height="4" fill="#ffa500"/>

      {/* Headlights + grille */}
      <rect x="42" y="76" width="6" height="14" rx="1" fill="#1a1a1a" stroke="#737373" strokeWidth="0.5"/>
      <rect x="42" y="84" width="6" height="3" fill="#fff8d0"/>
      <rect x="50" y="80" width="14" height="14" rx="1" fill="#1a1a1a"/>
      <line x1="50" y1="84" x2="64" y2="84" stroke="#404040" strokeWidth="0.5"/>
      <line x1="50" y1="88" x2="64" y2="88" stroke="#404040" strokeWidth="0.5"/>
      <line x1="50" y1="92" x2="64" y2="92" stroke="#404040" strokeWidth="0.5"/>

      {/* Mirrors */}
      <rect x="103" y="40" width="4" height="14" rx="1" fill="#1a1a1a"/>

      {/* Door handle */}
      <line x1="138" y1="78" x2="148" y2="78" stroke="#404040" strokeWidth="1.5"/>

      {/* Fuel tank */}
      <rect x="116" y="106" width="42" height="14" rx="2" fill="#737373"/>

      {/* Wheels — cab */}
      <g>
        <circle cx="74" cy="120" r="16" fill="url(#wheelGrad)"/>
        <circle cx="74" cy="120" r="7" fill="#1a1a1a" stroke="#404040" strokeWidth="0.5"/>
        <circle cx="74" cy="120" r="2" fill="#969696"/>
      </g>
      <g>
        <circle cx="148" cy="120" r="16" fill="url(#wheelGrad)"/>
        <circle cx="148" cy="120" r="7" fill="#1a1a1a" stroke="#404040" strokeWidth="0.5"/>
        <circle cx="148" cy="120" r="2" fill="#969696"/>
      </g>
      {/* Wheels — trailer (tandem) */}
      <g>
        <circle cx="332" cy="120" r="16" fill="url(#wheelGrad)"/>
        <circle cx="332" cy="120" r="7" fill="#1a1a1a" stroke="#404040" strokeWidth="0.5"/>
        <circle cx="332" cy="120" r="2" fill="#969696"/>
      </g>
      <g>
        <circle cx="372" cy="120" r="16" fill="url(#wheelGrad)"/>
        <circle cx="372" cy="120" r="7" fill="#1a1a1a" stroke="#404040" strokeWidth="0.5"/>
        <circle cx="372" cy="120" r="2" fill="#969696"/>
      </g>
      <g>
        <circle cx="412" cy="120" r="16" fill="url(#wheelGrad)"/>
        <circle cx="412" cy="120" r="7" fill="#1a1a1a" stroke="#404040" strokeWidth="0.5"/>
        <circle cx="412" cy="120" r="2" fill="#969696"/>
      </g>
    </svg>
  );
};

// Tiny SVG for the leaflet marker core
window.TRUCK_MARKER_SVG = `
  <svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M1 3h15v13H1z"/>
    <path d="M16 8h4l3 3v5h-7V8z"/>
    <circle cx="5.5" cy="18.5" r="2.5" fill="#000" stroke="none"/>
    <circle cx="18.5" cy="18.5" r="2.5" fill="#000" stroke="none"/>
  </svg>
`;