// Interactive Audio Preview
const playButton = document.getElementById('playButton');
const playIcon = document.getElementById('playIcon');
const pauseIcon = document.getElementById('pauseIcon');
const audioWaves = document.getElementById('audioWaves');
const storyText = document.getElementById('storyText');
const words = storyText.querySelectorAll('.word');

let isPlaying = false;
let currentWordIndex = 0;
let highlightInterval = null;

playButton.addEventListener('click', function() {
    if (!isPlaying) {
        startPlayback();
    } else {
        stopPlayback();
    }
});

function startPlayback() {
    isPlaying = true;
    currentWordIndex = 0;
    
    // Toggle icons
    playIcon.style.display = 'none';
    pauseIcon.style.display = 'block';
    
    // Start audio waves
    audioWaves.classList.add('active');
    
    // Reset all words
    words.forEach(word => word.classList.remove('highlight'));
    
    // Highlight words one by one
    highlightInterval = setInterval(() => {
        if (currentWordIndex > 0) {
            words[currentWordIndex - 1].classList.remove('highlight');
        }
        
        if (currentWordIndex < words.length) {
            words[currentWordIndex].classList.add('highlight');
            currentWordIndex++;
        } else {
            // Finished
            setTimeout(() => {
                stopPlayback();
                resetPlayback();
            }, 500);
        }
    }, 400); // 400ms per word = ~2.5 words per second
}

function stopPlayback() {
    isPlaying = false;
    
    // Toggle icons
    playIcon.style.display = 'block';
    pauseIcon.style.display = 'none';
    
    // Stop audio waves
    audioWaves.classList.remove('active');
    
    // Clear interval
    if (highlightInterval) {
        clearInterval(highlightInterval);
        highlightInterval = null;
    }
}

function resetPlayback() {
    currentWordIndex = 0;
    words.forEach(word => word.classList.remove('highlight'));
}