@extends('layouts.site')

@section('title', 'Le Bassin d\'Arcachon — JavaPax au Moulleau')
@section('meta_description', 'Dune du Pilat, Cap Ferret, cabanes tchanquées, réserve du Teich, ports ostréicoles… Découvrez les merveilles du Bassin d\'Arcachon, toutes à portée depuis Le Moulleau.')

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

    // 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.', null, '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.', null, '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.', null, '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.', null, '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.6082, -1.1668, '80 km', 'Plus de 220 km de pistes cyclables : faites le tour du Bassin en famille, au départ du Moulleau.', null, '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>

    {{-- MÉTÉO & MARÉES (7 jours) --}}
    <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">Préparez votre séjour</p>
            <h2 class="text-3xl md:text-4xl font-bold text-navy">Météo & marées des 7 prochains jours</h2>
            <p class="mt-4 text-stone-600">Le temps qu'il fera au Moulleau et les coefficients de marée, pour planifier plages, balades et baignades.</p>
        </div>

        {{-- Météo récupérée côté navigateur (Open-Meteo, gratuit, sans clé). --}}
        <div x-data="javapaxMeteo()" x-init="load()" class="mb-8">
            {{-- Chargement --}}
            <template x-if="state === 'loading'">
                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
                    <template x-for="n in 7" :key="n">
                        <div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-4 h-40 animate-pulse">
                            <div class="h-3 w-12 bg-stone-200 rounded mx-auto mb-3"></div>
                            <div class="h-8 w-8 bg-stone-200 rounded-full mx-auto mb-3"></div>
                            <div class="h-3 w-16 bg-stone-200 rounded mx-auto mb-2"></div>
                            <div class="h-4 w-14 bg-stone-200 rounded mx-auto"></div>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Données --}}
            <template x-if="state === 'ok'">
                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
                    <template x-for="(d, i) in days" :key="i">
                        <div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-4 text-center hover:shadow-lg hover:-translate-y-1 transition" :class="i === 0 ? 'ring-2 ring-sea/40' : ''">
                            <div class="text-xs font-bold uppercase tracking-wide" :class="i === 0 ? 'text-sea' : 'text-stone-400'" x-text="i === 0 ? &quot;Aujourd'hui&quot; : d.jour"></div>
                            <div class="text-4xl my-2" x-text="d.icon"></div>
                            <div class="text-[11px] text-stone-400 leading-tight mb-2 h-7" x-text="d.label"></div>
                            <div class="font-bold text-navy"><span class="text-lg" x-text="d.tmax + '°'"></span> <span class="text-stone-400 text-sm" x-text="d.tmin + '°'"></span></div>
                            <div class="mt-2 flex justify-center gap-2 text-[11px] text-stone-500">
                                <span title="Probabilité de pluie">💧<span x-text="(d.pluie ?? 0) + '%'"></span></span>
                                <span title="Vent (km/h)">💨<span x-text="d.vent"></span></span>
                            </div>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Erreur --}}
            <template x-if="state === 'error'">
                <div class="bg-stone-50 border border-stone-100 rounded-2xl p-6 text-center text-stone-400 text-sm">Météo momentanément indisponible — réessayez plus tard.</div>
            </template>
        </div>

        @push('scripts')
        <script>
        function javapaxMeteo () {
            return {
                state: 'loading',
                days: [],
                wmo (c) {
                    if (c === 0) return ['☀️', 'Ensoleillé'];
                    if (c === 1 || c === 2) return ['🌤️', 'Éclaircies'];
                    if (c === 3) return ['☁️', 'Couvert'];
                    if (c === 45 || c === 48) return ['🌫️', 'Brouillard'];
                    if ([51, 53, 55, 56, 57].includes(c)) return ['🌦️', 'Bruine'];
                    if ([61, 63, 65, 80, 81, 82].includes(c)) return ['🌧️', 'Pluie'];
                    if (c === 66 || c === 67) return ['🌧️', 'Pluie verglaçante'];
                    if ([71, 73, 75, 77, 85, 86].includes(c)) return ['❄️', 'Neige'];
                    if ([95, 96, 99].includes(c)) return ['⛈️', 'Orage'];
                    return ['🌡️', 'Variable'];
                },
                async load () {
                    const jours = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
                    const url = 'https://api.open-meteo.com/v1/forecast?latitude=44.66&longitude=-1.16'
                        + '&daily=weather_code,temperature_2m_max,temperature_2m_min,precipitation_probability_max,wind_speed_10m_max'
                        + '&timezone=Europe%2FParis&forecast_days=7';
                    try {
                        const res = await fetch(url);
                        if (!res.ok) throw new Error('http ' + res.status);
                        const j = await res.json();
                        const d = j.daily;
                        if (!d || !d.time) throw new Error('no data');
                        this.days = d.time.map((t, i) => {
                            const [icon, label] = this.wmo(d.weather_code[i]);
                            const dt = new Date(t + 'T12:00:00');
                            return {
                                jour: jours[dt.getDay()],
                                icon, label,
                                tmax: Math.round(d.temperature_2m_max[i]),
                                tmin: Math.round(d.temperature_2m_min[i]),
                                pluie: d.precipitation_probability_max[i],
                                vent: Math.round(d.wind_speed_10m_max[i]),
                            };
                        });
                        this.state = 'ok';
                    } catch (e) {
                        this.state = 'error';
                    }
                },
            };
        }
        </script>
        @endpush

        {{-- Marées / coefficients --}}
        <div class="rounded-2xl overflow-hidden bg-gradient-to-r from-sea to-blue-600 text-white">
            <div class="p-6 md:p-8 flex flex-col md:flex-row items-center gap-6">
                <div class="text-5xl">🌊</div>
                <div class="flex-1 text-center md:text-left">
                    <h3 class="text-xl font-bold">Coefficients de marée</h3>
                    <p class="text-white/85 text-sm mt-1">Le Bassin se découvre au rythme des marées : grandes marées (coef. &gt; 95) pour les bancs de sable et la pêche à pied, marées douces pour la baignade. Consultez les horaires et coefficients précis d'Arcachon en direct.</p>
                </div>
                <a href="https://www.maree.info/183" target="_blank" rel="noopener" class="shrink-0 bg-white text-sea font-semibold px-6 py-3 rounded-full hover:bg-stone-100 transition whitespace-nowrap">
                    Voir les marées d'Arcachon →
                </a>
            </div>
        </div>
    </section>

    {{-- 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="" />
        <div id="bassin-map" class="w-full h-[520px] rounded-3xl shadow-xl border border-stone-100 z-0"></div>
        <p class="text-center text-xs text-stone-400 mt-3">Carte © OpenStreetMap — 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">
                            <img src="{{ url($img) }}" alt="{{ $name }}" loading="lazy"
                                 class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
                        </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>
    </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 }).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 = [];
            var aptIcon = L.divIcon({ className:'', html:'<div style="background:#0f2e4a;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;"><span style="transform:rotate(45deg);font-size:15px;">🏠</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:#0f2e4a;">'+apt.name+'</strong>');
            bounds.push([apt.lat, apt.lng]);

            spots.forEach(function (s) {
                var icon = L.divIcon({ className:'', html:'<div style="background:#1f8fa3;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35);"></div>', iconSize:[26,26], iconAnchor:[13,26], popupAnchor:[0,-26] });
                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 }).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