// Intersection Observer für Animationen
document.addEventListener('DOMContentLoaded', function() {
    // Hero Animation beim Laden
    const heroSection = document.querySelector('.subpage-hero');
    if (heroSection) {
        // Entferne animate Klasse falls vorhanden
        heroSection.classList.remove('animate');
        
        // Force Reflow
        void heroSection.offsetWidth;
        
        // Füge animate Klasse nach kurzem Delay hinzu
        setTimeout(() => {
            heroSection.classList.add('animate');
            console.log('Animation started'); // Debug-Log
        }, 200);
    }

    // Intersection Observer für andere Animationen
    const animatedElements = document.querySelectorAll([
        '.automation-header',
        '.automation-card',
        '.provision-title',
        '.provision-subtitle',
        '.provision-text',
        '.provision-image',
        '.plans-header',
        '.plan-card',
        '.levels-header',
        '.level-card',
        '.why-mlm-text',
        '.why-mlm-image',
        '.why-mlm-title',
        '.subscription-comm-section'
    ].join(','));

    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.2
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    animatedElements.forEach(element => {
        if (element) {
            observer.observe(element);
        }
    });

    // Intersection Observer für Scroll-Animationen
    const scrollObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('show');
            }
        });
    }, {
        threshold: 0.1 // Animation startet, wenn 10% des Elements sichtbar sind
    });

    // Beobachte alle Sektionen mit der animate Klasse
    const animatedSections = document.querySelectorAll('.animate');
    animatedSections.forEach(section => {
        scrollObserver.observe(section);
    });
});

// Scroll Animation
document.addEventListener('DOMContentLoaded', function() {
    const animateElements = document.querySelectorAll('.animate');
    
    function checkScroll() {
        animateElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            
            if (elementTop < windowHeight * 0.85) {
                element.classList.add('show');
            }
        });
    }
    
    // Initial check
    checkScroll();
    
    // Check on scroll
    window.addEventListener('scroll', checkScroll);
});