@extends('layouts.site')

@section('title', 'Page introuvable - JavaPax')

@section('full')
    <section class="min-h-[62vh] flex items-center justify-center px-4 py-24 text-center bg-gradient-to-b from-white to-mist">
        <div class="max-w-xl">
            <div class="text-7xl mb-4">🌊</div>
            <p class="uppercase tracking-[0.3em] text-xs text-sea font-semibold mb-3">Erreur 404</p>
            <h1 class="text-4xl md:text-5xl font-bold text-navy leading-tight">Cette page a pris le large</h1>
            <p class="mt-4 text-stone-600">La page que vous cherchez n'existe pas ou a été déplacée. Revenons à l'essentiel : votre séjour au Moulleau.</p>
            <div class="mt-8 flex flex-wrap gap-3 justify-center">
                <a href="{{ route('home') }}" class="glow-cta bg-leaf text-white font-semibold px-7 py-3 rounded-full hover:bg-navy transition">Retour à l'accueil</a>
                <a href="{{ url('/logement') }}" class="bg-white border border-stone-200 text-navy font-semibold px-7 py-3 rounded-full hover:border-sea hover:text-sea transition">Découvrir le logement</a>
            </div>
            <div class="mt-8 flex flex-wrap gap-x-5 gap-y-2 justify-center text-sm text-stone-500">
                <a href="{{ url('/tarifs') }}" class="hover:text-sea transition">Tarifs</a>
                <a href="{{ url('/le-bassin') }}" class="hover:text-sea transition">Le Bassin</a>
                <a href="{{ url('/les-villes-aux-alentours') }}" class="hover:text-sea transition">Les villes</a>
                <a href="{{ route('blog') }}" class="hover:text-sea transition">Le blog</a>
                <a href="{{ route('contact') }}" class="hover:text-sea transition">Contact</a>
            </div>
        </div>
    </section>
@endsection