@extends('layouts.app')

@section('title', '403 Forbidden - Access Denied')

@section('content')
<div class="flex-grow flex items-center justify-center py-8 md:py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-dav-700 via-dav-600 to-dav-500 relative overflow-hidden">
    <!-- Background overlay circle shapes -->
    <div class="absolute -top-40 -left-40 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>
    <div class="absolute -bottom-40 -right-40 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>

    <div class="max-w-md w-full space-y-6 glass-card p-6 md:p-8 rounded-3xl shadow-2xl relative z-10 animate-fade-in border border-white/20 text-center">
        <div class="w-20 h-20 bg-rose-100 text-rose-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-md animate-pulse">
            <i class="fa-solid fa-ban text-3xl"></i>
        </div>
        
        <h2 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight">Access Denied</h2>
        <span class="badge bg-rose-100 text-rose-800 border border-rose-200 font-extrabold px-3 py-1 text-xs rounded-lg uppercase tracking-wide">
            Error Code 403
        </span>
        
        <p class="text-slate-500 text-sm leading-relaxed mt-2">
            {{ $exception->getMessage() ?: 'You do not have permission to access this resource or perform this action.' }}
        </p>

        <div class="pt-4 border-t border-slate-200 flex flex-col gap-2">
            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary bg-dav-500 hover:bg-dav-600 border-0 rounded-pill py-2.5 font-bold shadow-md hover-lift flex items-center justify-center gap-2 text-sm">
                <i class="fa-solid fa-house text-xs"></i> Back to Dashboard
            </a>
            <a href="{{ route('home') }}" class="btn btn-outline-secondary rounded-pill py-2 text-xs font-semibold hover-lift">
                Back to Public Portal
            </a>
        </div>
    </div>
</div>
@endsection