(function() {
    const antiFlashCSS = document.createElement('style');
    antiFlashCSS.textContent = `
        .bf-loading .megamenu-halo {
            opacity: 0 !important;
            visibility: hidden !important;
        }
    `;
    document.head.appendChild(antiFlashCSS);
    document.documentElement.classList.add('bf-loading');
})();

document.addEventListener('DOMContentLoaded', function() {
    const CONFIG = {
        triggerAttribute: 'trigger-halo',
        menuClass: 'megamenu-halo',
        textColor: '#2D2420',
        accentColor: 'rgba(196, 102, 58, 0.2)'
    };

    const style = document.createElement('style');
    style.textContent = `
        .${CONFIG.menuClass} {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            clip-path: inset(0 0 100% 0);
            transform: translateY(-3px);
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 9999;
            transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        transform 0.55s cubic-bezier(0.19, 1, 0.22, 1),
                        visibility 0s linear 0.55s;
            will-change: opacity, clip-path, transform;
        }

        .${CONFIG.menuClass}.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            clip-path: inset(0 0 0% 0);
            transform: translateY(0);
            transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .${CONFIG.menuClass} > * {
            opacity: 0;
            transform: translateY(-6px);
            transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.12s, 
                        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.12s;
            will-change: opacity, transform;
        }

        .${CONFIG.menuClass}.active > * {
            opacity: 1;
            transform: translateY(0);
        }

        [${CONFIG.triggerAttribute}] {
            transition: background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), 
                        box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1),
                        border-radius 0.25s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            z-index: 1;
            cursor: pointer;
            will-change: background-color, box-shadow, border-radius;
        }

        [${CONFIG.triggerAttribute}].active-trigger {
            background-color: ${CONFIG.accentColor};
            border-radius: 6px;
            padding: 6px 10px;
            margin: -6px -10px;
            z-index: 1000;
        }

        [${CONFIG.triggerAttribute}].active-trigger,
        [${CONFIG.triggerAttribute}].active-trigger * {
            color: ${CONFIG.textColor} !important;
        }

        .${CONFIG.menuClass}.instant-close,
        .${CONFIG.menuClass}.instant-close > * {
            transition: none !important;
        }
    `;
    document.head.appendChild(style);

    const menuTriggers = document.querySelectorAll(`[${CONFIG.triggerAttribute}]`);
    const menus = document.querySelectorAll(`.${CONFIG.menuClass}`);
    const animatingMenus = new Set();

    menus.forEach(menu => {
        menu.classList.remove('active');
        const parent = menu.parentElement;
        if (parent && getComputedStyle(parent).position === 'static') {
            parent.style.position = 'relative';
        }
    });

    document.documentElement.classList.remove('bf-loading');

    function updateTriggerState(targetId, isActive) {
        menuTriggers.forEach(trigger => {
            const triggerId = trigger.getAttribute(CONFIG.triggerAttribute);
            if (triggerId === targetId) {
                if (isActive) {
                    trigger.style.zIndex = '1000';
                    trigger.classList.add('active-trigger');
                } else {
                    trigger.classList.remove('active-trigger');
                    setTimeout(() => {
                        if (!trigger.classList.contains('active-trigger')) {
                            trigger.style.zIndex = '1';
                        }
                    }, 300);
                }
            }
        });
    }

    function handleMenuTransition(menu, isClosing, instantClose = false) {
        const menuId = menu.id;
        if (animatingMenus.has(menuId)) return;
        animatingMenus.add(menuId);

        if (instantClose) {
            menu.classList.add('instant-close');
            menu.classList.remove('active');
            updateTriggerState(menuId, false);
            setTimeout(() => {
                menu.classList.remove('instant-close');
                animatingMenus.delete(menuId);
            }, 50);
            return;
        }

        if (isClosing) {
            menu.classList.remove('active');
            updateTriggerState(menuId, false);
            setTimeout(() => animatingMenus.delete(menuId), 550);
        } else {
            menu.classList.add('active');
            updateTriggerState(menuId, true);
            setTimeout(() => animatingMenus.delete(menuId), 50);
        }
    }

    function closeAllMenus(exceptMenuId = null) {
        menus.forEach(menu => {
            if (menu.id !== exceptMenuId && menu.classList.contains('active')) {
                handleMenuTransition(menu, true, !!exceptMenuId);
            }
        });
    }

    menuTriggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const targetId = this.getAttribute(CONFIG.triggerAttribute);
            const targetMenu = document.getElementById(targetId);
            if (!targetMenu || animatingMenus.has(targetId)) return;

            if (targetMenu.classList.contains('active')) {
                handleMenuTransition(targetMenu, true);
                return;
            }

            closeAllMenus(targetId);
            handleMenuTransition(targetMenu, false);
        });
    });

    document.addEventListener('click', function(e) {
        const isClickInsideMenu = Array.from(menus).some(menu => menu.contains(e.target));
        const isClickOnTrigger = Array.from(menuTriggers).some(trigger => trigger.contains(e.target));
        if (!isClickInsideMenu && !isClickOnTrigger) closeAllMenus();
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeAllMenus();
    });
});