document.addEventListener('DOMContentLoaded', () => {

    const FPS = 60; // Target frames per second for cursor tracking

    // -------- Video fixed BG ------------------------------
    const reelEl = document.getElementById('reel');
    if (!reelEl) return;

    const video = reelEl.tagName.toLowerCase() === 'video' ? reelEl : reelEl.querySelector('video');
    if (!video) return;

    function tryPlay() {
        const playPromise = video.play();
        if (playPromise !== undefined) {
            playPromise.catch(() => {
                // Autoplay bloqué : passer en muet et retenter
                video.muted = true;
                video.play().catch(() => {
                });
            });
        }
    }

    function handleVisibility(visible) {
        console.log('Visibility changed, playing:', visible);
        if (visible) {
            // make visible the video element
            video.style.visibility = 'visible';
            tryPlay();
        } else {
            video.style.visibility = 'hidden';
            video.pause();
        }
    }

    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                handleVisibility(entry.intersectionRatio >= 0.01);
            });
        }, {threshold: [0, 0.01, 1]});
        observer.observe(reelEl);
    } else {
        // Fallback simple : vérification sur scroll/resize
        let ticking = false;
        const check = () => {
            ticking = false;
            const rect = reelEl.getBoundingClientRect();
            const vh = window.innerHeight || document.documentElement.clientHeight;
            // Visible si une partie quelconque est dans la fenêtre
            const visible = rect.bottom > 0 && rect.top < vh;
            handleVisibility(visible);
        };
        const onScroll = () => {
            if (!ticking) {
                ticking = true;
                requestAnimationFrame(check);
            }
        };
        onScroll();
        window.addEventListener('scroll', onScroll, {passive: true});
        window.addEventListener('resize', onScroll);
    }

    document.addEventListener('visibilitychange', () => {
        if (document.hidden) video.pause();
    });

    // Cursor tracking
    //track the cursor position and set CSS variables --cursor-x and --cursor-y on the body element
    let x = 0;
    let y = 0;
    document.addEventListener('mousemove', (e) => {
        x = Math.round(((e.clientX / window.innerWidth) * 2 - 1) * 10000) / 10000;
        y = Math.round(((e.clientY / window.innerHeight) * 2 - 1) * 10000) / 10000;
    });

    let lastUpdate = 0;
    const FRAME_INTERVAL = 1000 / FPS;
    const updateTwist = (timestamp) => {
        if (!timestamp) timestamp = performance.now();
        if (timestamp - lastUpdate >= FRAME_INTERVAL) {
            document.body.style.setProperty('--cursor-x', x);
            document.body.style.setProperty('--cursor-y', y);
            lastUpdate = timestamp;
        }
        requestAnimationFrame(updateTwist);
    }
    updateTwist();

    // --------- Init Lenis smooth scroll ------------------------
    // Initialize Lenis
    const lenis = new Lenis({
        autoRaf: true,
    });

    // Gallery interactions
    // On click on .photo element, toggle the 'full' class
    document.querySelectorAll('.photo').forEach(photoEl => {
        photoEl.addEventListener('click', () => {
            console.log('Photo clicked');
            photoEl.classList.toggle('full');
        });
    });
});