<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?= htmlspecialchars($title ?? 'Error - GlobalXpress', ENT_QUOTES, 'UTF-8') ?></title>
    
    <link rel="icon" type="image/png" href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/assets/images/fevicon.png">

    <!-- Plus Jakarta Sans -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'] },
                    colors: {
                        app: {
                            primary: '#3B82F6',
                            primaryHover: '#2563EB',
                            sidebar: '#0A1930',
                            textMain: '#0F172A',
                        },
                        fedex: {
                            purple: '#4d148c',
                            orange: '#ff6200',
                            gray: '#f2f2f2',
                            darkgray: '#333333'
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-slate-50 font-sans text-app-textMain antialiased min-h-screen flex flex-col selection:bg-app-primary selection:text-white">

    <!-- Minimal Header -->
    <header class="bg-app-sidebar border-b border-white/10 shadow-md">
        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/" class="text-3xl font-black text-white tracking-tighter">
                Fed<span class="text-fedex-orange">Ex</span><span class="text-sm font-normal align-top">&reg;</span>
            </a>
            
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>" class="hidden sm:flex items-center gap-2 text-sm font-medium text-slate-400 hover:text-white transition-colors">
                <i class="fa-solid fa-arrow-left"></i> Return to Main Site
            </a>
        </div>
    </header>

    <!-- Error Content Area -->
    <main class="flex-grow flex items-center justify-center p-6 relative overflow-hidden">
        <!-- Decorative background elements -->
        <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-400/5 rounded-full blur-[100px] pointer-events-none"></div>
        <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-slate-400/10 rounded-full blur-[120px] pointer-events-none"></div>
        
        <div class="relative z-10 w-full">
            <div class="text-center max-w-md mx-auto animate-[fadeIn_0.5s_ease-out]">
    <div class="relative">
        <div class="text-[150px] font-black text-slate-200 leading-none select-none drop-shadow-sm tracking-tighter">
            403
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-xl border border-slate-100 text-orange-500">
                <i class="fa-solid fa-shield-halved text-4xl"></i>
            </div>
        </div>
    </div>
    
    <div class="mt-8">
        <h1 class="text-3xl md:text-4xl font-black text-slate-900 tracking-tight mb-3"><?= htmlspecialchars(!empty($title) ? $title : 'Restricted Area', ENT_QUOTES, 'UTF-8') ?></h1>
        <p class="text-slate-500 font-medium mb-10 text-lg">
            <?= htmlspecialchars(!empty($content) ? $content : 'You do not have the required security clearance to access this sector of the GlobalXpress system.', ENT_QUOTES, 'UTF-8') ?>
        </p>
        
        <div class="flex flex-col items-center justify-center gap-4">
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/dashboard" class="w-full sm:w-auto px-10 py-4 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-2xl transition-all shadow-lg flex items-center justify-center gap-2 active:scale-95">
                <i class="fa-solid fa-arrow-left"></i> Go Back
            </a>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/login" class="text-sm font-bold text-app-primary hover:text-app-primaryHover transition-colors mt-2">
                Sign in with a different account
            </a>
        </div>
    </div>
</div>
        </div>
    </main>

</body>
</html>