/**
 * Section Transitions & Effects
 * Modern animations for section dividers
 */

const SectionTransitions = {
    init() {
        this.initParticleBridge();
        this.initScrollReveal();
        this.initWaveAnimation();
        this.initParallaxDividers();
    },

    // Animated particles between sections
    initParticleBridge() {
        const bridge = document.getElementById('particleBridge');
        if (!bridge) return;

        // Create floating particles
        for (let i = 0; i < 30; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 5 + 's';
            particle.style.animationDuration = (5 + Math.random() * 5) + 's';
            particle.style.animation = `floatParticle ${5 + Math.random() * 5}s linear infinite`;
            bridge.appendChild(particle);
        }
    },

    // Reveal sections on scroll
    initScrollReveal() {
        const sections = document.querySelectorAll('.fade-section');
        
        const revealSection = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    
                    // Add shimmer effect on reveal
                    const shimmer = document.createElement('div');
                    shimmer.style.cssText = `
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, transparent, rgba(15, 114, 181, 0.2), transparent);
                        animation: shimmerPass 1s ease-out forwards;
                        pointer-events: none;
                        z-index: 100;
                    `;
                    entry.target.style.position = 'relative';
                    entry.target.appendChild(shimmer);
                    
                    setTimeout(() => shimmer.remove(), 1000);
                }
            });
        };

        const observer = new IntersectionObserver(revealSection, {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        });

        sections.forEach(section => observer.observe(section));
    },

    // Animate wave dividers
    initWaveAnimation() {
        const waves = document.querySelectorAll('.wave-divider path');
        
        waves.forEach(wave => {
            let time = 0;
            const animateWave = () => {
                time += 0.02;
                const points = [];
                
                for (let i = 0; i <= 10; i++) {
                    const x = (i / 10) * 1200;
                    const y = Math.sin((i / 10) * Math.PI * 2 + time) * 10 + 56;
                    points.push(`${x},${y}`);
                }
                
                // Create smooth wave path
                const d = `M0,56 Q${points[2]} T${points[4]} T${points[6]} T${points[8]} T1200,56 L1200,0 L0,0 Z`;
                wave.setAttribute('d', d);
                
                requestAnimationFrame(animateWave);
            };
            
            // Start wave animation
            // animateWave(); // Commented out for performance, uncomment for wave motion
        });
    },

    // Parallax effect for dividers
    initParallaxDividers() {
        const dividers = document.querySelectorAll('.blob-divider, .gradient-divider, .flow-lines');
        
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            
            dividers.forEach(divider => {
                const speed = divider.dataset.speed || 0.5;
                const yPos = -(scrolled * speed);
                divider.style.transform = `translateY(${yPos}px)`;
            });
        });
    }
};

// Add shimmer animation
const style = document.createElement('style');
style.textContent = `
    @keyframes shimmerPass {
        to {
            left: 100%;
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// Initialize when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => SectionTransitions.init());
} else {
    SectionTransitions.init();
}