@extends('layouts.public-layout')

@section('title', 'Erreur serveur - 500')

@section('content')
    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 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-slate-600 to-slate-800 shadow-2xl mb-6">
                    <i class="fas fa-server 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-slate-600 via-slate-700 to-slate-600 mb-4">
                500
            </h1>

            <!-- Error Title -->
            <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                Erreur serveur
            </h2>

            <!-- Error Message -->
            <p class="text-xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                Oups ! Une erreur inattendue s'est produite sur le serveur.
                Nos équipes ont été informées et travaillent à résoudre le problème.
            </p>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
                <a href="{{ route('public.home') }}" class="inline-flex items-center gap-2 bg-gradient-to-r from-slate-700 to-slate-900 hover:from-slate-800 hover:to-slate-950 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="location.reload()" class="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-700 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-rotate-right"></i>
                    Réessayer
                </button>
            </div>

            <!-- Error Details Card -->
            <div class="mt-16 p-8 bg-white rounded-xl shadow-lg border-t-4 border-slate-700 max-w-2xl mx-auto">
                <h3 class="text-xl font-bold text-slate-900 mb-4 flex items-center justify-center gap-2">
                    <i class="fas fa-lightbulb text-amber-600"></i>
                    Que faire en attendant ?
                </h3>
                <div class="grid md:grid-cols-2 gap-4 text-left">
                    <div class="p-4 bg-slate-50 rounded-lg">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-clock text-slate-600 text-xl mt-1"></i>
                            <div>
                                <h4 class="font-bold text-slate-900 mb-1">Patientez</h4>
                                <p class="text-sm text-slate-600">Le problème est peut-être temporaire. Réessayez dans quelques minutes.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 bg-slate-50 rounded-lg">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-rotate text-slate-600 text-xl mt-1"></i>
                            <div>
                                <h4 class="font-bold text-slate-900 mb-1">Rafraîchissez</h4>
                                <p class="text-sm text-slate-600">Actualisez la page ou videz le cache de votre navigateur.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 bg-slate-50 rounded-lg">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-envelope text-slate-600 text-xl mt-1"></i>
                            <div>
                                <h4 class="font-bold text-slate-900 mb-1">Contactez-nous</h4>
                                <p class="text-sm text-slate-600">Si l'erreur persiste, contactez notre équipe technique.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 bg-slate-50 rounded-lg">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-bookmark text-slate-600 text-xl mt-1"></i>
                            <div>
                                <h4 class="font-bold text-slate-900 mb-1">Explorez</h4>
                                <p class="text-sm text-slate-600">Visitez d'autres sections du site en attendant.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Error Reference -->
            <div class="mt-8 text-sm text-slate-500">
                <p>Référence de l'erreur : {{ uniqid('ERR-') }}</p>
                <p class="mt-1">{{ now()->format('d/m/Y H:i:s') }}</p>
            </div>
        </div>
    </section>
@endsection