<!-- includes/navbar.php -->
<nav id="main-navbar" class="fixed top-0 left-0 right-0 z-50 border-b border-cyan-500/20 backdrop-blur-2xl bg-slate-950/90">

    <!-- Top Status Bar -->
    <div class="bg-gradient-to-r from-purple-950/90 via-slate-950 to-cyan-950/80 border-b border-white/5 py-1 px-6">
        <div style="max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;gap:8px;font-size:11px;" class="font-mono-cyber">
                <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;" class="animate-ping"></span>
                <span style="color:#34d399;font-weight:700;letter-spacing:0.1em;">[STATUS: REGISTRATIONS OPEN NOW]</span>
            </div>
            <div style="display:flex;align-items:center;gap:12px;font-size:11px;" class="font-mono-cyber">
                <span style="color:#a78bfa;font-weight:800;letter-spacing:0.15em;font-family:'Oxanium',sans-serif;">4-5 SEPTEMBER 2026</span>
                <span style="color:#475569;">|</span>
                <span style="color:#94a3b8;">Venue: SOET Building, MGM University</span>
            </div>
        </div>
    </div>

    <!-- Main Navbar Row -->
    <div style="max-width:1600px;margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;justify-content:space-between;">

        <!-- LEFT: MGMU Logo -->
        <div style="flex:1 1 0%;display:flex;justify-content:flex-start;align-items:center;">
            <a href="https://mgmu.ac.in/" target="_blank" rel="noopener noreferrer"
               style="display:flex;align-items:center;transition:opacity 0.2s;"
               onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
                <img
                    src="<?= APP_URL ?>/assets/img/Screenshot%202026-08-14%20134421-Photoroom%201.png"
                    alt="MGM University"
                    style="height:52px;width:auto;object-fit:contain;"
                >
            </a>
        </div>

        <!-- CENTER: Nav Links group -->
        <div id="desktop-center-group" style="display:flex;align-items:center;justify-content:center;">
            <!-- Nav Links -->
            <div id="desktop-nav" style="display:flex;align-items:center;gap:28px;" class="font-mono-cyber">
                <a href="<?= APP_URL ?>/"
                   style="display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:0.12em;transition:color 0.2s;white-space:nowrap;"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#cbd5e1'">
                    <i data-lucide="home" style="width:15px;height:15px;color:#22d3ee;flex-shrink:0;"></i> HOME
                </a>
                <a href="<?= APP_URL ?>/assets/docs/<?= rawurlencode('SUPERNOVA BOOKLET.pdf') ?>"
                   target="_blank" rel="noopener noreferrer"
                   style="display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:0.12em;transition:color 0.2s;white-space:nowrap;"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#cbd5e1'">
                    <i data-lucide="file-text" style="width:15px;height:15px;color:#22d3ee;flex-shrink:0;"></i> ABOUT
                </a>
                <a href="<?= APP_URL ?>/events"
                   style="display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:0.12em;transition:color 0.2s;white-space:nowrap;"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#cbd5e1'">
                    <i data-lucide="calendar" style="width:15px;height:15px;color:#22d3ee;flex-shrink:0;"></i> EVENTS
                </a>
                <a href="<?= APP_URL ?>/#schedule"
                   style="display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:0.12em;transition:color 0.2s;white-space:nowrap;"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#cbd5e1'">
                    <i data-lucide="clock" style="width:15px;height:15px;color:#22d3ee;flex-shrink:0;"></i> TIMELINE
                </a>
                <a href="<?= APP_URL ?>/#committee"
                   style="display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:0.12em;transition:color 0.2s;white-space:nowrap;"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#cbd5e1'">
                    <i data-lucide="users" style="width:15px;height:15px;color:#22d3ee;flex-shrink:0;"></i> COMMITTEE
                </a>
                <a href="<?= APP_URL ?>/gallery.php"
                   style="display:flex;align-items:center;gap:6px;color:#cbd5e1;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:0.12em;transition:color 0.2s;white-space:nowrap;"
                   onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#cbd5e1'">
                    <i data-lucide="image" style="width:15px;height:15px;color:#22d3ee;flex-shrink:0;"></i> GALLERY
                </a>
            </div>
        </div>

        <!-- RIGHT: SOET Logo & Mobile Menu Toggle -->
        <div style="flex:1 1 0%;display:flex;justify-content:flex-end;align-items:center;gap:16px;">
            <a href="https://soet.mgmu.ac.in" target="_blank" rel="noopener noreferrer" id="soet-logo"
               style="display:flex;align-items:center;transition:opacity 0.2s;"
               onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
                <img
                    src="<?= APP_URL ?>/assets/img/School%20of%20Engineering%20and%20Technology.png"
                    alt="School of Engineering and Technology"
                    style="height:40px;width:auto;object-fit:contain;"
                >
            </a>

            <!-- Mobile Hamburger -->
            <button id="mobile-menu-btn"
                    style="display:none;padding:8px;border-radius:10px;background:rgba(15,23,42,0.8);border:1px solid rgba(255,255,255,0.1);color:#cbd5e1;cursor:pointer;">
                <i data-lucide="menu" style="width:20px;height:20px;" id="menu-icon"></i>
                <i data-lucide="x" style="width:20px;height:20px;display:none;" id="close-icon"></i>
            </button>
        </div>
    </div>

    <!-- Mobile Drawer -->
    <div id="mobile-menu" style="display:none;border-top:1px solid rgba(255,255,255,0.08);padding:20px 24px;background:rgba(2,6,23,0.98);" class="font-mono-cyber">
        <a href="<?= APP_URL ?>/" style="display:flex;align-items:center;gap:10px;color:#e2e8f0;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:0.12em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
            <i data-lucide="home" style="width:16px;height:16px;color:#22d3ee;"></i> HOME
        </a>
        <a href="<?= APP_URL ?>/assets/docs/<?= rawurlencode('SUPERNOVA BOOKLET.pdf') ?>" target="_blank" rel="noopener noreferrer" style="display:flex;align-items:center;gap:10px;color:#e2e8f0;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:0.12em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
            <i data-lucide="file-text" style="width:16px;height:16px;color:#22d3ee;"></i> ABOUT
        </a>
        <a href="<?= APP_URL ?>/events" style="display:flex;align-items:center;gap:10px;color:#e2e8f0;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:0.12em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
            <i data-lucide="calendar" style="width:16px;height:16px;color:#22d3ee;"></i> EVENTS
        </a>
        <a href="<?= APP_URL ?>/#schedule" style="display:flex;align-items:center;gap:10px;color:#e2e8f0;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:0.12em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
            <i data-lucide="clock" style="width:16px;height:16px;color:#22d3ee;"></i> TIMELINE
        </a>
        <a href="<?= APP_URL ?>/#committee" style="display:flex;align-items:center;gap:10px;color:#e2e8f0;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:0.12em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);">
            <i data-lucide="users" style="width:16px;height:16px;color:#22d3ee;"></i> COMMITTEE
        </a>
        <a href="<?= APP_URL ?>/gallery.php" style="display:flex;align-items:center;gap:10px;color:#e2e8f0;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:0.12em;padding:10px 0;">
            <i data-lucide="image" style="width:16px;height:16px;color:#22d3ee;"></i> GALLERY
        </a>
    </div>
