@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-center align-items-center" style="min-height: 60vh;">
    <div class="text-center">
        <div class="mb-4">
            <div style="width:80px;height:80px;border-radius:50%;background:rgba(239,68,68,.1);display:inline-flex;align-items:center;justify-content:center;">
                <i data-lucide="shield-x" style="width:40px;height:40px;color:#ef4444;"></i>
            </div>
        </div>
        <h2 class="mb-2" style="color:#0f172a;font-weight:700;">Access Denied</h2>
        <p class="text-secondary mb-4" style="max-width:400px;margin:0 auto;">
            {{ $exception->getMessage() ?: 'You do not have permission to access this section.' }}
        </p>
        <div class="d-flex gap-2 justify-content-center">
            <a href="{{ \App\Support\HomeRouter::pathFor(auth()->user()) }}" class="btn btn-primary">
                <i data-lucide="home" class="me-1" style="width:14px;height:14px;"></i> Back to Home
            </a>
            <a href="javascript:history.back()" class="btn btn-outline-secondary">
                <i data-lucide="arrow-left" class="me-1" style="width:14px;height:14px;"></i> Go Back
            </a>
        </div>
    </div>
</div>
@endsection