/* ============================================
   CinéVault — Script Principal
   Interactions & Animations
   ============================================ */

document.addEventListener('DOMContentLoaded', function() {

    // ===== NAVBAR SCROLL EFFECT =====
    var navbar = document.querySelector('.navbar');
    var bottomBar = document.getElementById('bottomBar');
    var heroSection = document.querySelector('.hero');

    window.addEventListener('scroll', function() {
        var currentScroll = window.pageYOffset;
        if (currentScroll > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }

        // Show bottom bar after scrolling past hero
        if (heroSection) {
            var heroBottom = heroSection.offsetTop + heroSection.offsetHeight - 200;
            if (currentScroll > heroBottom) {
                bottomBar.classList.add('visible');
            } else {
                bottomBar.classList.remove('visible');
            }
        }
    });

    // ===== HERO PARTICLES =====
    var particlesContainer = document.getElementById('particles');
    if (particlesContainer) {
        for (var i = 0; i < 20; i++) {
            var particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.width = (Math.random() * 3 + 1.5) + 'px';
            particle.style.height = particle.style.width;
            particle.style.animationDelay = Math.random() * 6 + 's';
            particle.style.animationDuration = (Math.random() * 6 + 4) + 's';
            particlesContainer.appendChild(particle);
        }
    }

    // ===== COUNTER ANIMATION =====
    function animateCounter(element, target, duration) {
        var start = 0;
        var startTime = null;

        function update(currentTime) {
            if (!startTime) startTime = currentTime;
            var elapsed = currentTime - startTime;
            var progress = Math.min(elapsed / duration, 1);
            var easeProgress = 1 - Math.pow(1 - progress, 3);
            var current = Math.floor(easeProgress * target);

            if (target >= 1000) {
                element.textContent = current.toLocaleString('fr-FR');
            } else {
                element.textContent = current;
            }

            if (progress < 1) {
                requestAnimationFrame(update);
            }
        }

        requestAnimationFrame(update);
    }

    var statNumbers = document.querySelectorAll('.stat-number');
    var counterObserver = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var target = parseInt(entry.target.getAttribute('data-target'));
                animateCounter(entry.target, target, 2000);
                counterObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    statNumbers.forEach(function(num) {
        counterObserver.observe(num);
    });

    // ===== FAQ ACCORDION =====
    var faqItems = document.querySelectorAll('.faq-item');

    faqItems.forEach(function(item) {
        var question = item.querySelector('.faq-question');
        question.addEventListener('click', function() {
            var isActive = item.classList.contains('active');

            faqItems.forEach(function(faq) {
                faq.classList.remove('active');
                faq.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
            });

            if (!isActive) {
                item.classList.add('active');
                question.setAttribute('aria-expanded', 'true');
            }
        });
    });

    // ===== CATEGORY TABS =====
    var tabBtns = document.querySelectorAll('.tab-btn');
    var movieCards = document.querySelectorAll('.movie-card');

    tabBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var category = this.getAttribute('data-category');

            tabBtns.forEach(function(b) { b.classList.remove('active'); });
            this.classList.add('active');

            movieCards.forEach(function(card) {
                if (category === 'tous' || card.getAttribute('data-category') === category) {
                    card.style.display = 'block';
                    card.style.animation = 'fadeInUp 0.5s ease forwards';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });

    // ===== SCROLL ANIMATIONS =====
    var animateElements = document.querySelectorAll('.feature-card, .movie-card, .review-card, .highlight-item, .faq-item');

    animateElements.forEach(function(el) {
        el.classList.add('animate-on-scroll');
    });

    var scrollObserver = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var delay = entry.target.getAttribute('data-delay') || 0;
                setTimeout(function() {
                    entry.target.classList.add('visible');
                }, parseInt(delay));
                scrollObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' });

    animateElements.forEach(function(el) {
        scrollObserver.observe(el);
    });

    // ===== SMOOTH SCROLL =====
    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            var targetId = this.getAttribute('href');
            var targetEl = document.querySelector(targetId);
            if (targetEl) {
                var offsetTop = targetEl.offsetTop - 60;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    // ===== MOBILE TOUCH EFFECT FOR MOVIE CARDS =====
    movieCards.forEach(function(card) {
        card.addEventListener('touchstart', function() {
            this.querySelector('.movie-overlay').style.opacity = '1';
        });
        card.addEventListener('touchend', function() {
            var self = this;
            setTimeout(function() {
                self.querySelector('.movie-overlay').style.opacity = '0';
            }, 400);
        });
    });

    console.log('CinéVault — Page chargée');
});