</nav>

<script>
(function() {
    function handleResize() {
        var desktopNav    = document.getElementById('desktop-nav');
        var soetLogo      = document.getElementById('soet-logo');
        var mobileBtn     = document.getElementById('mobile-menu-btn');
        var mobileMenu    = document.getElementById('mobile-menu');
        var centerGroup   = document.getElementById('desktop-center-group');

        if (window.innerWidth >= 1200) {
            // Desktop: show nav + soet, hide hamburger
            desktopNav.style.display  = 'flex';
            soetLogo.style.display    = 'flex';
            mobileBtn.style.display   = 'none';
            mobileMenu.style.display  = 'none';
            centerGroup.style.justifyContent = 'center';
        } else {
            // Mobile: hide nav + soet, show hamburger
            desktopNav.style.display  = 'none';
            soetLogo.style.display    = 'none';
            mobileBtn.style.display   = 'flex';
            centerGroup.style.justifyContent = 'flex-end';
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        handleResize();
        window.addEventListener('resize', handleResize);

        var btn       = document.getElementById('mobile-menu-btn');
        var menu      = document.getElementById('mobile-menu');
        var menuIcon  = document.getElementById('menu-icon');
        var closeIcon = document.getElementById('close-icon');

        btn.addEventListener('click', function() {
            var isOpen = menu.style.display === 'block';
            menu.style.display  = isOpen ? 'none' : 'block';
            menuIcon.style.display  = isOpen ? 'block' : 'none';
            closeIcon.style.display = isOpen ? 'none' : 'block';
        });
    });
})();
</script>

<main id="page-content">

