script.js

// Global state
let currentSlide = 0;
let cartCount = 0;
let selectedColor = 'Midnight Black';
let selectedSize = 'Medium';

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    // Feather icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    // Carousel
    const track = document.getElementById('carousel-track');
    if (track) {
        const slides = document.querySelectorAll('.carousel-slide');
        const totalSlides = slides.length;

        function updateCarousel() {
            track.style.transform = `translateX(-${currentSlide * 100}%)`;
        
            // Update dots
            document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.classList.add('bg-white');
                    dot.classList.remove('bg-white/50');
            } else {
                dot.classList.remove('bg-white');
                dot.classList.add('bg-white/50');
            }
        });
        }

        function nextSlide() {
            const slides = document.querySelectorAll('.carousel-slide');
            const totalSlides = slides.length;
            currentSlide = (currentSlide + 1) % totalSlides;
            updateCarousel();
        }

        function prevSlide() {
            const slides = document.querySelectorAll('.carousel-slide');
            const totalSlides = slides.length;
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            updateCarousel();
        }

        function goToSlide(index) {
            currentSlide = index;
            updateCarousel();
        }

        // Auto-play
        setInterval(nextSlide, 5000);

        // Expose functions globally
        window.nextSlide = nextSlide;
        window.prevSlide = prevSlide;
        window.goToSlide = goToSlide;
    }

    // Color selector
    window.selectColor = (color, className) => {
        selectedColor = color;
        const el = document.getElementById('selected-color');
        if (el) el.textContent = color;
        
            // Update border colors
            document.querySelectorAll('.color-btn').forEach(btn => {
                btn.classList.remove('border-indigo-600');
                btn.classList.add('border-gray-300');
            });
            event.target.classList.remove('border-gray-300');
            event.target.classList.add('border-indigo-600');
    };

    // Size selector
    window.selectSize = (size) => {
        selectedSize = size;
        
            // Update button styles
            document.querySelectorAll('.size-btn').forEach(btn => {
                btn.classList.remove('border-indigo-600', 'bg-indigo-50');
            btn.classList.add('border-gray-300');
        });
        event.target.classList.remove('border-gray-300');
        event.target.classList.add('border-indigo-600', 'bg-indigo-50');
    };

    // Quantity
    window.increaseQuantity = () => {
        const input = document.getElementById('quantity');
        if (input) input.value = parseInt(input.value) + 1;
    };

    window.decreaseQuantity = () => {
        const input = document.getElementById('quantity');
        if (input && parseInt(input.value) > 1) {
            input.value = parseInt(input.value) - 1;
        }
    };

    // Cart
    window.addToCart = (productName, price) => {
        let quantity = 1;
        const qtyInput = document.getElementById('quantity');
        if (qtyInput) quantity = parseInt(qtyInput.value);
        cartCount += quantity;
        
            // Update cart badge in navbar component
            const badge = document.querySelector('custom-navbar')?.shadowRoot?.querySelector('.cart-badge');
            if (badge) badge.textContent = cartCount;
        
            // Also update in header if present
            const headerBadge = document.getElementById('cart-count');
            if (headerBadge) headerBadge.textContent = cartCount;
        
            // Toast
            showToast(`Added ${quantity} × ${productName || 'item'} to cart!`);
    };

    // Toast
    window.showToast = (message) => {
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.textContent = message;
        document.body.appendChild(toast);
        
            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease-in forwards';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
    };

    // Event listeners for custom components
    document.addEventListener('open-cart', () => {
        // Open cart drawer (simulate)
        showToast('Cart opened!');
    });

    document.addEventListener('open-search', () => {
        // Open search modal
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
            <div class="bg-white p-8 rounded-2xl max-w-2xl w-full mx-4">
                <h3 class="text-2xl font-bold mb-4">Search Products</h3>
                <input type="text" class="w-full border p-4 rounded-lg" placeholder="Type product name...">
            </div>
        );
        document.body.appendChild(modal);
        modal.querySelector('input').focus();
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                document.body.removeChild(modal);
            }
        });
    });

    // Lazy load images
    const lazyImages = document.querySelectorAll('img[data-src]');
    if (lazyImages.length > 0) {
        const imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                img.classList.remove('loading');
                imageObserver.unobserve(img);
            }
        });
        lazyImages.forEach(img => imageObserver.observe(img));
    }
});