/* Animated Header JavaScript */

class AnimatedHeader {
    constructor() {
        this.contactItems = [];
        this.currentIndex = 0;
        this.rotationInterval = null;
        this.isSearchOpen = false;
        this.init();
    }

    init() {
        this.setupContactRotation();
        this.setupStickyHeader();
        this.setupSearchToggle();
        this.setupScrollEffects();
    }

    setupContactRotation() {
        const carousel = document.querySelector('.contact-info-carousel');
        if (!carousel) return;

        this.contactItems = carousel.querySelectorAll('.contact-item');
        
        if (this.contactItems.length === 0) return;

        // Show first item initially
        this.contactItems[0].classList.add('active');

        // Start rotation
        this.startRotation();

        // Pause on hover
        carousel.addEventListener('mouseenter', () => this.pauseRotation());
        carousel.addEventListener('mouseleave', () => this.startRotation());
    }

    startRotation() {
        if (this.contactItems.length <= 1) return;
        
        this.rotationInterval = setInterval(() => {
            this.rotateToNext();
        }, 3000); // Change every 3 seconds
    }

    pauseRotation() {
        if (this.rotationInterval) {
            clearInterval(this.rotationInterval);
            this.rotationInterval = null;
        }
    }

    rotateToNext() {
        // Hide current item
        this.contactItems[this.currentIndex].classList.remove('active');
        
        // Move to next item
        this.currentIndex = (this.currentIndex + 1) % this.contactItems.length;
        
        // Show next item with delay for smooth transition
        setTimeout(() => {
            this.contactItems[this.currentIndex].classList.add('active');
        }, 200);
    }

    setupStickyHeader() {
        const header = document.querySelector('.enhanced-header');
        const topBanner = document.querySelector('.top-contact-banner');
        if (!header) return;

        window.addEventListener('scroll', () => {
            const currentScrollY = window.scrollY;
            
            // Add scrolled class for styling effects only
            if (currentScrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }

            // Keep headers fixed in position - no hiding/showing
            header.style.transform = 'translateY(0)';
            if (topBanner) {
                topBanner.style.transform = 'translateY(0)';
            }
        });
    }

    setupSearchToggle() {
        const searchToggle = document.querySelector('.search-toggle');
        const searchBar = document.querySelector('.search-bar');
        const searchInput = document.querySelector('.search-input');
        const searchForm = document.querySelector('.search-form');
        const mobileSearchInput = document.querySelector('#mobileHeaderSearchInput');
        const mobileSearchSubmit = document.querySelector('.search-submit-mobile');

        // Desktop search toggle
        if (searchToggle && searchBar) {
            searchToggle.addEventListener('click', (e) => {
                e.preventDefault();
                this.toggleSearch();
            });
        }

        // Desktop search form submission
        if (searchForm) {
            searchForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const query = searchInput.value.trim();
                if (query) {
                    this.handleSearch(query);
                }
            });
        }

        // Mobile search functionality
        if (mobileSearchInput && mobileSearchSubmit) {
            mobileSearchSubmit.addEventListener('click', (e) => {
                e.preventDefault();
                const query = mobileSearchInput.value.trim();
                if (query) {
                    this.handleSearch(query);
                }
            });

            mobileSearchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const query = mobileSearchInput.value.trim();
                    if (query) {
                        this.handleSearch(query);
                    }
                }
            });
        }

        // Close search with Escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isSearchOpen) {
                this.closeSearch();
            }
        });

        // Close search when clicking outside
        document.addEventListener('click', (e) => {
            if (this.isSearchOpen && 
                searchBar && !searchBar.contains(e.target) && 
                searchToggle && !searchToggle.contains(e.target)) {
                this.closeSearch();
            }
        });
    }

    toggleSearch() {
        if (this.isSearchOpen) {
            this.closeSearch();
        } else {
            this.openSearch();
        }
    }

    openSearch() {
        const searchBar = document.querySelector('.search-bar');
        const searchInput = document.querySelector('.search-input');
        
        if (searchBar) {
            searchBar.classList.add('active');
            document.body.classList.add('search-active', 'search-open');
            this.isSearchOpen = true;
            
            // Focus input after animation
            setTimeout(() => {
                if (searchInput) {
                    searchInput.focus();
                    searchInput.select();
                }
            }, 400);
        }
    }

    closeSearch() {
        const searchBar = document.querySelector('.search-bar');
        
        if (searchBar) {
            searchBar.classList.remove('active');
            document.body.classList.remove('search-active', 'search-open');
            this.isSearchOpen = false;
            
            // Clear search input
            const searchInput = document.querySelector('.search-input');
            if (searchInput) {
                searchInput.blur();
            }
        }
    }

    setupScrollEffects() {
        // Add parallax effect to top banner
        const topBanner = document.querySelector('.top-contact-banner');
        if (!topBanner) return;

        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const rate = scrolled * -0.5;
            topBanner.style.transform = `translateY(${rate}px)`;
        });
    }

    // Method to handle search submission
    handleSearch(query) {
        if (!query.trim()) return;
        
        // Close the search bar if open
        if (this.isSearchOpen) {
            this.closeSearch();
        }
        
        // Redirect to products page with search query
        window.location.href = `/products?search=${encodeURIComponent(query)}`;
    }
}

// Enhanced cart counter animation
function animateCartCount() {
    const cartCount = document.querySelector('.cart-count');
    if (!cartCount) return;

    cartCount.style.transform = 'scale(1.3)';
    cartCount.style.background = '#f7931e';
    
    setTimeout(() => {
        cartCount.style.transform = 'scale(1)';
        cartCount.style.background = '#ff6b35';
    }, 200);
}

// Smooth scroll to sections
function smoothScrollTo(target) {
    const element = document.querySelector(target);
    if (!element) return;

    element.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new AnimatedHeader();
    
    // Setup search form submission
    const searchForm = document.querySelector('.search-form');
    if (searchForm) {
        searchForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const query = e.target.querySelector('.search-input').value;
            // Handle search here
            console.log('Search query:', query);
        });
    }
});

// Export for potential external use
window.AnimatedHeader = AnimatedHeader;