document.addEventListener('DOMContentLoaded', () => {
    // Elements
    const shoeDisplay = document.getElementById('shoe-display');
    const colorOptions = document.querySelectorAll('.color-option');
    const shoeModel = document.getElementById('shoe-model');
    const customText = document.getElementById('custom-text');
    const addToCartBtn = document.getElementById('add-to-cart');
    const cartCount = document.querySelector('.cart-count');

    // Current customization
    let currentColor = 'red';
    let currentModel = 'sport';
    let cartItems = 0;

    // Update shoe display based on selections
    function updateShoeDisplay() {
        // In a real app, we would use different images based on model/color
        shoeDisplay.src = `http://static.photos/${currentModel}/640x360/${Math.floor(Math.random() * 10) + 1}`;
        
        // Add custom text if provided
        if (customText.value) {
            // This would be implemented with Canvas or SVG in a real app
            console.log(`Adding text: ${customText.value}`);
        }
    }

    // Color selection
    colorOptions.forEach(option => {
        option.addEventListener('click', () => {
            colorOptions.forEach(opt => opt.classList.remove('selected'));
            option.classList.add('selected');
            currentColor = option.dataset.color;
            updateShoeDisplay();
        });
    });

    // Model selection
    shoeModel.addEventListener('change', () => {
        currentModel = shoeModel.value;
        updateShoeDisplay();
    });

    // Custom text
    customText.addEventListener('input', () => {
        updateShoeDisplay();
    });

    // Add to cart
    addToCartBtn.addEventListener('click', () => {
        cartItems++;
        cartCount.textContent = cartItems;
        
        // Show success message
        alert('Article ajouté au panier!');
        
        // In a real app, we would add to a cart array and update localStorage
        console.log('Added to cart:', {
            model: currentModel,
            color: currentColor,
            customText: customText.value
        });
    });

    // Initialize
    colorOptions[0].classList.add('selected');
    updateShoeDisplay();
});