<?php 
include 'lang.php'; // ملف إدارة اللغات (AR, TR, EN)
include 'db.php';   // ملف الاتصال بقاعدة البيانات

// تحديد اتجاه الصفحة والمحاذاة بناءً على اللغة
$dir = ($lang == 'ar' ? 'rtl' : 'ltr');
?>
<!DOCTYPE html>
<html lang="<?php echo $lang; ?>" dir="<?php echo $dir; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $words[$lang]['inst_name']; ?> | <?php echo $words[$lang]['site_title']; ?></title>    
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700;800&display=swap" rel="stylesheet">
    
    <?php if($lang == 'ar'): ?>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
    <?php else: ?>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <?php endif; ?>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-gold: #D4AF37; 
            --charcoal: #1A1A1A;   
            --bg-grey: #f4f4f4;
        }
        body { 
            font-family: 'Tajawal', sans-serif; 
            background: linear-gradient(rgba(255, 253, 240, 0.85), rgba(255, 253, 240, 0.85)), 
                        url('pngegg2.jpg') fixed; 
            background-size: cover;
            background-color: #FFFDF0;
            color: #333;
        }
        .navbar {
            background: var(--charcoal);
            border-bottom: 2px solid var(--primary-gold);
            padding: 15px 0;
        }
        .nav-link { color: #fff !important; font-weight: 700; transition: 0.3s; }
        .nav-link:hover { color: var(--primary-gold) !important; }
        
        /* تنسيق أزرار البوابات */
        .portal-btn {
            border: 1px solid rgba(212, 175, 55, 0.5);
            border-radius: 50px;
            padding: 5px 15px !important;
            font-size: 14px;
            transition: 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .portal-btn:hover {
            background: var(--primary-gold);
            color: #fff !important;
        }

        <?php if($lang != 'ar'): ?>
        .ms-lg-4 { margin-left: 1.5rem !important; }
        .justify-content-end { justify-content: flex-end !important; }
        <?php endif; ?>
    </style>
</head>
<body>
<div class="top-header py-2" style="
    background: linear-gradient(rgba(242, 229, 217, 0.85), rgba(242, 229, 217, 0.85)), url('pngegg2.jpg'); 
    background-size: cover; 
    background-position: center;
    border-bottom: 2px solid #d9b34d; 
    direction: <?php echo ($lang == 'ar' ? 'rtl' : 'ltr'); ?>;">
    
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <span style="color: #4a3f35; font-size: 15px; font-weight: 700; text-shadow: 1px 1px 0px rgba(255,255,255,0.5);">
                    <?php echo $words[$lang]['top_bar_text']; ?>
                </span>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-lg sticky-top">
    <div class="container">
        <a class="navbar-brand" href="index.php">
            <img src="logo.png" height="65" style="filter: drop-shadow(0px 0px 5px rgba(255,255,255,0.8));">
        </a>
        <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav align-items-center gap-2">
                <li class="nav-item"><a class="nav-link" href="index.php"><?php echo $words[$lang]['nav_home']; ?></a></li>
                <li class="nav-item"><a class="nav-link" href="courses.php"><?php echo $words[$lang]['nav_courses']; ?></a></li>
                <li class="nav-item"><a class="nav-link" href="about.php"><?php echo $words[$lang]['about']; ?></a></li>
                <li class="nav-item"><a class="nav-link" href="gallery.php"><?php echo $words[$lang]['nav_gallery']; ?></a></li>
                <li class="nav-item"><a class="nav-link" href="contact.php"><?php echo $words[$lang]['contact']; ?></a></li>

                <li class="nav-item ms-lg-2">
                    <a class="nav-link portal-btn" href="admin/login.php">
                        <i class="fas fa-user-shield"></i>
                        <?php echo $words[$lang]['nav_admin']; ?>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link portal-btn" href="https://lughatalarabinstitute.net/system/portal/login.php" style="border-color: rgba(255,255,255,0.3);">
                        <i class="fas fa-graduation-cap"></i>
                        <?php echo $words[$lang]['nav_student']; ?>
                    </a>
                </li>

                <li class="nav-item ms-lg-4">
                    <div class="d-flex gap-1">
                        <a href="?lang=ar" class="btn btn-xs btn-outline-light <?php echo ($lang == 'ar' ? 'active' : ''); ?>" style="font-size: 10px;">AR</a>
                        <a href="?lang=tr" class="btn btn-xs btn-outline-light <?php echo ($lang == 'tr' ? 'active' : ''); ?>" style="font-size: 10px;">TR</a>
                        <a href="?lang=en" class="btn btn-xs btn-outline-light <?php echo ($lang == 'en' ? 'active' : ''); ?>" style="font-size: 10px;">EN</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>