export const ContactMap = {
  mounted() {
    const pos1 = JSON.parse(this.el.dataset.pos1)
    const pos2 = JSON.parse(this.el.dataset.pos2)

    const lat1 = pos1.lat
    const lon1 = pos1.lon || pos1.lng
    const lat2 = pos2.lat
    const lon2 = pos2.lon || pos2.lng

    const map = L.map(this.el, {
      zoomControl: true,
      attributionControl: false,
      scrollWheelZoom: false
    })

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19
    }).addTo(map)

    const marker1 = L.circleMarker([lat1, lon1], {
      radius: 6, color: "#2563eb", fillColor: "#3b82f6", fillOpacity: 0.9, weight: 2
    }).addTo(map)

    const marker2 = L.circleMarker([lat2, lon2], {
      radius: 6, color: "#dc2626", fillColor: "#ef4444", fillOpacity: 0.9, weight: 2
    }).addTo(map)

    const station1 = this.el.dataset.station1
    const station2 = this.el.dataset.station2
    if (station1) marker1.bindTooltip(station1, {permanent: true, direction: "top", offset: [0, -8]})
    if (station2) marker2.bindTooltip(station2, {permanent: true, direction: "top", offset: [0, -8]})

    L.polyline([[lat1, lon1], [lat2, lon2]], {
      color: "#6366f1", weight: 2, dashArray: "6 4", opacity: 0.8
    }).addTo(map)

    const bounds = L.latLngBounds([[lat1, lon1], [lat2, lon2]])
    map.fitBounds(bounds, {padding: [40, 40], maxZoom: 10})
  }
}