@extends('layouts.site')

@section('title', 'Villes proches d\'Arcachon : les 20 communes du Bassin, du nord au sud | JavaPax')
@section('meta_description', 'Quelles villes proches d\'Arcachon découvrir ? Du nord du Bassin (Claouey, Lège-Cap Ferret) au sud (La Teste-de-Buch, Gujan-Mestras) : distances depuis Le Moulleau, plages, restaurants et incontournables des 20 villes du Bassin d\'Arcachon.')

@php
    $ico = fn($p, $s = 15) => '<svg xmlns="http://www.w3.org/2000/svg" width="'.$s.'" height="'.$s.'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'.$p.'</svg>';
    $iPin    = '<path d="M20 10c0 4.4-8 12-8 12s-8-7.6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>';
    $iCar    = '<path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/>';
    $iUsers  = '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>';
    $iBeach  = '<path d="M22 12a10 10 0 0 0-20 0Z"/><path d="M12 12v8a2 2 0 0 0 4 0"/><path d="M12 2v1"/>';
    $iFork   = '<path d="M3 2v7c0 1.1.9 2 2 2h0a2 2 0 0 0 2-2V2"/><path d="M5 2v20"/><path d="M19 2v20"/><path d="M19 11c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3"/>';
    $iStar   = '<path d="M11.5 2.3a.7.7 0 0 1 1 0l2.4 5 5.4.8a.7.7 0 0 1 .4 1.2l-3.9 3.8.9 5.4a.7.7 0 0 1-1 .7L12 17l-4.9 2.6a.7.7 0 0 1-1-.7l.9-5.4-3.9-3.8a.7.7 0 0 1 .4-1.2l5.4-.8z"/>';
    $iHeart  = '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>';
    $iArrow  = '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>';
    $iMap    = '<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/>';
    // Libellés courts de catégorie (pour la pastille sur les cartes)
    $catShort = ['incontournable' => 'Incontournable', 'ostreicole' => 'Ostréicole', 'nature' => 'Nature & Océan', 'terre' => 'Terre & Bassin', 'authentique' => 'Authentique'];
@endphp

