document.addEventListener('DOMContentLoaded', () => {
    // 1. Sticky Navbar Effect
    const navbar = document.getElementById('navbar');
    if (navbar) {
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    }

    // 2. Scroll Reveal Animation
    const revealElements = document.querySelectorAll('.reveal, .reveal-up');
    const revealOptions = { threshold: 0.15 };
    const revealOnScroll = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
            }
        });
    }, revealOptions);
    revealElements.forEach(el => revealOnScroll.observe(el));

    // 3. Smooth Scroll
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const targetId = this.getAttribute('href');
            if(targetId === '#') return;
            const targetElement = document.querySelector(targetId);
            if(targetElement) {
                e.preventDefault();
                targetElement.scrollIntoView({ behavior: "smooth" });
            }
        });
    });

    // 4. QUIZ LOGIC
    const quizData = [
        { 
            question: "1. I _______ football every Saturday.", 
            options: ["A. play", "B. plays", "C. am playing", "D. playing"], 
            correct: 0,
            image: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=500&q=80"
        },
        { 
            question: "2. She _______ like apples.", 
            options: ["A. don't like", "B. doesn't", "C. not likes", "D. isn't like"], 
            correct: 1,
            image: "https://images.unsplash.com/photo-1550583724-428676d1e3d6?w=500&q=80"
        },
        { 
            question: "3. _______ they go to school by bus?", 
            options: ["A. Does", "B. Are", "C. Do", "D. Is"], 
            correct: 2,
            image: "https://images.unsplash.com/photo-1509062522246-3755977927d7?w=500&q=80"
        },
        { 
            question: "4. My father _______ TV in the evening.", 
            options: ["A. watch", "B. watches", "C. watching", "D. are watching"], 
            correct: 1,
            image: "https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?w=500&q=80"
        },
        { 
            question: "5. The earth _______ around the sun.", 
            options: ["A. go", "B. goes", "C. going", "D. is going"], 
            correct: 1,
            image: "https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?w=500&q=80"
        },
        { 
            question: "6. We always _______ our homework.", 
            options: ["A. do", "B. does", "C. doing", "D. are doing"], 
            correct: 0,
            image: "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=500&q=80"
        },
        { 
            question: "7. What time _______ your brother get up?", 
            options: ["A. do", "B. are", "C. does", "D. is"], 
            correct: 2,
            image: "https://images.unsplash.com/photo-1495420377436-c3ef4e55722d?w=500&q=80"
        },
        { 
            question: "8. He usually _______ hard for exams.", 
            options: ["A. study", "B. studies", "C. studys", "D. studying"], 
            correct: 1,
            image: "https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=500&q=80"
        }
    ];

    let quizIdx = 0, quizScore = 0, timer, timeLeft = 15;
    const startBtn = document.getElementById('start-btn'), startScreen = document.getElementById('quiz-start-screen');
    const qScreen = document.getElementById('quiz-question-screen'), qText = document.getElementById('question-text');
    const qImg = document.getElementById('quiz-image');
    const opts = [document.getElementById('opt-0'), document.getElementById('opt-1'), document.getElementById('opt-2'), document.getElementById('opt-3')];
    const qFooter = document.getElementById('quiz-footer'), scoreEl = document.getElementById('score-text'), nextBtn = document.getElementById('next-btn');
    const timeEl = document.getElementById('time-left'), feedEl = document.getElementById('quiz-feedback'), qCounter = document.getElementById('current-q');

    function loadQ() {
        clearInterval(timer); timeLeft = 15; timeEl.innerText = timeLeft; feedEl.innerText = ""; nextBtn.style.display = "none";
        const q = quizData[quizIdx]; qCounter.innerText = quizIdx + 1; qText.innerText = q.question;
        if(qImg) qImg.src = q.image;
        opts.forEach((btn, i) => {
            if(btn) {
                btn.innerText = q.options[i];
                btn.className = "option-btn";
                btn.disabled = false;
            }
        });
        timer = setInterval(() => {
            timeLeft--; timeEl.innerText = timeLeft;
            if(timeLeft <= 0) { clearInterval(timer); showCorrect(); }
        }, 1000);
    }

    function showCorrect() {
        opts.forEach(b => { if(b) b.disabled = true; });
        const correctBtn = opts[quizData[quizIdx].correct];
        if(correctBtn) correctBtn.classList.add('correct');
        if(nextBtn) {
            nextBtn.style.display = 'block';
            if(quizIdx === quizData.length - 1) nextBtn.innerText = "Finish";
        }
    }

    function triggerFireworks() {
        if (typeof confetti !== 'undefined') {
            confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
        }
    }

    if(startBtn) {
        startBtn.onclick = () => {
            startScreen.style.display = 'none'; qScreen.style.display = 'flex'; qFooter.style.display = 'flex';
            quizIdx = 0; quizScore = 0; scoreEl.innerText = '0'; loadQ();
        };
    }

    opts.forEach((btn, i) => {
        if (btn) {
            btn.onclick = () => {
                clearInterval(timer); showCorrect();
                if(i === quizData[quizIdx].correct) { 
                    quizScore++; 
                    scoreEl.innerText = quizScore * 10; 
                    btn.classList.add('correct'); 
                    feedEl.innerText = "Correct! Well done! 🎇"; 
                    feedEl.style.color = "var(--accent-green)";
                    triggerFireworks();
                } else { 
                    btn.classList.add('wrong'); 
                    feedEl.innerText = "Incorrect. Try the next one!"; 
                    feedEl.style.color = "var(--secondary-color)";
                }
            };
        }
    });

    if(nextBtn) {
        nextBtn.onclick = () => {
            quizIdx++;
            if(quizIdx < quizData.length) loadQ();
            else { 
                qScreen.innerHTML = `<h2>Quiz Finished! Your Score: ${quizScore * 10} / 80</h2>`; 
                nextBtn.style.display = 'none'; 
            }
        };
    }

    // 5. Global Injections
    document.querySelectorAll('.footer-logo-img').forEach(img => {
        img.src = "https://tuyensinh.eaut.edu.vn/wp-content/uploads/2021/03/EAUT-logo-moi-2021-01-1024x306.png";
    });

    const path = window.location.pathname;
    if (!path.includes('presentation.html') && !path.includes('about.html')) {
        const charactersHTML = `
            <style>
                .cartoon-char { position: fixed; z-index: 999; pointer-events: none; opacity: 0.95; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); }
                @keyframes driftChar1 { 0% { transform: translate(0, 0) scale(1) rotate(-5deg); } 100% { transform: translate(15px, -20px) scale(1.05) rotate(5deg); } }
                @keyframes driftChar2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-15px, 20px) scale(0.95); } }
                .char-1 { bottom: 20px; left: 20px; width: 120px; animation: driftChar1 4s infinite alternate ease-in-out; }
                .char-2 { bottom: 20px; right: 20px; width: 120px; animation: driftChar2 6s infinite alternate ease-in-out; }
                .char-3 { top: 40%; left: 10px; width: 120px; animation: driftChar2 5s infinite alternate ease-in-out; }
                .char-4 { top: 35%; right: 10px; width: 120px; animation: driftChar1 7s infinite alternate ease-in-out; }
            </style>
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png" class="cartoon-char char-1">
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png" class="cartoon-char char-2">
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/7.png" class="cartoon-char char-3">
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png" class="cartoon-char char-4">
        `;
        document.body.insertAdjacentHTML('beforeend', charactersHTML);
    }
});
