<?php
// header.php - Professional Navbar with Dynamic Categories from Database
// File location: /bidwheels.net/includes/header.php

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/db.php';
require_once __DIR__ . '/functions.php';

// Fetch categories that have at least one active product (not reserved, not ended)
$active_categories = fetchAll("
    SELECT DISTINCT c.* 
    FROM categories c
    INNER JOIN products p ON c.id = p.category_id
    WHERE p.is_reserved = 0 
    AND p.end_time > NOW()
    GROUP BY c.id
    ORDER BY c.name ASC
");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="BidWheels.net - The ultimate car bidding platform. Bid on luxury cars, motorcycles, yachts and more.">
    <meta name="keywords" content="car auction, car bidding, luxury cars, motorcycles, yachts, bid online">
    <meta name="author" content="BidWheels">
    <title><?php echo SITE_NAME; ?> - Bid on Your Dream Vehicle</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?php echo SITE_URL . SITE_ICON; ?>">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        /* Top Bar */
        .top-bar {
            background: #FF8C3E;
            color: #0a0a0a;
            padding: 8px 0;
            font-size: 12px;
        }
        
        .top-bar .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .top-bar-left span {
            margin-right: 20px;
        }
        
        .top-bar-left i {
            color: #0a0a0a;
            margin-right: 5px;
        }
        
        .top-bar-right a {
            color: #0a0a0a;
            text-decoration: none;
            margin-left: 20px;
            transition: color 0.3s;
        }
        
        .top-bar-right a:hover {
            color: #ffffff;
        }
        
        /* Main Navbar - Premium Design */
        .navbar-main {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            border-bottom: 1px solid rgba(255,140,62,0.2);
        }
        
        .navbar-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 80px;
        }
        
        /* Logo */
        .navbar-logo a {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
        .navbar-logo img {
            height: 50px;
            width: auto;
            transition: transform 0.3s;
        }
        
        .navbar-logo img:hover {
            transform: scale(1.02);
        }
        
        /* Navigation Menu */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 8px;
            list-style: none;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-link {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            padding: 10px 18px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 40px;
            position: relative;
        }
        
        .nav-link i {
            font-size: 14px;
            color: #FF8C3E;
        }
        
        /* Underline Hover Effect */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: #FF8C3E;
            transition: all 0.3s ease;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        
        .nav-link:hover::after {
            width: 70%;
        }
        
        .nav-link.active::after {
            width: 70%;
            background: #FF8C3E;
        }
        
        .nav-link:hover {
            color: #FF8C3E;
            background: rgba(255,140,62,0.08);
        }
        
        .nav-link.active {
            color: #FF8C3E;
            background: rgba(255,140,62,0.1);
        }
        
        /* Dropdown Menu */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: #1a1a1a;
            min-width: 240px;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s;
            z-index: 100;
            list-style: none;
            padding: 10px 0;
            border: 1px solid rgba(255,140,62,0.2);
        }
        
        .nav-item.dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .dropdown-menu li a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            color: #ccc;
            text-decoration: none;
            font-size: 13px;
            transition: all 0.3s;
        }
        
        .dropdown-menu li a i {
            width: 20px;
            color: #FF8C3E;
        }
        
        .dropdown-menu li a:hover {
            background: rgba(255,140,62,0.1);
            color: #FF8C3E;
            transform: translateX(5px);
        }
        
        .dropdown-menu hr {
            margin: 8px 0;
            border-color: rgba(255,255,255,0.05);
        }
        
        /* User Actions */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .btn-nav {
            padding: 8px 22px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-login {
            background: transparent;
            color: #FF8C3E;
            border: 1.5px solid #FF8C3E;
        }
        
        .btn-login:hover {
            background: #FF8C3E;
            color: #0a0a0a;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255,140,62,0.3);
        }
        
        .btn-register {
            background: #FF8C3E;
            color: #0a0a0a;
        }
        
        .btn-register:hover {
            background: #e67a22;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255,140,62,0.3);
        }
        
        /* User Dropdown */
        .user-dropdown {
            position: relative;
        }
        
        .user-btn {
            background: rgba(255,140,62,0.15);
            color: #FF8C3E;
            padding: 8px 18px;
            border-radius: 40px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            border: none;
            font-family: inherit;
            transition: all 0.3s;
        }
        
        .user-btn:hover {
            background: rgba(255,140,62,0.25);
            transform: translateY(-2px);
        }
        
        .user-dropdown-content {
            position: absolute;
            top: 100%;
            right: 0;
            background: #1a1a1a;
            min-width: 240px;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s;
            z-index: 100;
            list-style: none;
            padding: 10px 0;
            border: 1px solid rgba(255,140,62,0.2);
        }
        
        .user-dropdown:hover .user-dropdown-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .user-dropdown-content a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            color: #ccc;
            text-decoration: none;
            font-size: 13px;
            transition: all 0.3s;
        }
        
        .user-dropdown-content a i {
            width: 20px;
            color: #FF8C3E;
        }
        
        .user-dropdown-content a:hover {
            background: rgba(255,140,62,0.1);
            color: #FF8C3E;
            transform: translateX(5px);
        }
        
        .user-dropdown-content hr {
            margin: 8px 0;
            border-color: rgba(255,255,255,0.05);
        }
        
        /* Mobile Menu Toggle - Beautiful Animation */
        .mobile-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            width: 45px;
            height: 45px;
            position: relative;
            z-index: 2000;
        }
        
        .mobile-toggle span {
            display: block;
            width: 25px;
            height: 2px;
            background: #FF8C3E;
            margin: 6px auto;
            transition: all 0.3s ease-in-out;
            border-radius: 2px;
        }
        
        .mobile-toggle.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        
        .mobile-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        
        .mobile-toggle.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
        
        /* Mobile Menu Overlay */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
            z-index: 1999;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .mobile-menu-overlay.active {
            display: block;
            opacity: 1;
        }
        
        /* Mobile Menu Panel */
        .mobile-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 85%;
            max-width: 350px;
            height: 100%;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            z-index: 2000;
            transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
            overflow-y: auto;
            box-shadow: -5px 0 30px rgba(0,0,0,0.5);
        }
        
        .mobile-menu.active {
            right: 0;
        }
        
        .mobile-menu-header {
            padding: 25px;
            border-bottom: 1px solid rgba(255,140,62,0.2);
            text-align: center;
        }
        
        .mobile-menu-header img {
            height: 45px;
            width: auto;
        }
        
        .mobile-nav-list {
            list-style: none;
            padding: 20px;
        }
        
        .mobile-nav-list li {
            margin-bottom: 8px;
        }
        
        .mobile-nav-list a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #e0e0e0;
            text-decoration: none;
            font-weight: 500;
            padding: 12px 15px;
            border-radius: 12px;
            transition: all 0.3s;
        }
        
        .mobile-nav-list a i {
            width: 24px;
            color: #FF8C3E;
        }
        
        .mobile-nav-list a:hover {
            background: rgba(255,140,62,0.1);
            color: #FF8C3E;
        }
        
        .mobile-nav-list .mobile-dropdown-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 12px 15px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .mobile-nav-list .mobile-dropdown-toggle:hover {
            background: rgba(255,140,62,0.1);
        }
        
        .mobile-submenu {
            list-style: none;
            padding-left: 40px;
            margin-top: 8px;
            display: none;
        }
        
        .mobile-submenu.show {
            display: block;
        }
        
        .mobile-submenu li {
            margin-bottom: 8px;
        }
        
        .mobile-submenu a {
            font-size: 13px;
            padding: 10px 15px;
        }
        
        .mobile-divider {
            height: 1px;
            background: rgba(255,255,255,0.05);
            margin: 15px 0;
        }
        
        /* Category Badge for count */
        .cat-count {
            background: rgba(255,140,62,0.2);
            color: #FF8C3E;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 20px;
            margin-left: 8px;
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .nav-menu {
                display: none;
            }
            
            .mobile-toggle {
                display: block;
            }
            
            .nav-actions {
                gap: 10px;
            }
            
            .btn-nav {
                padding: 6px 16px;
                font-size: 13px;
            }
        }
        
        @media (max-width: 576px) {
            .navbar-container {
                padding: 0 16px;
                min-height: 65px;
            }
            
            .top-bar .container {
                flex-direction: column;
                text-align: center;
                padding: 0 16px;
            }
            
            .top-bar-left span {
                display: inline-block;
                margin: 0 10px;
            }
            
            .btn-nav {
                padding: 5px 12px;
                font-size: 12px;
            }
            
            .navbar-logo img {
                height: 40px;
            }
            
            .user-btn {
                padding: 6px 12px;
                font-size: 12px;
            }
        }

        /* Mobile Menu - Black Background with White Text */
