/**
 * Navigation Component
 * Dynamically loads the Kelly Green navigation across all pages
 *
 * This eliminates ~38 lines of duplicated HTML from each page.
 * The navigation is identical across all pages, making it ideal for componentization.
 */

(function() {
    const navHTML = `
    <nav class="bg-[#f4f3ef] shadow-lg fixed w-full z-50 top-0">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <a href="index.html">
                            <img src="Website_pics/Logo.png" alt="Kelly Green Logo" class="h-12">
                        </a>
                    </div>
                </div>

                <!-- Desktop Navigation -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-[#0E503F] hover:text-[#4cbb17] px-3 py-2 rounded-md text-[19px] font-normal transition-colors">Home</a>
                    <a href="services.html" class="text-[#0E503F] hover:text-[#4cbb17] px-3 py-2 rounded-md text-[19px] font-normal transition-colors">Services</a>
                    <a href="pricing.html" class="text-[#0E503F] hover:text-[#4cbb17] px-3 py-2 rounded-md text-[19px] font-normal transition-colors">Pricing</a>
                    <a href="about.html" class="text-[#0E503F] hover:text-[#4cbb17] px-3 py-2 rounded-md text-[19px] font-normal transition-colors">About</a>
                </div>

                <!-- Mobile menu button -->
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-btn" class="text-[#0E503F] hover:text-[#4cbb17] focus:outline-none focus:text-[#4cbb17]" aria-expanded="false" aria-controls="mobile-menu" aria-label="Toggle navigation menu">
                        <i class="fas fa-bars text-xl" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Navigation -->
        <div id="mobile-menu" class="md:hidden hidden bg-[#f4f3ef] border-t border-gray-200" role="navigation" aria-label="Mobile navigation">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="index.html" class="text-[#0E503F] hover:text-[#4cbb17] block px-3 py-2 rounded-md text-[21px] font-normal">Home</a>
                <a href="services.html" class="text-[#0E503F] hover:text-[#4cbb17] block px-3 py-2 rounded-md text-[21px] font-normal">Services</a>
                <a href="pricing.html" class="text-[#0E503F] hover:text-[#4cbb17] block px-3 py-2 rounded-md text-[21px] font-normal">Pricing</a>
                <a href="about.html" class="text-[#0E503F] hover:text-[#4cbb17] block px-3 py-2 rounded-md text-[21px] font-normal">About</a>
            </div>
        </div>
    </nav>
    `;

    // Insert navigation as soon as possible
    // With deferred scripts, readyState will be 'interactive' so this runs immediately
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', insertNav);
    } else {
        insertNav();
    }

    function insertNav() {
        const navContainer = document.getElementById('nav-container');
        if (navContainer) {
            navContainer.innerHTML = navHTML;
        }
    }
})();