document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('video');
    const outputText = document.getElementById('output-text');
    const startDemoBtn = document.getElementById('start-demo');

    const phrases = [
        "Hello!",
        "How are you?",
        "I am fine, thank you.",
        "What is your name?",
        "Nice to meet you.",
        "Goodbye!",
        "Help!",
        "I need water.",
        "I am hungry.",
        "Thank you!"
    ];

    let intervalId;

    async function startWebcam() {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            video.srcObject = stream;
            startDemoBtn.disabled = true;
            startDemoBtn.textContent = 'Demo Running...';

            // Simulate gesture recognition
            intervalId = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * phrases.length);
                outputText.textContent = phrases[randomIndex];
            }, 3000);

        } catch (err) {
            console.error("Error accessing webcam: ", err);
            outputText.textContent = "Could not access webcam. Please allow camera access and try again.";
            startDemoBtn.disabled = false;
        }
    }

    if (startDemoBtn) {
        startDemoBtn.addEventListener('click', startWebcam);
    }

    // Stop the demo if the user navigates away
    window.addEventListener('beforeunload', () => {
        if (intervalId) {
            clearInterval(intervalId);
        }
        if (video.srcObject) {
            video.srcObject.getTracks().forEach(track => track.stop());
        }
    });
});