.mobile-menu {
    background: #0a0a0a;
}

.mobile-menu-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

.mobile-nav-list a {
    color: white;
}

.mobile-nav-list a i {
    color: #FF8C3E;
}

.mobile-nav-list a:hover {
    background: rgba(255,140,62,0.15);
    color: #FF8C3E;
}

.mobile-nav-list .mobile-dropdown-toggle {
    color: white;
}

.mobile-nav-list .mobile-dropdown-toggle i {
    color: #FF8C3E;
}

.mobile-nav-list .mobile-dropdown-toggle:hover {
    background: rgba(255,140,62,0.15);
}

.mobile-submenu a {
    color: rgba(255,255,255,0.8);
}

.mobile-divider {
    background: rgba(255,255,255,0.1);
}

/* Fix logo in mobile menu */
.mobile-menu-header img {
    filter: brightness(0) invert(1);
}
    </style>
</head>
<body>

<!-- Top Bar -->
<div class="top-bar">
    <div class="container">
        <div class="top-bar-left">
            <span><i class="fas fa-phone"></i> +1 (555) 123-4567</span>
            <span><i class="fas fa-envelope"></i> <?php echo INFO_EMAIL; ?></span>
        </div>
        <div class="top-bar-right">
            <a href="<?php echo SITE_URL; ?>/about.php"><i class="fas fa-info-circle"></i> About</a>
            <a href="<?php echo SITE_URL; ?>/contact.php"><i class="fas fa-headset"></i> Support</a>
            <a href="<?php echo SITE_URL; ?>/user/my_bids.php"><i class="fas fa-history"></i> My Bids</a>
        </div>
    </div>