@section('full')
<div x-data="villesPage()">

    {{-- HERO - bandeau illustré pleine largeur --}}
    <section data-no-reveal class="relative overflow-hidden border-b border-stone-100">
        {{-- Illustration du Bassin sur toute la largeur --}}
        @php
            // Utilise l'image fournie si elle existe (public/img/bandeau-villes.*),
            // sinon l'illustration SVG de secours.
            $bandeau = collect(['bandeau-villes.png', 'bandeau-villes.jpg', 'bandeau-villes.jpeg', 'bandeau-villes.webp'])
                ->first(fn ($f) => file_exists(public_path('img/'.$f)));
        @endphp
        @if($bandeau)
            {{-- Bandeau illustré, scène complète en pleine largeur --}}
            <div class="absolute inset-0 bg-cover bg-center" style="background-image:url('{{ url('img/'.$bandeau) }}');"></div>
        @else
            <div class="absolute inset-0">@include('content.partials.bassin-illustration')</div>
        @endif
        {{-- Fondu blanc à gauche pour la lisibilité du texte --}}
        <div class="absolute inset-0 bg-gradient-to-r from-white via-white/80 md:via-white/55 to-transparent"></div>
        <div class="relative max-w-6xl mx-auto px-4 py-16 md:py-28">
            <div class="max-w-lg">
                <p class="uppercase tracking-[0.25em] text-xs text-emerald-700 font-semibold mb-3">À explorer autour de vous</p>
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-navy leading-tight">Les {{ count($villes) }} villes proches<br>d'Arcachon</h1>
                <p class="mt-5 text-lg text-stone-600 max-w-md">Quelles sont les villes les plus proches d'Arcachon ? Du nord du Bassin (Claouey, Lège-Cap Ferret) au sud (La Teste-de-Buch, Gujan-Mestras), voici les {{ count($villes) }} villes du Bassin d'Arcachon à découvrir depuis Le Moulleau : distances, plages, activités et nos meilleures adresses.</p>
            </div>
        </div>
    </section>

    {{-- CORPS : sidebar + grille (pleine largeur) --}}
    <section class="max-w-[1600px] mx-auto px-4 lg:px-8 py-12">
        <div class="grid lg:grid-cols-[260px_1fr] gap-8">

            {{-- SIDEBAR FILTRES --}}
            <aside class="lg:sticky lg:top-24 self-start">
                <nav class="space-y-1.5">
                    @foreach($categories as $key => [$label, $path])
                        <button @click="cat = '{{ $key }}'"
                                :class="cat === '{{ $key }}' ? 'bg-leaf/10 text-emerald-700 font-semibold' : 'text-stone-600 hover:bg-stone-100'"
                                class="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition text-left text-sm">
                            <span :class="cat === '{{ $key }}' ? 'text-emerald-700' : 'text-stone-600'">{!! $ico($path, 18) !!}</span>
                            <span class="flex-1">{{ $label }}</span>
                            <span :class="cat === '{{ $key }}' ? 'bg-leaf text-white' : 'bg-stone-100 text-stone-500'"
                                  class="text-xs font-semibold px-2 py-0.5 rounded-full">{{ $counts[$key] ?? 0 }}</span>
                        </button>
                    @endforeach
                </nav>

                {{-- Carte interactive --}}
                <a href="{{ url('/le-bassin') }}" class="mt-5 block rounded-2xl overflow-hidden border border-stone-100 bg-gradient-to-br from-sea/10 to-leaf/10 hover:shadow-lg transition group">
                    <div class="p-5">
                        <div class="flex items-center gap-2 text-navy font-bold">
                            <span class="text-sea">{!! $ico($iMap, 18) !!}</span> Carte interactive
                        </div>
                        <p class="text-sm text-stone-500 mt-1">Explorez toutes les villes du Bassin sur la carte</p>
                        <span class="mt-3 inline-flex items-center gap-1 text-emerald-700 text-sm font-semibold group-hover:gap-2 transition-all">
                            Ouvrir la carte {!! $ico($iArrow, 14) !!}
                        </span>
                    </div>
                </a>
            </aside>

            {{-- GRILLE DES VILLES --}}
            <div>
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6" data-stagger>
                    @foreach($villes as $v)
                        <div x-show="cat === 'all' || cat === '{{ $v['categorie'] }}'" x-transition.opacity
                             class="lift bg-white rounded-2xl overflow-hidden shadow-sm border border-stone-100 flex flex-col">
                            {{-- Visuel : illustration ENTIÈRE et centrée, fond flou pour combler (aucun rognage) --}}
                            <div class="relative aspect-[4/3] overflow-hidden group bg-stone-100">
                                <a href="{{ url($v['url']) }}" class="block w-full h-full">
                                    @if($v['image'])
                                        {{-- Fond : même image, floutée et zoomée, pour remplir sans bandes --}}
                                        @php $vWebp = url(preg_replace('/\.(jpe?g|png)$/i', '.webp', $v['image'])); @endphp
                                        <picture class="contents">
                                            <source srcset="{{ $vWebp }}" type="image/webp">
                                            <img src="{{ url($v['image']) }}" alt="" aria-hidden="true"
                                                 class="absolute inset-0 w-full h-full object-cover scale-125 blur-2xl opacity-50">
                                        </picture>
                                        {{-- Illustration nette, entière, centrée (titre intégré toujours visible) --}}
                                        <picture class="contents">
                                            <source srcset="{{ $vWebp }}" type="image/webp">
                                            <img src="{{ url($v['image']) }}" alt="{{ $v['nom'] }}" loading="lazy"
                                                 class="relative z-[1] w-full h-full object-contain object-center group-hover:scale-[1.04] transition duration-700 ease-out">
                                        </picture>
                                    @else
                                        <div class="w-full h-full bg-gradient-to-br from-sea to-navy flex items-center justify-center">
                                            <span class="text-white/90 text-5xl font-bold">{{ mb_substr($v['nom'],0,1) }}</span>
                                        </div>
                                    @endif
                                    <div class="absolute inset-0 z-[2] bg-gradient-to-t from-navy/15 to-transparent opacity-0 group-hover:opacity-100 transition duration-500"></div>
                                </a>
                                <span class="absolute z-[3] top-3 left-3 w-8 h-8 rounded-full bg-white text-navy font-bold text-sm flex items-center justify-center shadow ring-1 ring-black/5">{{ $v['num'] }}</span>
                                <button @click="toggleFav({{ $v['num'] }})" aria-label="Favori"
                                        class="absolute z-[3] top-3 right-3 w-8 h-8 rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow ring-1 ring-black/5 transition hover:scale-110 active:scale-95"
                                        :class="isFav({{ $v['num'] }}) ? 'text-rose-500' : 'text-stone-600'">
                                    <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :fill="isFav({{ $v['num'] }}) ? 'currentColor' : 'none'">{!! $iHeart !!}</svg>
                                </button>
                            </div>

                            {{-- Corps --}}
                            <div class="p-5 flex flex-col flex-1">
                                {{-- Pastille catégorie (sortie de l'image pour ne jamais masquer le titre) --}}
                                @php $catIcon = $categories[$v['categorie']][1] ?? ''; $catLabel = $catShort[$v['categorie']] ?? ''; @endphp
                                <span class="self-start inline-flex items-center gap-1.5 rounded-full bg-leaf/10 px-2.5 py-1 text-[11px] font-semibold text-emerald-700 mb-2">
                                    {!! $ico($catIcon, 13) !!} {{ $catLabel }}
                                </span>
                                <a href="{{ url($v['url']) }}" class="hover:text-emerald-700 transition">
                                    <h2 class="text-xl font-bold text-navy">{{ $v['nom'] }}</h2>
                                </a>
                                @if(count($v['tags']))
                                    <p class="text-sm text-stone-500 mt-1">{{ implode(' • ', $v['tags']) }}</p>
                                @endif

                                {{-- Ligne distance / trajet / population --}}
                                <div class="flex flex-wrap items-center gap-x-5 gap-y-1.5 mt-4 text-sm text-stone-500">
                                    @if($v['distance'])<span class="inline-flex items-center gap-1.5">{!! $ico($iPin) !!} {{ $v['distance'] }}</span>@endif
                                    @if($v['voiture'])<span class="inline-flex items-center gap-1.5">{!! $ico($iCar) !!} {{ $v['voiture'] }}</span>@endif
                                    @if($v['population'])<span class="inline-flex items-center gap-1.5">{!! $ico($iUsers) !!} {{ $v['population'] }} hab.</span>@endif
                                </div>

                                {{-- Encart statistiques --}}
                                <div class="grid grid-cols-3 gap-2 mt-4 bg-amber-50/70 rounded-xl p-3 text-center">
                                    <div>
                                        <div class="flex items-center justify-center gap-1 text-navy font-bold">
                                            <span class="text-amber-500">{!! $ico($iBeach, 14) !!}</span> {{ $v['plages'] }}
                                        </div>
                                        <div class="text-[11px] text-stone-500 mt-0.5">Plages</div>
                                    </div>
                                    <div class="border-x border-amber-100">
                                        <div class="flex items-center justify-center gap-1 text-navy font-bold">
                                            <span class="text-rose-400">{!! $ico($iFork, 14) !!}</span> {{ $v['restaurants'] }}
                                        </div>
                                        <div class="text-[11px] text-stone-500 mt-0.5">Restaurants</div>
                                    </div>
                                    <div>
                                        <div class="flex items-center justify-center gap-1 text-navy font-bold">
                                            <span class="text-sea">{!! $ico($iStar, 14) !!}</span> {{ $v['incontournables'] }}
                                        </div>
                                        <div class="text-[11px] text-stone-500 mt-0.5">Incontournables</div>
                                    </div>
                                </div>

                                <a href="{{ url($v['url']) }}" class="mt-4 inline-flex items-center gap-1 text-emerald-700 font-semibold text-sm hover:gap-2 transition-all">
                                    Découvrir {{ $v['nom'] }} {!! $ico($iArrow, 16) !!}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
function villesPage () {
    return {
        cat: 'all',
        favs: JSON.parse(localStorage.getItem('jvpx_favs') || '[]'),
        isFav (n) { return this.favs.includes(n); },
        toggleFav (n) {
            this.favs = this.isFav(n) ? this.favs.filter(x => x !== n) : [...this.favs, n];
            localStorage.setItem('jvpx_favs', JSON.stringify(this.favs));
        },
    };
}
</script>
@endpush
@endsection