script.js

document.addEventListener('DOMContentLoaded', () => {
    // Initialize AI assistant
    const aiAssistant = document.querySelector('custom-ai-assistant');
    
    // Simulate AI loading recommendations
    setTimeout(() => {
        const loader = document.querySelector('.ai-loader');
        if (loader) {
            loader.innerHTML = '<span class="text-green-600">Recommendations ready!</span>';
        }
    }, 3000);
    
    // Add hover effects to product cards
    const productCards = document.querySelectorAll('custom-product-card');
    productCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            gsap.to(card, { 
                y: -5, 
                duration: 0.3, 
                boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
                ease: "power2.out" 
            });
        });
        
        card.addEventListener('mouseleave', () => {
            gsap.to(card, { 
                y: 0, 
                duration: 0.3, 
                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                ease: "power2.out" 
            });
        });
    });
    
    // Animate category cards on scroll
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                gsap.from(entry.target, {
                    duration: 0.6,
                    opacity: 0,
                    y: 20,
                    ease: "back.out(1.7)",
                    delay: 0.1 * Array.from(entry.target.parentNode.children).indexOf(entry.target)
                });
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    document.querySelectorAll('.category-card').forEach(card => {
        observer.observe(card);
    });
});