<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>خطأ في النظام</title>
    <!-- Google Fonts: Tajawal & Cairo for Arabic -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: 'Cairo', sans-serif; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        .error-card { max-width: 600px; width: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }
        .error-header { background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; padding: 40px 20px; text-align: center; }
        .error-icon { font-size: 60px; margin-bottom: 15px; }
        .error-body { padding: 40px 30px; background: white; text-align: center; }
    </style>
</head>
<body>
    <div class="error-card">
        <div class="error-header">
            <i class="fa-solid fa-triangle-exclamation error-icon"></i>
            <h2 class="mb-0 fw-bold">500 - خطأ داخلي في الخادم</h2>
        </div>
        <div class="error-body">
            <h5 class="text-secondary mb-4"><?= htmlspecialchars($fallbackMessage ?? 'حدث خطأ غير متوقع. يرجى المحاولة لاحقاً.') ?></h5>
            <p class="text-muted small mb-4">تم تسجيل الخطأ في سجلات النظام وسيقوم المسؤولون بمراجعته.</p>
            <a href="<?= BASE_URL ?>/" class="btn btn-primary px-4 py-2 fw-bold"><i class="fa-solid fa-house me-2"></i> العودة للرئيسية</a>
        </div>
    </div>
</body>
</html>
