// Shared header loader + mobile menu + active-link highlighter
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('site-header');
    if (!container) return;

    // Load the shared header/menu fragment
    fetch('menu.html')   // RELATIVE path so it works locally and on S3/CloudFront
        .then(response => response.text())
        .then(html => {
            container.innerHTML = html;

            // ---- Mobile menu wiring ----
            const btn  = document.getElementById('mobile-menu-btn');
            const menu = document.getElementById('mobile-menu');

            if (btn && menu) {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const isOpen = menu.classList.toggle('open');
                    btn.textContent = isOpen ? 'Close' : 'Menu';
                    btn.setAttribute('aria-expanded', isOpen);
                });

                // Close on outside click
                document.addEventListener('click', () => {
                    if (menu.classList.contains('open')) {
                        menu.classList.remove('open');
                        btn.textContent = 'Menu';
                        btn.setAttribute('aria-expanded', 'false');
                    }
                });

                // Don’t close when clicking inside the menu
                menu.addEventListener('click', e => e.stopPropagation());

                // Close when clicking a link
                menu.querySelectorAll('a').forEach(a => {
                    a.addEventListener('click', () => {
                        menu.classList.remove('open');
                        btn.textContent = 'Menu';
                        btn.setAttribute('aria-expanded', 'false');
                    });
                });
            }

            // ---- Active link highlighting ----
            const path = window.location.pathname.toLowerCase();
            const links = container.querySelectorAll('.main-nav a, #mobile-menu a');

            links.forEach(link => {
                const href = link.getAttribute('href');
                if (!href || href.startsWith('http')) return; // skip external links

                const url = new URL(href, window.location.origin);
                const hrefPath = url.pathname.toLowerCase();

                // Highlight pages with direct matches (rentals, news, faq, contact, etc.)
                if (path === hrefPath) {
                    link.classList.add('active');
                }

                // Treat root as index.html
                if ((path === '/' || path === '/index.html') && hrefPath.endsWith('/index.html')) {
                    // No Home item to mark
                }

                // Section 8 landing page highlights the Section 8 nav item
                if (path.endsWith('/section8-property-management-houston.html') &&
                    href.toLowerCase().includes('index.html#section8')) {
                    link.classList.add('active');
                }
            });
        })
        .catch(err => {
            console.error('Error loading shared menu.html:', err);
        });
});