// Shared Navbar Template - Dynamically Injected
(function() {
    'use strict';
    
    // Navbar HTML template
    const navbarHTML = `
        <nav class="main-nav">
            <a href="/" class="nav-link" data-path="/">Home</a>
            <a href="/about" class="nav-link" data-path="/about">About</a>
            <a href="/contact" class="nav-link" data-path="/contact">Contact</a>
        </nav>
    `;
    
    // Function to initialize navbar
    function initNavbar() {
        const navbarContainer = document.querySelector('#app-navbar');
        if (navbarContainer) {
            navbarContainer.innerHTML = navbarHTML;
            setActiveLink();
        }
    }
    
    // Function to set active link based on current URL
    function setActiveLink() {
        const currentPath = window.location.pathname;
        const links = document.querySelectorAll('.nav-link');
        
        links.forEach(link => {
            const linkPath = link.getAttribute('data-path');
            
            // Exact match or sub-path match (for home)
            if (currentPath === linkPath || (linkPath !== '/' && currentPath.startsWith(linkPath))) {
                link.classList.add('active');
            } else if (linkPath === '/' && currentPath === '/index.html') {
                // Handle index.html explicitly
                link.classList.add('active');
            } else {
                link.classList.remove('active');
            }
        });
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initNavbar);
    } else {
        initNavbar();
    }
})();
