@extends('layouts.public-layout')

@section('title', 'Accès interdit - 403')

@section('content')
    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50 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-red-500 to-orange-600 shadow-2xl mb-6">
                    <i class="fas fa-lock 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-red-600 via-orange-500 to-red-600 mb-4">
                403
            </h1>

            <!-- Error Title -->
            <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                Accès interdit
            </h2>

            <!-- Error Message -->
            <p class="text-xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                Désolé, vous n'avez pas l'autorisation d'accéder à cette page.
                Si vous pensez qu'il s'agit d'une erreur, veuillez contacter l'administrateur.
            </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-red-600 to-orange-600 hover:from-red-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>
                @auth
                    <a href="{{ route('admin.dashboard') }}" 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-dashboard"></i>
                        Tableau de bord
                    </a>
                @else
                    <a href="{{ route('login') }}" 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-sign-in-alt"></i>
                        Se connecter
                    </a>
                @endauth
            </div>

            <!-- Additional Info -->
            <div class="mt-16 p-6 bg-white rounded-xl shadow-lg border-l-4 border-red-500 max-w-2xl mx-auto">
                <h3 class="text-lg font-bold text-slate-900 mb-3 flex items-center justify-center gap-2">
                    <i class="fas fa-info-circle text-red-600"></i>
                    Pourquoi ce message ?
                </h3>
                <ul class="text-left text-slate-600 space-y-2">
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-red-600 mt-1"></i>
                        <span>Vous n'êtes pas connecté avec les droits nécessaires</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-red-600 mt-1"></i>
                        <span>Cette page est réservée aux administrateurs</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-red-600 mt-1"></i>
                        <span>Votre session a peut-être expiré</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
@endsection