script.js

// Main JavaScript for CurlCraft Studio

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

    // Mobile menu toggle for navbar component
    document.addEventListener('click', function(event) {
        if (event.target.closest('[data-menu-toggle]')) {
            const navbar = document.querySelector('custom-navbar');
            if (navbar) {
                const shadowRoot = navbar.shadowRoot;
                const mobileMenu = shadowRoot.querySelector('#mobile-menu');
                if (mobileMenu) {
                    mobileMenu.classList.toggle('hidden');
                }
            }
        }
    });

    // Hairstyle filter functionality
    const filterButtons = document.querySelectorAll('[data-filter]');
    const hairstyleCards = document.querySelectorAll('hairstyle-card');

    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.getAttribute('data-filter');
            
            // Update active button
            filterButtons.forEach(btn => {
                btn.classList.remove('bg-purple-600', 'text-white');
                btn.classList.add('bg-gray-200', 'text-gray-700');
            });
            this.classList.remove('bg-gray-200', 'text-gray-700');
            this.classList.add('bg-purple-600', 'text-white');

            // Filter cards
            hairstyleCards.forEach(card => {
                const category = card.getAttribute('data-category');
                if (filter === 'all' || category === filter) {
                    card.style.display = 'block';
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 10);
                } else {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        card.style.display = 'none';
                    }, 300);
                }
            });
        });
    });

    // Load hairstyles from API
    async function loadHairstyles() {
        try {
            // Using a public API for demonstration
            const response = await fetch('https://api.unsplash.com/search/photos?query=hairstyle&per_page=12&client_id=YOUR_UNSPLASH_ACCESS_KEY');
            const data = await response.json();
            
            // In a real implementation, you would update the hairstyle cards with actual data
            console.log('Hairstyles loaded:', data);
            
            // Update trending section if it exists
            const trendingSection = document.querySelector('custom-trending-section');
            if (trendingSection && data.results) {
                // You can implement actual data binding here
            }
        } catch (error) {
            console.log('Using placeholder data due to API limit');
            // Fallback to placeholder images
        }
    }

    // Load hairstyles on page load
    loadHairstyles();

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Newsletter form handling
    const newsletterForms = document.querySelectorAll('form[data-newsletter]');
    newsletterForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const email = this.querySelector('input[type="email"]').value;
            
            if (email && email.includes('@')) {
                // Simulate API call
                setTimeout(() => {
                    alert(`Thank you for subscribing with ${email}! You'll receive style inspiration weekly.`);
                    this.reset();
                }, 300);
            } else {
                alert('Please enter a valid email address.');
            }
        });
    });
});