@php
    $apt = config('bassin.apartment');
    $cities = config('bassin.cities');
@endphp

{{-- Leaflet (carte interactive, sans clé API) --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

<section id="carte-bassin" class="max-w-6xl mx-auto px-4 py-12">
    <div class="text-center mb-8">
        <h2 class="font-display text-3xl md:text-4xl font-bold text-[var(--color-brand)] mb-3">Le Bassin à votre porte</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">
            Depuis l'appartement, <strong>tout le Bassin d'Arcachon</strong> s'offre à vous.
            Cliquez sur une ville pour découvrir nos conseils et le temps de trajet.
        </p>
    </div>

    <div class="flex flex-wrap justify-center gap-4 mb-5 text-sm">
        <span class="flex items-center gap-2"><span class="w-4 h-4 rounded-full bg-[var(--color-brand)] ring-2 ring-white shadow"></span> Votre appartement</span>
        <span class="flex items-center gap-2"><span class="w-4 h-4 rounded-full bg-[var(--color-teal)] ring-2 ring-white shadow"></span> Villes & spots du Bassin</span>
    </div>

    <div id="bassin-map" class="w-full h-[500px] rounded-2xl shadow-lg border border-gray-100 z-0"></div>

    <p class="text-center text-xs text-gray-400 mt-3">Carte © OpenStreetMap — déplacez, zoomez, cliquez sur les points 🔎</p>
</section>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
(function () {
    function initBassinMap() {
        if (typeof L === 'undefined') { return setTimeout(initBassinMap, 200); }

        var apt = @json($apt);
        var cities = @json($cities);

        var map = L.map('bassin-map', { scrollWheelZoom: false }).setView([apt.lat, apt.lng], 11);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '© OpenStreetMap'
        }).addTo(map);

        var bounds = [];

        // Marqueur appartement (maison, couleur marque)
        var aptIcon = L.divIcon({
            className: '',
            html: '<div style="background:#8c239f;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;border:3px solid #fff;"><span style="transform:rotate(45deg);font-size:16px;">🏠</span></div>',
            iconSize: [34, 34],
            iconAnchor: [17, 34],
            popupAnchor: [0, -34]
        });
        L.marker([apt.lat, apt.lng], { icon: aptIcon, zIndexOffset: 1000 }).addTo(map)
            .bindPopup('<strong style="color:#8c239f;">'+apt.name+'</strong><br><span style="font-size:12px;color:#555;">'+apt.address+'</span>');
        bounds.push([apt.lat, apt.lng]);

        // Marqueurs villes (teal)
        var cityIcon = function () {
            return L.divIcon({
                className: '',
                html: '<div style="background:#008e97;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 5px rgba(0,0,0,.35);border:2px solid #fff;"></div>',
                iconSize: [26, 26],
                iconAnchor: [13, 26],
                popupAnchor: [0, -26]
            });
        };

        cities.forEach(function (c) {
            var popup =
                '<div style="min-width:180px;">' +
                '<strong style="color:#8c239f;font-size:15px;">'+c.n+'</strong><br>' +
                '<span style="display:inline-block;background:#d0ab3d;color:#fff;font-size:11px;padding:1px 8px;border-radius:999px;margin:4px 0;">🚗 '+c.drive+'</span><br>' +
                '<span style="font-size:12px;color:#444;">'+c.blurb+'</span><br>' +
                '<a href="'+c.url+'" style="display:inline-block;margin-top:6px;color:#008e97;font-weight:600;font-size:13px;">Découvrir →</a>' +
                '</div>';
            L.marker([c.lat, c.lng], { icon: cityIcon() }).addTo(map).bindPopup(popup);
            bounds.push([c.lat, c.lng]);
        });

        map.fitBounds(bounds, { padding: [40, 40] });
        // Réactive la molette au clic sur la carte
        map.on('focus', function () { map.scrollWheelZoom.enable(); });
        map.on('blur', function () { map.scrollWheelZoom.disable(); });
    }
    initBassinMap();
})();
</script>