<?php
/**
 * Error Page
 * Handles 403, 404, 500 and other error codes
 */

$error_code = isset($_GET['code']) ? intval($_GET['code']) : 404;

$errors = [
    400 => ['title' => 'Bad Request', 'message' => 'The server could not understand your request.', 'icon' => 'exclamation-circle'],
    401 => ['title' => 'Unauthorized', 'message' => 'You need to log in to access this page.', 'icon' => 'lock'],
    403 => ['title' => 'Access Forbidden', 'message' => 'You don\'t have permission to access this resource.', 'icon' => 'ban'],
    404 => ['title' => 'Page Not Found', 'message' => 'The page you\'re looking for doesn\'t exist or has been moved.', 'icon' => 'search'],
    500 => ['title' => 'Server Error', 'message' => 'Something went wrong on our end. Please try again later.', 'icon' => 'server'],
];

$error = $errors[$error_code] ?? $errors[404];

http_response_code($error_code);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $error['title']; ?> - Uhakiki Madalali</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/font-awesome/css/all.min.css">
    <style>
        * {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #1a3a6e 0%, #2d5a3d 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .error-container {
            background: white;
            border-radius: 20px;
            padding: 50px;
            text-align: center;
            max-width: 500px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .error-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
        }

        .error-icon i {
            font-size: 48px;
            color: white;
        }

        .error-code {
            font-size: 72px;
            font-weight: 700;
            color: #1a3a6e;
            line-height: 1;
            margin-bottom: 10px;
        }

        .error-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
        }

        .error-message {
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            margin: 5px;
        }

        .btn-primary {
            background: #1a3a6e;
            color: white;
        }

        .btn-primary:hover {
            background: #2d5a3d;
            transform: translateY(-2px);
        }

        .btn-outline {
            background: transparent;
            color: #1a3a6e;
            border: 2px solid #1a3a6e;
        }

        .btn-outline:hover {
            background: #1a3a6e;
            color: white;
        }

        .logo {
            margin-bottom: 20px;
        }

        .logo i {
            font-size: 32px;
            color: #1a3a6e;
        }

        @media (max-width: 480px) {
            .error-container {
                padding: 30px;
            }

            .error-code {
                font-size: 56px;
            }

            .error-title {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="logo">
            <i class="fas fa-map-marked-alt"></i>
        </div>

        <div class="error-icon">
            <i class="fas fa-<?php echo $error['icon']; ?>"></i>
        </div>

        <div class="error-code"><?php echo $error_code; ?></div>
        <h1 class="error-title"><?php echo $error['title']; ?></h1>
        <p class="error-message"><?php echo $error['message']; ?></p>

        <div>
            <a href="javascript:history.back()" class="btn btn-outline">
                <i class="fas fa-arrow-left mr-2"></i>Go Back
            </a>
            <a href="dashboard" class="btn btn-primary">
                <i class="fas fa-home mr-2"></i>Dashboard
            </a>
        </div>
    </div>
</body>
</html>
