import glob

def fix_about_page():
    with open('about.html', 'r', encoding='utf-8') as f:
        content = f.read()

    # Replace link
    content = content.replace('href="community.html"', 'href="community-history.html"')
    
    # Replace text
    content = content.replace('EXPLORE OUR COMMUNITY', 'EXPLORE THE HISTORY')
    content = content.replace('Explore our community', 'Explore the History')

    with open('about.html', 'w', encoding='utf-8') as f:
        f.write(content)
    print("Fixed about.html button")

def fix_header_all_pages():
    html_files = glob.glob('*.html')
    
    style_injection = """
    <style id="custom-menu-active-styles">
        /* Keep toggle highlighted when mega menu is open and highlight active page */
        .fs-desktop-nav a.active,
        .fs-desktop-nav button.active,
        .fs-desktop-nav button.hover-active {
            color: #e6c888 !important;
            font-weight: 800 !important;
        }
        .fs-desktop-nav button.active::after,
        .fs-desktop-nav button.hover-active::after {
            color: #e6c888 !important;
        }
    </style>
</head>"""

    script_injection = """
<!-- Custom Active Menu Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. Highlight current page
    let currentPath = window.location.pathname.split('/').pop();
    if (!currentPath || currentPath === '') currentPath = 'index.html';
    let navLinks = document.querySelectorAll('.fs-desktop-nav a');
    navLinks.forEach(link => {
        let href = link.getAttribute('href');
        if (href && href === currentPath) {
            link.classList.add('active');
            let megaCol = link.closest('.fs-mega-menu');
            if (megaCol) {
                let menuId = megaCol.id.replace('-mega', '');
                let toggle = document.querySelector(`.fs-mega-toggle[data-menu="${menuId}"]`);
                if (toggle) toggle.classList.add('active');
            }
        }
    });

    // 2. Fix hover active state for dropdowns
    const megaToggles = document.querySelectorAll('.fs-mega-toggle');
    megaToggles.forEach(toggle => {
        const menuId = toggle.getAttribute('data-menu') + '-mega';
        const megaMenu = document.getElementById(menuId);
        if(!megaMenu) return;

        toggle.addEventListener('mouseenter', () => toggle.classList.add('hover-active'));
        megaMenu.addEventListener('mouseenter', () => toggle.classList.add('hover-active'));
        
        toggle.addEventListener('mouseleave', () => {
            setTimeout(() => {
                if(!megaMenu.classList.contains('show')) {
                    toggle.classList.remove('hover-active');
                }
            }, 850);
        });
        megaMenu.addEventListener('mouseleave', () => {
            setTimeout(() => {
                if(!megaMenu.classList.contains('show')) {
                    toggle.classList.remove('hover-active');
                }
            }, 850);
        });
        
        const observer = new MutationObserver(mutations => {
            mutations.forEach(m => {
                if(m.attributeName === 'class') {
                    if(megaMenu.classList.contains('show')) {
                        toggle.classList.add('hover-active');
                    } else {
                        toggle.classList.remove('hover-active');
                    }
                }
            });
        });
        observer.observe(megaMenu, {attributes: true});
    });
});
</script>
</body>"""

    for file_path in html_files:
        with open(file_path, 'r', encoding='utf-8') as f:
            content = f.read()

        changed = False

        if '<style id="custom-menu-active-styles">' not in content:
            content = content.replace('</head>', style_injection)
            changed = True

        if '<!-- Custom Active Menu Script -->' not in content:
            content = content.replace('</body>', script_injection)
            changed = True

        if changed:
            with open(file_path, 'w', encoding='utf-8') as f:
                f.write(content)
            print(f"Injected scripts and styles into {file_path}")

if __name__ == '__main__':
    fix_about_page()
    fix_header_all_pages()