document.addEventListener('DOMContentLoaded', function() {
    // Simulate playback progress
    const progressBar = document.querySelector('.bg-blue-500');
    let progress = 10;
    
    const progressInterval = setInterval(() => {
        progress += 0.1;
        if (progress > 100) {
            clearInterval(progressInterval);
            return;
        }
        progressBar.style.width = `${progress}%`;
    }, 1000);
    
    // Play/pause button functionality
    const playButton = document.querySelector('button[aria-label="Play"]');
    playButton.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (icon.dataset.feather === 'play') {
            icon.dataset.feather = 'pause';
            feather.replace();
        } else {
            icon.dataset.feather = 'play';
            feather.replace();
        }
    });
    
    // Simulate conversation loading
    const transcriptContainer = document.querySelector('.overflow-y-auto');
    const conversation = [
        {
            speaker: "Michael",
            text: "The key to throughput optimization lies in the parallel processing architecture we've developed. It allows for simultaneous data streams without resource contention.",
            time: "03:45"
        },
        {
            speaker: "Sarah",
            text: "That's fascinating! How does this compare to traditional sequential processing models?",
            time: "05:12"
        },
        {
            speaker: "Michael",
            text: "We're seeing about 3.2x improvement in benchmark tests, with even greater gains in real-world deployment scenarios.",
            time: "06:30"
        },
        {
            speaker: "Sarah",
            text: "Our listeners in enterprise environments will be particularly interested in the deployment specifications. Can you walk us through those?",
            time: "08:45"
        }
    ];
    
    let currentIndex = 0;
    const conversationInterval = setInterval(() => {
        if (currentIndex >= conversation.length) {
            clearInterval(conversationInterval);
            return;
        }
        
        const message = conversation[currentIndex];
        const bubble = document.createElement('div');
        bubble.className = `flex items-start space-x-3`;
        
        if (message.speaker === "Michael") {
            bubble.innerHTML = `
                <img src="http://static.photos/people/200x200/2" alt="Michael" class="w-8 h-8 rounded-full mt-1">
                <div class="bg-green-50 rounded-lg p-3 max-w-[80%]">
                    <p class="font-medium text-green-800">Michael</p>
                    <p class="text-gray-700 mt-1">${message.text}</p>
                    <p class="text-xs text-gray-500 mt-2">${message.time}</p>
                </div>
            `;
        } else {
            bubble.innerHTML = `
                <img src="http://static.photos/people/200x200/1" alt="Sarah" class="w-8 h-8 rounded-full mt-1">
                <div class="bg-blue-50 rounded-lg p-3 max-w-[80%]">
                    <p class="font-medium text-blue-800">Sarah</p>
                    <p class="text-gray-700 mt-1">${message.text}</p>
                    <p class="text-xs text-gray-500 mt-2">${message.time}</p>
                </div>
            `;
        }
        
        transcriptContainer.insertBefore(bubble, transcriptContainer.lastElementChild);
        transcriptContainer.scrollTop = transcriptContainer.scrollHeight;
        currentIndex++;
    }, 8000);
});