</div>

<!-- Main Navbar -->
<nav class="navbar-main">
    <div class="navbar-container">
        <!-- Logo -->
        <div class="navbar-logo">
            <a href="<?php echo SITE_URL; ?>/index.php">
                <img src="<?php echo SITE_URL; ?>/logo_black_back.jpeg" alt="<?php echo SITE_NAME; ?>">
            </a>
        </div>
        
        <!-- Desktop Navigation Menu -->
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="<?php echo SITE_URL; ?>/index.php" class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>">
                    <i class="fas fa-home"></i> Home
                </a>
            </li>
            <li class="nav-item dropdown">
                <a href="#" class="nav-link">
                    <i class="fas fa-car"></i> Vehicles <i class="fas fa-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="<?php echo SITE_URL; ?>/product/index.php"><i class="fas fa-car-side"></i> All Vehicles</a></li>
                    <li><hr></li>
                    <?php if (count($active_categories) > 0): ?>
                        <?php foreach ($active_categories as $cat): ?>
                            <li>
                                <a href="<?php echo SITE_URL; ?>/product/category.php?id=<?php echo $cat['id']; ?>">
                                    <i class="<?php echo $cat['icon'] ?? 'fas fa-car'; ?>"></i> 
                                    <?php echo htmlspecialchars($cat['name']); ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <li><a href="#"><i class="fas fa-car"></i> No categories available</a></li>
                    <?php endif; ?>
                    <li><hr></li>
                    <li><a href="<?php echo SITE_URL; ?>/product/search.php"><i class="fas fa-search"></i> Advanced Search</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="<?php echo SITE_URL; ?>/blog/index.php" class="nav-link <?php echo strpos($_SERVER['PHP_SELF'], '/blog/') !== false ? 'active' : ''; ?>">
                    <i class="fas fa-blog"></i> Blog
                </a>
            </li>
            <li class="nav-item dropdown">
                <a href="#" class="nav-link">
                    <i class="fas fa-file-alt"></i> Policies <i class="fas fa-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="<?php echo SITE_URL; ?>/privacy.php"><i class="fas fa-shield-alt"></i> Privacy Policy</a></li>
                    <li><a href="<?php echo SITE_URL; ?>/terms.php"><i class="fas fa-file-contract"></i> Terms of Service</a></li>
                    <li><a href="<?php echo SITE_URL; ?>/refund.php"><i class="fas fa-money-bill-wave"></i> Refund Policy</a></li>
                    <li><a href="<?php echo SITE_URL; ?>/auction-policies.php"><i class="fas fa-gavel"></i> Auction Policies</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="<?php echo SITE_URL; ?>/about.php" class="nav-link">
                    <i class="fas fa-info-circle"></i> About
                </a>
            </li>
            <li class="nav-item">
                <a href="<?php echo SITE_URL; ?>/contact.php" class="nav-link">
                    <i class="fas fa-envelope"></i> Contact
                </a>
            </li>
        </ul>
        
        <!-- User Actions -->
        <div class="nav-actions">
            <?php if (isset($_SESSION['user_id'])): ?>
                <div class="user-dropdown">
                    <button class="user-btn">
                        <i class="fas fa-user-circle"></i> <?php echo htmlspecialchars($_SESSION['user_name'] ?? 'Account'); ?>
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="user-dropdown-content">
                        <a href="<?php echo SITE_URL; ?>/user/dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
                        <a href="<?php echo SITE_URL; ?>/user/my_bids.php"><i class="fas fa-gavel"></i> My Bids</a>
                        <a href="<?php echo SITE_URL; ?>/user/profile.php"><i class="fas fa-user-edit"></i> Profile</a>
                        <a href="<?php echo SITE_URL; ?>/user/change_password.php"><i class="fas fa-key"></i> Change Password</a>
                        <hr>
                        <?php if (isset($_SESSION['user_role']) && $_SESSION['user_role'] == 'admin'): ?>
                            <a href="<?php echo SITE_URL; ?>/admin/index.php"><i class="fas fa-lock"></i> Admin Panel</a>
                        <?php endif; ?>
                        <hr>
                        <a href="<?php echo SITE_URL; ?>/user/logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
                    </div>
                </div>
            <?php else: ?>
                <a href="<?php echo SITE_URL; ?>/user/login.php" class="btn-nav btn-login"><i class="fas fa-sign-in-alt"></i> Login</a>
                <a href="<?php echo SITE_URL; ?>/user/register.php" class="btn-nav btn-register"><i class="fas fa-user-plus"></i> Register</a>
            <?php endif; ?>
        </div>
        
        <!-- Animated Mobile Toggle Button -->
        <button class="mobile-toggle" id="mobileToggle">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</nav>

