@extends('layouts.site')

@section('title', 'Que faire au Bassin d\'Arcachon ? | JavaPax Moulleau')
@section('meta_description', 'Dune du Pilat, Cap Ferret, cabanes tchanquées, réserve du Teich, ports ostréicoles… Les merveilles du Bassin d\'Arcachon, à portée depuis Le Moulleau.')

@php
    $apt = ['name' => 'JavaPax - 39 Av. Saint Dominique, Le Moulleau', 'lat' => 44.6418, 'lng' => -1.2000];

    // Les incontournables du Bassin (carte + cartes)
    $spots = [
        ['Dune du Pilat', 44.5894, -1.2103, '~20 min', 'La plus haute dune d\'Europe (≈ 100 m). Panorama à couper le souffle sur l\'océan, le banc d\'Arguin et la forêt des Landes.', '/wp-content/uploads/2025/03/dune-du-pilat.jpg', 'from-amber-400 to-orange-500'],
        ['Cap Ferret', 44.6307, -1.2449, '~50 min', 'Le mythe chic et sauvage : phare, plages océan & bassin, cabanes ostréicoles et villages de pêcheurs.', '/wp-content/uploads/2025/03/7fffb-istock-878351268_cap-ferret.webp', 'from-sky-400 to-blue-600'],
        ['Cabanes Tchanquées', 44.6736, -1.1492, 'en bateau', 'Les emblématiques cabanes sur pilotis de l\'Île aux Oiseaux, carte postale du Bassin.', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Bassin_d%27Arcachon_-_Cabanes_Tchanqu%C3%A9es_sur_l%27%C3%AFle_aux_oiseaux_-_Picture_Image_Photography_%2814524551963%29.jpg/960px-Bassin_d%27Arcachon_-_Cabanes_Tchanqu%C3%A9es_sur_l%27%C3%AFle_aux_oiseaux_-_Picture_Image_Photography_%2814524551963%29.jpg', 'from-teal-400 to-emerald-600'],
        ['Réserve du Teich', 44.6361, -1.0250, '~25 min', 'Réserve ornithologique de 110 ha : observez hérons, cigognes et spatules en pleine nature.', 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cigognes_le_teich.jpg/960px-Cigognes_le_teich.jpg', 'from-lime-400 to-green-600'],
        ['Ports ostréicoles', 44.6361, -1.0708, '~20 min', 'Gujan-Mestras et ses 7 ports colorés : dégustation d\'huîtres les pieds dans l\'eau.', 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Port_de_Larros_DSC_0044.JPG/960px-Port_de_Larros_DSC_0044.JPG', 'from-rose-400 to-pink-600'],
        ['Banc d\'Arguin', 44.5806, -1.2517, 'en bateau', 'Langue de sable paradisiaque face à la Dune, réserve naturelle accessible en bateau.', 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Banc_d%27Arguin_2009-1543.jpg/960px-Banc_d%27Arguin_2009-1543.jpg', 'from-cyan-400 to-sky-500'],
        ['Arcachon & sa jetée', 44.6586, -1.1681, '~7 min', 'Ville d\'Hiver et ses villas Belle Époque, front de mer animé et jetée Thiers.', '/wp-content/uploads/2025/03/image_1331329_20250322_ob_61f10c_le-moulleau-202503-19.jpg', 'from-fuchsia-400 to-purple-600'],
        ['Le tour du Bassin à vélo', 44.6418, -1.2000, '80 km', 'Plus de 220 km de pistes cyclables : faites le tour du Bassin en famille, au départ du Moulleau.', 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/For%C3%AAt_de_pins_maritimes_-_A24837.jpg/960px-For%C3%AAt_de_pins_maritimes_-_A24837.jpg', 'from-emerald-400 to-teal-500'],
    ];

    // Données simplifiées pour la carte JS
    $spotsJs = array_map(fn ($s) => ['name' => $s[0], 'lat' => $s[1], 'lng' => $s[2], 'time' => $s[3], 'blurb' => $s[4]], $spots);
@endphp

@section('full')
    {{-- HERO --}}
    <section data-no-reveal class="relative py-28 md:py-36 overflow-hidden">
        <div class="absolute inset-0 bg-cover bg-center"
             style="background-image:url('{{ url('/wp-content/uploads/2025/03/dune-du-pilat.jpg') }}')"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-navy/70 via-navy/50 to-navy/80"></div>
        <div class="relative max-w-4xl mx-auto px-4 text-center text-white">
            <p class="uppercase tracking-[0.3em] text-xs text-white/80 mb-3">À deux pas de votre appartement</p>
            <h1 class="text-4xl md:text-6xl font-bold drop-shadow-lg">Le Bassin d'Arcachon</h1>
            <p class="mt-5 text-lg text-white/90 max-w-2xl mx-auto">
                Un joyau entre océan et forêt : dunes géantes, cabanes sur pilotis, ports ostréicoles et
                plages secrètes. Depuis Le Moulleau, tout le Bassin s'offre à vous.
            </p>
        </div>
    </section>

    @include('partials.meteo-marees')

    {{-- INTRO + CARTE INTERACTIVE --}}
    <section class="max-w-6xl mx-auto px-4 py-16">
        <div class="text-center max-w-2xl mx-auto mb-10">
            <p class="uppercase tracking-[0.25em] text-xs text-sea font-semibold mb-2">La carte des merveilles</p>
            <h2 class="text-3xl md:text-4xl font-bold text-navy">Tout le Bassin à portée de main</h2>
            <p class="mt-4 text-stone-600">Votre appartement <strong>au cœur du Bassin</strong> : cliquez sur les points pour découvrir chaque trésor et son temps de trajet.</p>
        </div>

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
              integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
        <style>
            /* Carte JavaPax - habillage moderne */
            #bassin-map { background: #eaf3f4; }
            #bassin-map .leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 14px 36px -10px rgba(20,56,74,.4); border: 1px solid #eef2f1; }
            #bassin-map .leaflet-popup-content { margin: 14px 16px; font-family: inherit; line-height: 1.4; }
            #bassin-map .leaflet-popup-tip { box-shadow: none; }
            #bassin-map .leaflet-bar { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px -6px rgba(20,56,74,.35); }
            #bassin-map .leaflet-bar a { color: #14384a; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); font-weight: 600; }
            #bassin-map .leaflet-bar a:hover { background: #1f9bbd; color: #fff; }
            #bassin-map .jvpx-pin { transition: transform .18s ease; }
            #bassin-map .jvpx-pin:hover { transform: translateY(-3px) scale(1.08); z-index: 9999; }
            #bassin-map .leaflet-control-attribution { background: rgba(255,255,255,.7); border-radius: 8px 0 0 0; font-size: 10px; }
        </style>
        <div id="bassin-map" class="w-full h-[520px] rounded-3xl shadow-xl ring-1 ring-stone-200/70 z-0 overflow-hidden"></div>
        <p class="text-center text-xs text-stone-400 mt-3">Carte © OpenStreetMap · CARTO - déplacez, zoomez, cliquez sur les points 🔎</p>
    </section>

    {{-- LES INCONTOURNABLES (cartes) --}}
    <section class="max-w-6xl mx-auto px-4 pb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-navy text-center mb-2">Les incontournables</h2>
        <p class="text-center text-stone-500 mb-10">Les pépites à ne manquer sous aucun prétexte.</p>

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            @foreach($spots as [$name,$lat,$lng,$time,$blurb,$img,$grad])
                <div class="group bg-white rounded-3xl shadow-sm hover:shadow-xl hover:-translate-y-1.5 transition-all duration-300 overflow-hidden flex flex-col">
                    @if($img)
                        <div class="h-40 overflow-hidden">
                            <picture class="contents">
                                <source srcset="{{ url(preg_replace('/\.(jpe?g|png)$/i', '.webp', $img)) }}" type="image/webp">
                                <img src="{{ url($img) }}" alt="{{ $name }}" loading="lazy"
                                     class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
                            </picture>
                        </div>
                    @else
                        <div class="h-40 bg-gradient-to-br {{ $grad }} flex items-center justify-center">
                            <svg class="w-12 h-12 text-white/90" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
                        </div>
                    @endif
                    <div class="p-5 flex flex-col flex-1">
                        <div class="flex items-center justify-between gap-2 mb-1">
                            <h3 class="font-bold text-navy">{{ $name }}</h3>
                            <span class="shrink-0 text-[11px] bg-stone-100 text-stone-600 px-2 py-0.5 rounded-full">📍 {{ $time }}</span>
                        </div>
                        <p class="text-sm text-stone-600 leading-relaxed">{{ $blurb }}</p>
                    </div>
                </div>
            @endforeach
        </div>
        <p class="text-center text-[11px] text-stone-400 mt-6">Photos&nbsp;: <a href="https://commons.wikimedia.org" target="_blank" rel="noopener" class="underline hover:text-sea">Wikimedia Commons</a> - Cabanes tchanquées, Cigognes au Teich, Port de Larros, Banc d'Arguin, Forêt de pins maritimes (licences CC&nbsp;BY / CC&nbsp;BY-SA).</p>
    </section>

    {{-- BANDEAU CTA --}}
    <section class="bg-gradient-to-r from-navy to-sea text-white">
        <div class="max-w-4xl mx-auto px-4 py-16 text-center">
            <h2 class="text-2xl md:text-3xl font-bold">Le Bassin vous tend les bras</h2>
            <p class="mt-3 text-white/90 max-w-xl mx-auto">Réservez votre séjour au Moulleau et explorez l'un des plus beaux coins de France, à votre rythme.</p>
            <div class="mt-7 flex flex-wrap gap-3 justify-center">
                <a href="{{ route('reservation') }}" class="bg-leaf hover:bg-white hover:text-navy px-7 py-3.5 rounded-full font-semibold transition">Réserver mon séjour</a>
                <a href="{{ url('/les-villes-aux-alentours') }}" class="bg-white/10 backdrop-blur border border-white/40 hover:bg-white hover:text-navy px-7 py-3.5 rounded-full font-semibold transition">Les 20 villes du Bassin</a>
            </div>
        </div>
    </section>

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

            var map = L.map('bassin-map', { scrollWheelZoom: false, zoomControl: true }).setView([apt.lat, apt.lng], 11);
            L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
                subdomains: 'abcd', maxZoom: 20, detectRetina: true,
                attribution: '© OpenStreetMap · © CARTO'
            }).addTo(map);

            var bounds = [];
            var aptIcon = L.divIcon({ className:'jvpx-pin', html:'<div style="width:40px;height:40px;background:linear-gradient(135deg,#1c4a63,#0f2e4a);border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 6px 16px rgba(20,56,74,.45);display:flex;align-items:center;justify-content:center;"><span style="transform:rotate(45deg);font-size:17px;">🏠</span></div>', iconSize:[40,40], iconAnchor:[20,40], popupAnchor:[0,-38] });
            L.marker([apt.lat, apt.lng], { icon: aptIcon, zIndexOffset:1000, riseOnHover:true }).addTo(map).bindPopup('<strong style="color:#0f2e4a;">'+apt.name+'</strong><br><span style="font-size:12px;color:#3f8f5b;">Votre appartement</span>');
            bounds.push([apt.lat, apt.lng]);

            spots.forEach(function (s) {
                var icon = L.divIcon({ className:'jvpx-pin', html:'<div style="width:30px;height:30px;background:linear-gradient(135deg,#29a9c9,#167d9c);border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 5px 12px rgba(20,56,74,.4);"><span style="display:block;width:9px;height:9px;background:#fff;border-radius:50%;margin:8px auto;transform:rotate(45deg);"></span></div>', iconSize:[30,30], iconAnchor:[15,30], popupAnchor:[0,-28] });
                var popup = '<div style="min-width:170px;"><strong style="color:#0f2e4a;font-size:14px;">'+s.name+'</strong><br>'+
                    '<span style="display:inline-block;background:#1f8fa3;color:#fff;font-size:11px;padding:1px 8px;border-radius:999px;margin:4px 0;">📍 '+s.time+'</span><br>'+
                    '<span style="font-size:12px;color:#444;">'+s.blurb+'</span></div>';
                L.marker([s.lat, s.lng], { icon: icon, riseOnHover: true }).addTo(map).bindPopup(popup);
                bounds.push([s.lat, s.lng]);
            });

            map.fitBounds(bounds, { padding:[45,45] });
            map.on('focus', function(){ map.scrollWheelZoom.enable(); });
            map.on('blur', function(){ map.scrollWheelZoom.disable(); });
        }
        init();
    })();
    </script>
@endsection