@extends('layouts.public-layout')

@section('title', 'Page non trouvée - 404')

@section('content')
    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 py-16">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <!-- Error Icon -->
            <div class="mb-8">
                <div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 shadow-2xl mb-6 animate-bounce">
                    <i class="fas fa-exclamation-triangle text-white text-6xl"></i>
                </div>
            </div>

            <!-- Error Code -->
            <h1 class="text-9xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-orange-500 to-amber-600 mb-4">
                404
            </h1>

            <!-- Error Title -->
            <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                Page non trouvée
            </h2>

            <!-- Error Message -->
            <p class="text-xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                Désolé, la page que vous recherchez n'existe pas ou a été déplacée.
                Veuillez vérifier l'URL ou retourner à la page d'accueil.
            </p>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <a href="{{ route('public.home') }}" class="inline-flex items-center gap-2 bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white px-8 py-4 rounded-lg font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
                    <i class="fas fa-home"></i>
                    Retour à l'accueil
                </a>
                <button onclick="history.back()" class="inline-flex items-center gap-2 bg-slate-700 hover:bg-slate-800 text-white px-8 py-4 rounded-lg font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300">
                    <i class="fas fa-arrow-left"></i>
                    Page précédente
                </button>
            </div>

            <!-- Helpful Links -->
            <div class="mt-16 pt-8 border-t border-slate-300">
                <p class="text-slate-600 mb-6 font-medium">Vous cherchez peut-être :</p>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
                    <a href="{{ route('public.churches') }}" class="group bg-white hover:bg-amber-50 p-4 rounded-lg shadow hover:shadow-lg transition-all duration-300 border border-slate-200 hover:border-amber-400">
                        <i class="fas fa-church text-3xl text-amber-600 mb-2 group-hover:scale-110 transition-transform duration-300"></i>
                        <p class="text-sm font-semibold text-slate-700">Nos Églises</p>
                    </a>
                    <a href="{{ route('public.events') }}" class="group bg-white hover:bg-amber-50 p-4 rounded-lg shadow hover:shadow-lg transition-all duration-300 border border-slate-200 hover:border-amber-400">
                        <i class="fas fa-calendar-alt text-3xl text-amber-600 mb-2 group-hover:scale-110 transition-transform duration-300"></i>
                        <p class="text-sm font-semibold text-slate-700">Événements</p>
                    </a>
                    <a href="{{ route('public.media') }}" class="group bg-white hover:bg-amber-50 p-4 rounded-lg shadow hover:shadow-lg transition-all duration-300 border border-slate-200 hover:border-amber-400">
                        <i class="fas fa-photo-video text-3xl text-amber-600 mb-2 group-hover:scale-110 transition-transform duration-300"></i>
                        <p class="text-sm font-semibold text-slate-700">Médiathèque</p>
                    </a>
                    <a href="{{ route('public.testimonials') }}" class="group bg-white hover:bg-amber-50 p-4 rounded-lg shadow hover:shadow-lg transition-all duration-300 border border-slate-200 hover:border-amber-400">
                        <i class="fas fa-quote-right text-3xl text-amber-600 mb-2 group-hover:scale-110 transition-transform duration-300"></i>
                        <p class="text-sm font-semibold text-slate-700">Témoignages</p>
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection