<!-- Main Header -->
<header class="main-header ">
    <!-- Sticky Main Header -->
    <div class="header-main sticky-top">
        <div class="header-container container-xxl">
            <!-- Logo -->
            <div class="logo">
                <a href="<?php echo esc_url(home_url('/')); ?>">
                    <?php
                    $custom_logo_id = get_theme_mod('custom_logo');
                    $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
                    if ($logo) {
                        echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '">';
                    } else {
                        echo '<h2>' . get_bloginfo('name') . '</h2>';
                    }
                    ?>
                </a>
            </div>

            <!-- Navigation Menu -->
            <nav class="main-nav">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'container' => false,
                    'menu_class' => 'nav-menu',
                    'fallback_cb' => false
                ));
                ?>
                
                <!-- Search Icon - Desktop -->
                <div class="search-icon-wrapper desktop-search">
                    <button class="search-toggle" id="searchToggle">
                        <i class="bi bi-search"></i>
                    </button>
                    <div class="search-dropdown" id="searchDropdown">
                        <form class="search-form" role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
                            <div class="search-input-wrapper">
                                <input type="search" class="search-input" placeholder="What are you looking for?" name="s" id="header-search-input" required>
                                <button type="submit" class="search-submit">
                                    <i class="bi bi-arrow-right"></i>
                                </button>
                            </div>
                        </form>
                        <div class="search-results" id="header-search-results"></div>
                    </div>
                </div>
            </nav>

            <!-- Header Actions -->
            <div class="header-actions">
                <!-- Search Icon - Mobile -->
                <div class="search-icon-wrapper mobile-search">
                    <button class="search-toggle" id="mobileSearchToggle">
                        <i class="bi bi-search"></i>
                    </button>
                    <div class="search-dropdown" id="mobileSearchDropdown">
                        <form class="search-form" role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
                            <div class="search-input-wrapper">
                                <input type="search" class="search-input" placeholder="What are you looking for?" name="s" id="mobile-search-input" required>
                                <button type="submit" class="search-submit">
                                    <i class="bi bi-arrow-right"></i>
                                </button>
                            </div>
                        </form>
                        <div class="search-results" id="mobile-search-results"></div>
                    </div>
                </div>

                <button class="mobile-nav-toggle" id="mobileNavToggle" type="button" aria-label="Open menu" aria-controls="mobileNavMenu" aria-expanded="false">
                    <i class="bi bi-list"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- Mobile Navigation Menu -->
<div class="mobile-nav-menu" id="mobileNavMenu">
    <div class="mobile-nav-header">
        <h3>Menu</h3>
        <button class="mobile-nav-close" id="mobileNavClose">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'container' => false,
        'menu_class' => 'mobile-nav-list',
        'fallback_cb' => false
    ));
    ?>
</div>

