// MapBackdrop.jsx — Skopje-style street map with rivers, parks, labels

function MapBackdrop({ pins = [] }) {
  return (
    <div className="map-backdrop">
      <svg viewBox="0 0 400 700" preserveAspectRatio="xMidYMid slice" className="map-svg">
        {/* base land */}
        <rect width="400" height="700" fill="#F5F1E8"/>

        {/* park / green areas */}
        <path d="M0 360 Q60 340 130 360 Q200 380 280 350 Q340 330 400 350 L400 540 Q330 560 260 540 Q180 520 110 540 Q60 555 0 540 Z" fill="#C8E0B6"/>
        <path d="M40 520 Q120 510 200 530 Q280 545 360 530 L380 620 Q280 640 180 625 Q90 615 30 625 Z" fill="#B8D4A4"/>
        <path d="M250 470 Q310 460 360 475 L370 520 Q310 530 260 520 Z" fill="#B8D4A4"/>

        {/* river — winding diagonally */}
        <path d="M-20 260 Q60 270 130 290 Q200 310 270 295 Q340 280 420 300 L420 340 Q340 320 270 335 Q200 350 130 330 Q60 310 -20 300 Z" fill="#A8D5EE"/>
        <path d="M-20 270 Q60 280 130 300 Q200 320 270 305 Q340 290 420 310" fill="none" stroke="#8BC2DD" strokeWidth="0.8"/>

        {/* small lake */}
        <ellipse cx="80" cy="490" rx="22" ry="14" fill="#A8D5EE"/>

        {/* major boulevards (white with light tan edge) */}
        <path d="M-20 220 Q100 200 200 230 Q300 260 420 240" stroke="#fff" strokeWidth="9" fill="none"/>
        <path d="M-20 220 Q100 200 200 230 Q300 260 420 240" stroke="#E5D2B8" strokeWidth="11" fill="none" opacity="0.4" style={{strokeDasharray: 0}}/>
        <path d="M-20 220 Q100 200 200 230 Q300 260 420 240" stroke="#fff" strokeWidth="7" fill="none"/>

        <path d="M0 660 L400 640" stroke="#fff" strokeWidth="6" fill="none"/>
        <path d="M0 660 L400 640" stroke="#E5D2B8" strokeWidth="8" fill="none" opacity="0.4"/>
        <path d="M0 660 L400 640" stroke="#fff" strokeWidth="5" fill="none"/>

        {/* secondary roads */}
        <path d="M50 0 L70 700" stroke="#fff" strokeWidth="3.5" fill="none" opacity="0.85"/>
        <path d="M180 0 L200 700" stroke="#fff" strokeWidth="3" fill="none" opacity="0.7"/>
        <path d="M320 0 L300 700" stroke="#fff" strokeWidth="3.5" fill="none" opacity="0.85"/>
        <path d="M0 80 Q200 100 400 90" stroke="#fff" strokeWidth="2.5" fill="none" opacity="0.7"/>
        <path d="M0 430 Q200 420 400 440" stroke="#fff" strokeWidth="2.5" fill="none" opacity="0.7"/>
        <path d="M0 580 Q200 600 400 580" stroke="#fff" strokeWidth="2.5" fill="none" opacity="0.7"/>

        {/* tiny street grid */}
        <g stroke="#fff" strokeWidth="1.2" opacity="0.55" fill="none">
          <path d="M0 130 L400 125"/>
          <path d="M0 165 L400 170"/>
          <path d="M0 380 L400 385"/>
          <path d="M120 0 L130 700"/>
          <path d="M250 0 L260 700"/>
          <path d="M360 0 L370 700"/>
        </g>

        {/* labels */}
        <text x="170" y="218" fontSize="9" fill="#6B7280" fontStyle="italic" fontFamily="system-ui">Boulevard Nikola Karev</text>
        <text x="185" y="318" fontSize="9.5" fill="#5C8FA8" fontStyle="italic" fontFamily="system-ui" transform="rotate(-4 185 318)">Vardar River</text>
        <text x="135" y="490" fontSize="10" fill="#5C7A4A" fontWeight="600" fontFamily="system-ui">City Park</text>
        <text x="135" y="502" fontSize="8" fill="#7C9968" fontStyle="italic" fontFamily="system-ui">Градски Парк</text>
        <text x="180" y="565" fontSize="9.5" fill="#5C7A4A" fontWeight="600" fontFamily="system-ui">Central Park</text>
        <text x="20" y="540" fontSize="8" fill="#6B7280" fontFamily="system-ui">Skopje</text>
        <text x="20" y="552" fontSize="7.5" fill="#9CA3AF" fontStyle="italic" fontFamily="system-ui">(Скопје)</text>

        {/* tiny POI dots */}
        <circle cx="200" cy="565" r="6" fill="#fff" stroke="#3DB85C" strokeWidth="1.5"/>
        <text x="196" y="569" fontSize="8" fill="#3DB85C">☕</text>
      </svg>

      {/* Pins */}
      {pins.map((p, i) => (
        <button
          key={i}
          className={`map-pin map-pin--${p.kind}`}
          style={{left: `${p.x}%`, top: `${p.y}%`}}
          onClick={() => p.onClick?.(p)}
          aria-label={p.title || 'pin'}
        >
          <svg viewBox="0 0 24 32" width="20" height="28">
            <path d="M12 31 C12 31 22 18 22 11 A10 10 0 0 0 2 11 C2 18 12 31 12 31 Z"
                  fill={p.kind === 'red' ? '#E94B4B' : p.kind === 'yellow' ? '#F4C53B' : '#3DB85C'}
                  stroke="#1a1a1a" strokeWidth="0.8"/>
            <circle cx="12" cy="11" r="3" fill="#1a1a1a"/>
          </svg>
        </button>
      ))}
    </div>
  );
}

window.MapBackdrop = MapBackdrop;