// map.jsx — Stylized Málaga-inspired map placeholder
// Curved coast + abstract road network + animated route. Original art.

function StylizedMap({ showLabels = true, eta = '12 min', destination = 'Hotel Larios' }) {
  return (
    <div className="map-canvas">
      <svg className="map-roads" viewBox="0 0 400 260" preserveAspectRatio="xMidYMid slice">
        {/* coast / sea */}
        <path className="map-coast" d="M0 200 Q 60 195 110 210 T 220 220 T 340 232 T 400 240 L 400 260 L 0 260 Z" />
        {/* sea label */}
        {showLabels && (
          <text x="320" y="252" fill="oklch(96% 0.012 84)" fontSize="9" fontFamily="ui-monospace, monospace" letterSpacing="2" opacity="0.85">MAR</text>
        )}
        {/* road grid (light strokes) */}
        <g stroke="oklch(78% 0.05 80)" strokeWidth="6" strokeLinecap="round" opacity="0.55" fill="none">
          <path d="M-10 80 Q 80 75 160 90 T 320 120 T 410 130" />
          <path d="M-10 150 Q 100 145 200 160 T 410 180" />
          <path d="M40 -10 L 80 230" />
          <path d="M150 -10 Q 145 110 180 230" />
          <path d="M260 -10 Q 255 100 240 230" />
          <path d="M340 -10 Q 330 90 320 230" />
        </g>
        <g stroke="oklch(70% 0.04 80)" strokeWidth="1.5" strokeLinecap="round" opacity="0.4" fill="none">
          <path d="M-10 40 Q 90 35 200 50 T 410 60" />
          <path d="M-10 110 Q 100 105 220 120 T 410 140" />
          <path d="M-10 180 Q 100 175 220 190 T 410 200" />
          <path d="M70 -10 L 95 220" />
          <path d="M200 -10 L 215 220" />
          <path d="M300 -10 L 285 220" />
        </g>
        {/* destination route */}
        <path className="map-route" d="M 60 200 Q 130 180 180 140 T 270 95 L 310 70" />
        {/* start dot */}
        <circle cx="60" cy="200" r="6" fill="oklch(98% 0.01 80)" stroke="oklch(48% 0.13 38)" strokeWidth="2" />
        <circle cx="60" cy="200" r="2.5" fill="oklch(48% 0.13 38)" />
      </svg>

      {/* destination pin */}
      <div className="map-pin" style={{ left: '77.5%', top: '27%' }}>
        <svg width="22" height="28" viewBox="0 0 22 28">
          <path d="M11 0 C 4.5 0 0 4.5 0 10.5 C 0 18 11 28 11 28 C 11 28 22 18 22 10.5 C 22 4.5 17.5 0 11 0 Z"
            fill="oklch(48% 0.13 38)" />
          <circle cx="11" cy="10.5" r="4" fill="oklch(98% 0.01 80)" />
        </svg>
      </div>

      {showLabels && (
        <>
          <div className="map-label" style={{ left: '8%', top: '76%' }}>Centro</div>
          <div className="map-label" style={{ left: '46%', top: '52%' }}>Soho</div>
          <div className="map-label" style={{ left: '70%', top: '20%' }}>{destination}</div>
        </>
      )}

      <div className="map-eta">
        <span className="dot"></span>
        <span>{eta} · 3.2 km</span>
      </div>
    </div>
  );
}

Object.assign(window, { StylizedMap });