document.addEventListener("DOMContentLoaded", function () {
    const mapBlocks = document.querySelectorAll(".map_block");
    if (!mapBlocks.length) return;
    mapBlocks.forEach(block => {
        const mapContainer = block.querySelector(".map-container");
        const locationCards = block.querySelector(".location-cards");
        if (!mapContainer || !locationCards) return;
        let locations = [];
        try {
            locations = JSON.parse(atob(locationCards.dataset.lists));
        } catch (err) {
            console.error("Invalid location data", err);
            return;
        }
        mapboxgl.accessToken = "pk.eyJ1IjoiZGV2b3BzLXRha2VvZmYiLCJhIjoiY2w4dTY0dDhtMDB1MzNxbW84anh0YW52NCJ9.jgmyabrBY8Q50d0ZduoneQ";
        const map = new mapboxgl.Map({
            container: mapContainer,
            style: "mapbox://styles/devops-takeoff/cla89egqj00ho15phvpsdzmgo",
            zoom: 2.52,
            center: [-9.318567962537742, 19.28246484579749],
            scrollZoom: false,
            dragRotate: false,
            touchZoomRotate: false
        });
        map.setRenderWorldCopies(false);
        let currentPopup = null;
        const closeCurrentPopup = () => {
            if (currentPopup) {
                currentPopup.remove();
                currentPopup = null;
            }
        };
        block.addEventListener("mousemove", (e) => {
            if (!e.target.closest(".success-popup") && !e.target.closest(".marker")) {
                closeCurrentPopup();
            }
        });
        map.on("style.load", function () {
            map.setFog({});
            locations.forEach(loc => {
                const lng = parseFloat(loc.longitude);
                const lat = parseFloat(loc.latitude);
                if (isNaN(lng) || isNaN(lat)) return;
                const markerEl = document.createElement("div");
                markerEl.className = "marker";
                const marker = new mapboxgl.Marker(markerEl)
                    .setLngLat([lng, lat])
                    .addTo(map);

                const popup = new mapboxgl.Popup({
                    className: "success-popup",
                    closeButton: true,
                    closeOnClick: true,
                    closeOnMove: false,
                    offset: [0, -15],           // ← Adjust this value
                    anchor: 'bottom'
                }).setHTML(`
                    <h3 class="location-title">${loc.state}</h3>
                    <p class="location-state">${loc.country}</p>
                `);

                // Hover
                markerEl.addEventListener("mouseenter", () => {
                    closeCurrentPopup(); // close any other popup
                    popup.setLngLat([lng, lat]).addTo(map);
                    currentPopup = popup;
                });

                // Optional: Click also opens popup (more reliable)
                markerEl.addEventListener("click", (e) => {
                    e.stopPropagation();
                    closeCurrentPopup();
                    popup.setLngLat([lng, lat]).addTo(map);
                    currentPopup = popup;
                });
            });
        });
        mapContainer.addEventListener("mouseleave", closeCurrentPopup);
    });
});