// scroll-header.js
document.addEventListener("DOMContentLoaded", function() {
    const topBanner = document.querySelector('.top-banner');
    const slideMenu = document.querySelector('.slide-menu');
    
    if (!topBanner) return;
    
    // Scroll threshold to trigger the shrink effect
    const scrollThreshold = 50;
    let isScrolled = false;
    let isTransitioning = false;
    let lastScrollY = 0;
    let scrollDirection = 'down';
    
    function updateHeaderState(scrolled) {
        if (isTransitioning) return;
        
        if (scrolled && !isScrolled) {
            isTransitioning = true;
            topBanner.classList.add('scrolled');
            isScrolled = true;
            
            if (slideMenu) {
                slideMenu.style.top = '80px';
            }
            
            // Reset transition flag after animation completes
            setTimeout(() => {
                isTransitioning = false;
            }, 250);
            
        } else if (!scrolled && isScrolled) {
            isTransitioning = true;
            topBanner.classList.remove('scrolled');
            isScrolled = false;
            
            if (slideMenu) {
                slideMenu.style.top = '110px';
            }
            
            // Reset transition flag after animation completes
            setTimeout(() => {
                isTransitioning = false;
            }, 250);
        }
    }
    
    function handleScroll() {
        const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
        
        // Detect scroll direction
        if (currentScrollY > lastScrollY) {
            scrollDirection = 'down';
        } else if (currentScrollY < lastScrollY) {
            scrollDirection = 'up';
        }
        
        // Only update when crossing threshold in the right direction
        if (scrollDirection === 'down' && currentScrollY > scrollThreshold && !isScrolled) {
            updateHeaderState(true);
        } else if (scrollDirection === 'up' && currentScrollY <= scrollThreshold && isScrolled) {
            updateHeaderState(false);
        }
        
        lastScrollY = currentScrollY;
    }
    
    // Use requestAnimationFrame for smooth scroll handling
    let ticking = false;
    function requestTick() {
        if (!ticking) {
            requestAnimationFrame(handleScroll);
            ticking = true;
            setTimeout(() => { ticking = false; }, 16); // ~60fps
        }
    }
    
    // Optimized scroll event listener
    window.addEventListener('scroll', requestTick, { passive: true, capture: false });
    
    // Initial check
    handleScroll();
});