document.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll('.slide');
    const totalSlides = slides.length;
    let currentSlideIndex = 0;

    const progressFill = document.getElementById('progressFill');
    const slideCounter = document.getElementById('slideCounter');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    const blobs = document.querySelectorAll('.blob');

    function updateSlide() {
        slides.forEach((slide, index) => {
            slide.classList.remove('active');
            if (index === currentSlideIndex) {
                slide.classList.add('active');
            }
        });

        // Update progress bar
        const progress = ((currentSlideIndex + 1) / totalSlides) * 100;
        progressFill.style.width = `${progress}%`;

        // Update slide counter text
        const currentCount = (currentSlideIndex + 1).toString().padStart(2, '0');
        const totalCount = totalSlides.toString().padStart(2, '0');
        slideCounter.textContent = `${currentCount} / ${totalCount}`;

        // Update button states
        prevBtn.disabled = currentSlideIndex === 0;
        nextBtn.disabled = currentSlideIndex === totalSlides - 1;
        
        prevBtn.style.opacity = prevBtn.disabled ? '0.2' : '1';
        nextBtn.style.opacity = nextBtn.disabled ? '0.2' : '1';

        // Background parallax effect
        blobs.forEach((blob, i) => {
            const shiftX = (currentSlideIndex / totalSlides) * 100 * (i === 0 ? 1 : -1);
            const shiftY = (currentSlideIndex / totalSlides) * 50 * (i === 0 ? -1 : 1);
            blob.style.transform = `translate(${shiftX}px, ${shiftY}px)`;
        });
    }

    function nextSlide() {
        if (currentSlideIndex < totalSlides - 1) {
            currentSlideIndex++;
            updateSlide();
        } else {
            // Flash effect for end of presentation
            document.body.style.backgroundColor = 'rgba(6, 182, 212, 0.1)';
            setTimeout(() => {
                document.body.style.backgroundColor = '#020617';
            }, 200);
        }
    }

    function prevSlide() {
        if (currentSlideIndex > 0) {
            currentSlideIndex--;
            updateSlide();
        }
    }

    // Click handlers
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);

    // Keyboard handlers
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'ArrowDown') {
            e.preventDefault();
            nextSlide();
        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
            e.preventDefault();
            prevSlide();
        }
    });

    // Touch support (simple swipe)
    let touchstartX = 0;
    let touchendX = 0;

    document.addEventListener('touchstart', (e) => {
        touchstartX = e.changedTouches[0].screenX;
    });

    document.addEventListener('touchend', (e) => {
        touchendX = e.changedTouches[0].screenX;
        handleSwipe();
    });

    function handleSwipe() {
        if (touchendX < touchstartX - 50) nextSlide();
        if (touchendX > touchstartX + 50) prevSlide();
    }

    // Init
    updateSlide();
});