<!-- Mobile Navigation Overlay -->
<div class="mobile-nav-overlay" id="mobileNavOverlay"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile Navigation Toggle
    const mobileNavToggle = document.getElementById('mobileNavToggle');
    const mobileNavMenu = document.getElementById('mobileNavMenu');
    const mobileNavClose = document.getElementById('mobileNavClose');
    const mobileNavOverlay = document.getElementById('mobileNavOverlay');
    
    if (mobileNavToggle && mobileNavMenu && mobileNavClose && mobileNavOverlay) {
        mobileNavToggle.addEventListener('click', function() {
            mobileNavMenu.classList.add('active');
            mobileNavOverlay.classList.add('active');
            document.body.style.overflow = 'hidden';
            mobileNavToggle.setAttribute('aria-expanded', 'true');
        });
        
        mobileNavClose.addEventListener('click', function() {
            mobileNavMenu.classList.remove('active');
            mobileNavOverlay.classList.remove('active');
            document.body.style.overflow = '';
            mobileNavToggle.setAttribute('aria-expanded', 'false');
        });
        
        mobileNavOverlay.addEventListener('click', function() {
            mobileNavMenu.classList.remove('active');
            mobileNavOverlay.classList.remove('active');
            document.body.style.overflow = '';
            mobileNavToggle.setAttribute('aria-expanded', 'false');
        });
    }
    
    // Desktop Search Toggle Functionality
    const searchToggle = document.getElementById('searchToggle');
    const searchDropdown = document.getElementById('searchDropdown');
    const searchInput = document.getElementById('header-search-input');
    const searchResults = document.getElementById('header-search-results');
    
    if (searchToggle && searchDropdown) {
        searchToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            searchDropdown.classList.toggle('active');
            if (searchDropdown.classList.contains('active') && searchInput) {
                searchInput.focus();
            }
        });
    }
    
    // Mobile Search Toggle Functionality
    const mobileSearchToggle = document.getElementById('mobileSearchToggle');
    const mobileSearchDropdown = document.getElementById('mobileSearchDropdown');
    const mobileSearchInput = document.getElementById('mobile-search-input');
    const mobileSearchResults = document.getElementById('mobile-search-results');
    
    if (mobileSearchToggle && mobileSearchDropdown) {
        mobileSearchToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            mobileSearchDropdown.classList.toggle('active');
            if (mobileSearchDropdown.classList.contains('active') && mobileSearchInput) {
                mobileSearchInput.focus();
            }
        });
    }
    
    // Close search dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        // Desktop search
        if (searchDropdown && searchToggle && !searchDropdown.contains(e.target) && !searchToggle.contains(e.target)) {
            searchDropdown.classList.remove('active');
        }
        
        // Mobile search
        if (mobileSearchDropdown && mobileSearchToggle && !mobileSearchDropdown.contains(e.target) && !mobileSearchToggle.contains(e.target)) {
            mobileSearchDropdown.classList.remove('active');
        }
    });
    
    // AJAX Live Search Functionality - Desktop
    if (searchInput) {
        searchInput.addEventListener('keyup', function() {
            const query = this.value.trim();
            performLiveSearch(query, searchResults);
        });
    }
    
    // AJAX Live Search Functionality - Mobile
    if (mobileSearchInput) {
        mobileSearchInput.addEventListener('keyup', function() {
            const query = this.value.trim();
            performLiveSearch(query, mobileSearchResults);
        });
    }
    
    // Shared Live Search Function
    function performLiveSearch(query, resultsContainer) {
        if (!resultsContainer) return;
        
        // If empty → clear dropdown and stop
        if (query.length === 0) {
            resultsContainer.innerHTML = '';
            resultsContainer.classList.remove('has-results');
            return;
        }

        // If less than 2 characters → clear dropdown
        if (query.length < 2) {
            resultsContainer.innerHTML = '';
            resultsContainer.classList.remove('has-results');
            return;
        }

        // AJAX request
        fetch('<?php echo admin_url("admin-ajax.php"); ?>?action=live_search&term=' + encodeURIComponent(query))
            .then(response => response.text())
            .then(html => {
                resultsContainer.innerHTML = html;
                if (html.trim() !== '') {
                    resultsContainer.classList.add('has-results');
                } else {
                    resultsContainer.classList.remove('has-results');
                }
            })
            .catch(error => {
                console.error('Search error:', error);
                resultsContainer.innerHTML = '<div class="no-results">Search temporarily unavailable</div>';
                resultsContainer.classList.add('has-results');
            });
    }

    // Close search results when clicking a result
    if (searchResults) {
        searchResults.addEventListener('click', function(e) {
            if (e.target.closest('.search-result-item')) {
                searchDropdown.classList.remove('active');
            }
        });
    }
    
    if (mobileSearchResults) {
        mobileSearchResults.addEventListener('click', function(e) {
            if (e.target.closest('.search-result-item')) {
                mobileSearchDropdown.classList.remove('active');
            }
        });
    }
    
    // Add scroll effect to header
    window.addEventListener('scroll', function() {
        const header = document.querySelector('.main-header');
        if (header) {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        }
    });
    
    // Multi-Level Mobile Accordion Dropdowns
    const mobileMenu = document.getElementById('mobileNavMenu');
    if (mobileMenu) {
        // Remove any custom mobile menu toggling if you want basic WordPress menu
        // Or keep it simple by adding basic toggle functionality
        mobileMenu.addEventListener('click', function (e) {
            const toggleButton = e.target.closest('.mobile-submenu-toggle');
            if (toggleButton) {
                e.preventDefault();
                const parentLi = toggleButton.closest('.menu-item-has-children');
                if (!parentLi) return;
                const submenu = parentLi.querySelector('.sub-menu');
                
                if (submenu) {
                    submenu.classList.toggle('active');
                    const isOpen = submenu.classList.contains('active');
                    toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
                }
            }
        });
    }
});
</script>