<!-- Skip to content link for accessibility -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-black focus:text-white focus:px-4 focus:py-2 focus:rounded-lg">
    Skip to main content
</a>

<header id="main-header" class="bg-white/80 backdrop-blur-sm shadow-sm sticky top-0 z-50 border-b border-[#d1d5db] transition-transform duration-300 ease-in-out">
    <nav class="container mx-auto px-4 py-3 md:py-5">
        <div class="flex items-center justify-between">
            <a href="{{ route('home') }}" class="flex items-center">
                <img id="logo-image" src="{{ asset('logos/logo1.png') }}" alt="Memorycloset Media" class="w-[200px] h-[200px] object-contain transition-opacity duration-500" style="display: none;">
                <span id="logo-text-fallback" class="sr-only">Memorycloset Media</span>
            </a>
            
            <!-- Desktop Navigation -->
            <div class="hidden md:flex items-center space-x-6 lg:space-x-8">
                <a href="{{ route('home') }}" class="text-black hover:text-black transition-colors font-medium">Home</a>
                <a href="{{ route('products.index') }}" class="text-black hover:text-black transition-colors font-medium">Products</a>
                <a href="{{ route('products.sale') }}" class="text-black hover:text-[#1a1a1a] transition-colors font-medium font-semibold">Sale</a>
                <a href="{{ route('categories.index') }}" class="text-black hover:text-black transition-colors font-medium">Categories</a>
                <a href="{{ route('about') }}" class="text-black hover:text-black transition-colors font-medium">About</a>
                <a href="{{ route('services') }}" class="text-black hover:text-black transition-colors font-medium">Services</a>
                <a href="{{ route('contact') }}" class="text-black hover:text-black transition-colors font-medium">Contact</a>
                <a href="{{ route('cart.index') }}" class="relative text-black hover:text-black transition-colors font-medium flex items-center gap-1">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    <span id="cart-count" class="absolute -top-2 -right-2 bg-black text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center hidden">0</span>
                    <span class="hidden lg:inline">Cart</span>
                </a>
            </div>
            
            <!-- Mobile Menu Button -->
            <button id="mobile-menu-toggle" class="md:hidden p-2 text-black hover:text-black focus:outline-none focus:ring-2 focus:ring-black rounded-lg transition-colors" aria-label="Toggle menu" aria-expanded="false">
                <svg id="menu-open-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
                <svg id="menu-close-icon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    </nav>
</header>

<!-- Mobile Menu Overlay -->
<div id="mobile-menu-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-[100] hidden md:hidden transition-opacity duration-300"></div>

<!-- Mobile Menu -->
<div id="mobile-menu" class="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-gradient-to-b from-white to-[#f3f4f6] z-[110] shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out md:hidden overflow-hidden">
    <div class="h-full flex flex-col">
        <!-- Menu Header -->
        <div class="flex items-center justify-between p-6 border-b-2 border-[#e6d5b8] bg-gradient-to-r from-black to-[#1a1a1a] flex-shrink-0">
            <div class="flex items-center gap-3">
                <img src="{{ asset('logos/logo1.png') }}" alt="Memorycloset Media" class="w-10 h-10 object-contain">
                <h2 class="text-lg font-serif font-bold text-white">Menu</h2>
            </div>
            <button id="mobile-menu-close" class="p-2 text-white hover:text-[#e6d5b8] hover:bg-white/10 rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-[#e6d5b8] focus:ring-offset-2 focus:ring-offset-black" aria-label="Close menu">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        
        <!-- Menu Navigation Links -->
        <nav class="flex-1 overflow-y-auto p-6 bg-gradient-to-b from-white to-[#f3f4f6]">
            <div class="space-y-3">
                <a href="{{ route('home') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                    <span>Home</span>
                </a>
                <a href="{{ route('products.index') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                    </svg>
                    <span>Products</span>
                </a>
                <a href="{{ route('products.sale') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-white bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 rounded-xl transition-all duration-300 font-semibold text-base shadow-lg hover:shadow-xl transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                    <span class="flex-1">Sale</span>
                    <span class="inline-block text-xs bg-white text-red-600 rounded-full px-3 py-1 font-bold animate-pulse">HOT</span>
                </a>
                <a href="{{ route('categories.index') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                    </svg>
                    <span>Categories</span>
                </a>
                <a href="{{ route('about') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>About</span>
                </a>
                <a href="{{ route('services') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3h14a2 2 0 012 2v3H3V5a2 2 0 012-2zm-2 8h18v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8zm4 4h4v4H7v-4zm6 0h4v4h-4v-4z"></path>
                    </svg>
                    <span>Services</span>
                </a>
                <a href="{{ route('contact') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02]">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                    <span>Contact</span>
                </a>
                <a href="{{ route('cart.index') }}" class="mobile-menu-link group flex items-center gap-4 px-5 py-4 text-black hover:bg-black hover:text-white rounded-xl transition-all duration-300 font-medium text-base shadow-sm hover:shadow-lg transform hover:scale-[1.02] relative">
                    <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    <span class="flex-1">Cart</span>
                    <span id="mobile-cart-count" class="bg-black text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center group-hover:bg-white group-hover:text-black transition-colors">0</span>
                </a>
            </div>
        </nav>
    </div>