<!-- Mobile Menu Overlay -->
<div class="mobile-menu-overlay" id="mobileOverlay"></div>

<!-- Mobile Menu Panel -->
<div class="mobile-menu" id="mobileMenu">
    <div class="mobile-menu-header">
        
    </div>
    <ul class="mobile-nav-list">
        <li><a href="<?php echo SITE_URL; ?>/index.php"><i class="fas fa-home"></i> Home</a></li>
        <li>
            <div class="mobile-dropdown-toggle" onclick="toggleMobileSubmenu(this)">
                <span><i class="fas fa-car"></i> Vehicles</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <ul class="mobile-submenu">
                <li><a href="<?php echo SITE_URL; ?>/product/index.php">All Vehicles</a></li>
                <?php if (count($active_categories) > 0): ?>
                    <?php foreach ($active_categories as $cat): ?>
                        <li><a href="<?php echo SITE_URL; ?>/product/category.php?id=<?php echo $cat['id']; ?>">
                            <?php echo htmlspecialchars($cat['name']); ?>
                        </a></li>
                    <?php endforeach; ?>
                <?php else: ?>
                    <li><a href="#">No categories available</a></li>
                <?php endif; ?>
                <li><a href="<?php echo SITE_URL; ?>/product/search.php">Advanced Search</a></li>
            </ul>
        </li>
        <li><a href="<?php echo SITE_URL; ?>/blog/index.php"><i class="fas fa-blog"></i> Blog</a></li>
        <li>
            <div class="mobile-dropdown-toggle" onclick="toggleMobileSubmenu(this)">
                <span><i class="fas fa-file-alt"></i> Policies</span>
                <i class="fas fa-chevron-down"></i>
            </div>
            <ul class="mobile-submenu">
                <li><a href="<?php echo SITE_URL; ?>/privacy.php">Privacy Policy</a></li>
                <li><a href="<?php echo SITE_URL; ?>/terms.php">Terms of Service</a></li>
                <li><a href="<?php echo SITE_URL; ?>/refund.php">Refund Policy</a></li>
                <li><a href="<?php echo SITE_URL; ?>/auction-policies.php">Auction Policies</a></li>
            </ul>
        </li>
        <li><a href="<?php echo SITE_URL; ?>/about.php"><i class="fas fa-info-circle"></i> About</a></li>
        <li><a href="<?php echo SITE_URL; ?>/contact.php"><i class="fas fa-envelope"></i> Contact</a></li>
        <div class="mobile-divider"></div>
        <li><a href="<?php echo SITE_URL; ?>/user/my_bids.php"><i class="fas fa-history"></i> My Bids</a></li>
        <?php if (isset($_SESSION['user_id'])): ?>
            <li><a href="<?php echo SITE_URL; ?>/user/dashboard.php"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
            <li><a href="<?php echo SITE_URL; ?>/user/profile.php"><i class="fas fa-user-edit"></i> Profile</a></li>
            <li><a href="<?php echo SITE_URL; ?>/user/change_password.php"><i class="fas fa-key"></i> Change Password</a></li>
            <?php if (isset($_SESSION['user_role']) && $_SESSION['user_role'] == 'admin'): ?>
                <li><a href="<?php echo SITE_URL; ?>/admin/index.php"><i class="fas fa-lock"></i> Admin Panel</a></li>
            <?php endif; ?>
            <li><a href="<?php echo SITE_URL; ?>/user/logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        <?php else: ?>
            <li><a href="<?php echo SITE_URL; ?>/user/login.php"><i class="fas fa-sign-in-alt"></i> Login</a></li>
            <li><a href="<?php echo SITE_URL; ?>/user/register.php"><i class="fas fa-user-plus"></i> Register</a></li>
        <?php endif; ?>
    </ul>
