script.js

document.addEventListener('DOMContentLoaded', () => {
    // Sample player functionality
    const samplePlayers = document.querySelectorAll('.sample-player');
    
    samplePlayers.forEach(player => {
        player.addEventListener('click', function() {
            const audio = this.querySelector('audio');
            if (audio) {
                if (audio.paused) {
                    // Pause all other samples
                    document.querySelectorAll('audio').forEach(a => {
                        if (a !== audio) a.pause();
                    });
                    audio.currentTime = 0;
                    audio.play();
                    this.classList.add('playing');
                } else {
                    audio.pause();
                    this.classList.remove('playing');
                }
            }
        });
    });

    // Update audio elements when they end
    document.querySelectorAll('audio').forEach(audio => {
        audio.addEventListener('ended', function() {
            const player = this.closest('.sample-player');
            if (player) player.classList.remove('playing');
        });
    });
    // Shopping cart functionality
    const cartButtons = document.querySelectorAll('.add-to-cart');
    
    cartButtons.forEach(button => {
        button.addEventListener('click', function() {
            const packId = this.dataset.packId;
            // In a real app, you would add to cart via API
            this.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Added';
            feather.replace();
            setTimeout(() => {
                this.innerHTML = '<i data-feather="shopping-cart" class="w-4 h-4"></i>';
                feather.replace();
            }, 2000);
        });
    });
});