</div>

<script>
(function() {
    'use strict';
    
    // Get elements
    const menuToggle = document.getElementById('mobile-menu-toggle');
    const menuClose = document.getElementById('mobile-menu-close');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuOverlay = document.getElementById('mobile-menu-overlay');
    const menuOpenIcon = document.getElementById('menu-open-icon');
    const menuCloseIcon = document.getElementById('menu-close-icon');
    const menuLinks = document.querySelectorAll('.mobile-menu-link');
    
    // Open menu function
    function openMenu() {
        if (mobileMenu) {
            mobileMenu.classList.remove('translate-x-full');
            mobileMenu.style.transform = 'translateX(0)';
        }
        if (menuOverlay) {
            menuOverlay.classList.remove('hidden');
            menuOverlay.style.display = 'block';
        }
        if (menuToggle) {
            menuToggle.setAttribute('aria-expanded', 'true');
        }
        if (menuOpenIcon) {
            menuOpenIcon.classList.add('hidden');
        }
        if (menuCloseIcon) {
            menuCloseIcon.classList.remove('hidden');
        }
        document.body.style.overflow = 'hidden';
    }
    
    // Close menu function
    function closeMenu() {
        if (mobileMenu) {
            mobileMenu.classList.add('translate-x-full');
            mobileMenu.style.transform = 'translateX(100%)';
        }
        if (menuOverlay) {
            menuOverlay.classList.add('hidden');
            menuOverlay.style.display = 'none';
        }
        if (menuToggle) {
            menuToggle.setAttribute('aria-expanded', 'false');
        }
        if (menuOpenIcon) {
            menuOpenIcon.classList.remove('hidden');
        }
        if (menuCloseIcon) {
            menuCloseIcon.classList.add('hidden');
        }
        document.body.style.overflow = '';
    }
    
    // Initialize when DOM is ready
    function init() {
        // Toggle button click
        if (menuToggle) {
            menuToggle.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const isOpen = this.getAttribute('aria-expanded') === 'true';
                if (isOpen) {
                    closeMenu();
                } else {
                    openMenu();
                }
            });
        }
        
        // Close button click
        if (menuClose) {
            menuClose.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                closeMenu();
            });
        }
        
        // Overlay click
        if (menuOverlay) {
            menuOverlay.addEventListener('click', function(e) {
                e.preventDefault();
                closeMenu();
            });
        }
        
        // Close on link click
        menuLinks.forEach(function(link) {
            link.addEventListener('click', function() {
                closeMenu();
            });
        });
        
        // Close on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' || e.keyCode === 27) {
                if (mobileMenu && !mobileMenu.classList.contains('translate-x-full')) {
                    closeMenu();
                }
            }
        });
        
        // Close menu on window resize to desktop size
        window.addEventListener('resize', function() {
            if (window.innerWidth >= 768) { // md breakpoint
                if (mobileMenu && !mobileMenu.classList.contains('translate-x-full')) {
                    closeMenu();
                }
            }
        });
    }
    
    // Run initialization
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    // Close menu on scroll down
    let lastScrollTop = 0;
    let scrollTimeout = null;
    
    window.addEventListener('scroll', function() {
        const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        // Clear any existing timeout
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        
        // If scrolling down and menu is open, close it
        if (currentScrollTop > lastScrollTop && currentScrollTop > 50) {
            // Scrolling down
            if (mobileMenu && !mobileMenu.classList.contains('translate-x-full')) {
                closeMenu();
            }
        }
        
        lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
    }, false);
})();