</div>


<main>

<script>
// Mobile Menu Functions
const mobileToggle = document.getElementById('mobileToggle');
const mobileMenu = document.getElementById('mobileMenu');
const mobileOverlay = document.getElementById('mobileOverlay');

function openMobileMenu() {
    mobileMenu.classList.add('active');
    mobileOverlay.classList.add('active');
    document.body.style.overflow = 'hidden';
    mobileToggle.classList.add('active');
}

function closeMobileMenu() {
    mobileMenu.classList.remove('active');
    mobileOverlay.classList.remove('active');
    document.body.style.overflow = '';
    mobileToggle.classList.remove('active');
}

if (mobileToggle) {
    mobileToggle.addEventListener('click', function() {
        if (mobileMenu.classList.contains('active')) {
            closeMobileMenu();
        } else {
            openMobileMenu();
        }
    });
}

if (mobileOverlay) {
    mobileOverlay.addEventListener('click', closeMobileMenu);
}

// Mobile Submenu Toggle
function toggleMobileSubmenu(element) {
    const submenu = element.nextElementSibling;
    const icon = element.querySelector('.fa-chevron-down');
    if (submenu) {
        submenu.classList.toggle('show');
        if (icon) {
            icon.style.transform = submenu.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0deg)';
        }
    }
}

// Close mobile menu on window resize
window.addEventListener('resize', function() {
    if (window.innerWidth > 992) {
        closeMobileMenu();
    }
});

// Active link highlighting
document.querySelectorAll('.nav-link').forEach(link => {
    if (link.href === window.location.href) {
        link.classList.add('active');
    }
});
</script>