// Header Hide/Show on Scroll
(function() {
    'use strict';
    
    const header = document.getElementById('main-header');
    if (!header) return;
    
    let lastScrollY = window.scrollY;
    let ticking = false;
    
    function updateHeader() {
        const currentScrollY = window.scrollY;
        
        // Only hide/show if scrolled past a threshold (e.g., 100px)
        if (currentScrollY > 100) {
            if (currentScrollY > lastScrollY) {
                // Scrolling down - hide header
                header.style.transform = 'translateY(-100%)';
            } else {
                // Scrolling up - show header
                header.style.transform = 'translateY(0)';
            }
        } else {
            // At top of page - always show header
            header.style.transform = 'translateY(0)';
        }
        
        lastScrollY = currentScrollY;
        ticking = false;
    }
    
    function onScroll() {
        if (!ticking) {
            window.requestAnimationFrame(updateHeader);
            ticking = true;
        }
    }
    
    window.addEventListener('scroll', onScroll, { passive: true });
})();

// Logo Alternating Script
(function() {
    'use strict';
    
    const logoImage = document.getElementById('logo-image');
    const logoTextFallback = document.getElementById('logo-text-fallback');
    
    if (!logoImage || !logoTextFallback) return;
    
    // Logo paths - try PNG first, then other formats as fallback
    const logos = [
        '{{ asset("logos/logo1.png") }}',
        '{{ asset("logos/logo2.png") }}'
    ];
    
    // Also try other formats as fallback
    const extensions = ['jpg', 'jpeg', 'svg', 'webp'];
    extensions.forEach(ext => {
        logos.push('{{ asset("logos/logo1.") }}' + ext);
        logos.push('{{ asset("logos/logo2.") }}' + ext);
    });
    
    let currentLogoIndex = 0;
    let foundLogos = [];
    
    // Check if logo exists
    function checkLogoExists(src, callback) {
        const img = new Image();
        img.onload = function() { callback(true); };
        img.onerror = function() { callback(false); };
        img.src = src;
    }
    
    // Find available logos
    function findAvailableLogos(callback) {
        let checked = 0;
        const available = [];
        const logoNumbers = new Set();
        
        logos.forEach(function(logoPath, index) {
            checkLogoExists(logoPath, function(exists) {
                checked++;
                if (exists) {
                    // Determine logo number (1 or 2)
                    const logoNum = (index % 2 === 0) ? 1 : 2;
                    if (!logoNumbers.has(logoNum)) {
                        logoNumbers.add(logoNum);
                        available.push(logoPath);
                    }
                }
                
                if (checked === logos.length) {
                    // Sort to ensure logo1 comes before logo2
                    available.sort((a, b) => {
                        const numA = a.includes('logo1') ? 1 : 2;
                        const numB = b.includes('logo1') ? 1 : 2;
                        return numA - numB;
                    });
                    callback(available);
                }
            });
        });
    }
    
    // Initialize logo
    function initLogo() {
        findAvailableLogos(function(availableLogos) {
            if (availableLogos.length > 0) {
                logoImage.src = availableLogos[0];
                logoImage.style.display = 'block';
                logoTextFallback.style.display = 'none';
                foundLogos = availableLogos;
                
                if (availableLogos.length > 1) {
                    startAlternating();
                }
            } else {
                // No logos found, show text fallback
                logoImage.style.display = 'none';
                logoTextFallback.style.display = 'block';
            }
        });
    }
    
    // Start alternating logos
    function startAlternating() {
        if (foundLogos.length < 2) return;
        
        setInterval(function() {
            currentLogoIndex = (currentLogoIndex + 1) % foundLogos.length;
            logoImage.style.opacity = '0';
            
            setTimeout(function() {
                logoImage.src = foundLogos[currentLogoIndex];
                logoImage.style.opacity = '1';
            }, 250); // Half of transition duration for smooth fade
        }, 5000); // Change logo every 5 seconds
    }
    
    // Run on page load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initLogo);
    } else {
        initLogo();
    }
})();
</script>
