document.addEventListener('DOMContentLoaded', function() {
    // Initialize animation for background elements
    initBackgroundAnimation();
    
    // Initialize scroll animations
    initScrollAnimations();
    
    // Initialize navbar scroll effect
    initNavbarScroll();
    
    // Count up animation for stats
    initCountUp();
    
    // Initialize tooltips
    initTooltips();
    
    // Initialize smooth scrolling
    initSmoothScroll();
    
    // Initialize hero slider
    initHeroSlider();
});

// Hero Slider Configuration
function initHeroSlider() {
    const heroSlider = document.getElementById('heroSlider');
    if (heroSlider) {
        // Create Bootstrap carousel instance
        const carousel = new bootstrap.Carousel(heroSlider, {
            interval: 5000,        // Time between slides in ms
            keyboard: true,        // React to keyboard events
            pause: 'hover',        // Pause on mouse hover
            wrap: true,            // Cycle continuously
            touch: true            // Allow touch swipe on mobile
        });
        
        // Add slide change animation effects
        heroSlider.addEventListener('slide.bs.carousel', function (e) {
            const activeSlide = heroSlider.querySelector('.carousel-item.active');
            const nextSlide = e.relatedTarget;
            
            // Reset animations on all slides
            heroSlider.querySelectorAll('.carousel-item').forEach(slide => {
                slide.querySelectorAll('h1, p, .btn').forEach(element => {
                    element.style.opacity = '0';
                    element.style.transform = 'translateY(20px)';
                });
            });
            
            // Add animation to new active slide after a slight delay
            setTimeout(() => {
                const elements = nextSlide.querySelectorAll('h1, p, .btn');
                elements.forEach((element, index) => {
                    setTimeout(() => {
                        element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                        element.style.opacity = '1';
                        element.style.transform = 'translateY(0)';
                    }, 200 * index); // Staggered animation
                });
            }, 300);
        });
        
        // Initialize first slide animations
        const firstSlide = heroSlider.querySelector('.carousel-item.active');
        if (firstSlide) {
            const elements = firstSlide.querySelectorAll('h1, p, .btn');
            elements.forEach((element, index) => {
                element.style.opacity = '0';
                element.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }, 500 + (200 * index)); // Staggered animation
            });
        }
    }
}

// Background Animation
function initBackgroundAnimation() {
    // Create background animation container if it doesn't exist
    if (!document.querySelector('.bg-animation-container')) {
        const bgContainer = document.createElement('div');
        bgContainer.className = 'bg-animation-container';
        
        const bgGradient = document.createElement('div');
        bgGradient.className = 'bg-gradient';
        
        const bgCircle1 = document.createElement('div');
        bgCircle1.className = 'bg-circle';
        
        const bgCircle2 = document.createElement('div');
        bgCircle2.className = 'bg-circle';
        
        const bgCircle3 = document.createElement('div');
        bgCircle3.className = 'bg-circle';
        
        bgContainer.appendChild(bgGradient);
        bgContainer.appendChild(bgCircle1);
        bgContainer.appendChild(bgCircle2);
        bgContainer.appendChild(bgCircle3);
        
        document.body.insertBefore(bgContainer, document.body.firstChild);
    }
    
    // Animate background circles on mousemove
    document.addEventListener('mousemove', function(e) {
        const circles = document.querySelectorAll('.bg-circle');
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;
        
        circles.forEach((circle, index) => {
            const speed = (index + 1) * 0.05;
            const translateX = (x * 40 - 20) * speed;
            const translateY = (y * 40 - 20) * speed;
            
            circle.style.transform = `translate(${translateX}px, ${translateY}px) scale(${1 + (y * 0.1)})`;
        });
    });
}

// Scroll Animations
function initScrollAnimations() {
    // Add fade-in class to elements that should animate in
    const animateElements = document.querySelectorAll('.course-card, .team-member, .testimonial, .blog-post, .stats-box, .hero-section h1, .hero-section p, .hero-section .btn, h2');
    
    animateElements.forEach(element => {
        element.classList.add('fade-in');
    });
    
    // Check which elements are in viewport and animate them
    function checkInView() {
        const elements = document.querySelectorAll('.fade-in');
        const windowHeight = window.innerHeight;
        
        elements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const elementVisible = 150;
            
            if (elementTop < windowHeight - elementVisible) {
                element.classList.add('active');
            }
        });
    }
    
    // Run on scroll
    window.addEventListener('scroll', checkInView);
    
    // Run once on page load
    checkInView();
}

// Navbar Scroll Effect
function initNavbarScroll() {
    window.addEventListener('scroll', function() {
        const navbar = document.querySelector('.navbar');
        
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });
}

// Count Up Animation for Statistics
function initCountUp() {
    if (!document.querySelector('.stats-number')) return;
    
    const statsNumbers = document.querySelectorAll('.stats-number');
    let hasStarted = false;
    
    function startCountUp() {
        if (hasStarted) return;
        
        statsNumbers.forEach(element => {
            const target = parseInt(element.getAttribute('data-target'));
            const duration = 2000; // 2 seconds
            const start = 0;
            const increment = target / (duration / 16); // 60fps
            
            let current = 0;
            const counter = setInterval(function() {
                current += increment;
                element.textContent = Math.floor(current);
                
                if (current >= target) {
                    element.textContent = target.toLocaleString();
                    clearInterval(counter);
                }
            }, 16);
        });
        
        hasStarted = true;
    }
    
    // Start counter when in viewport
    function checkIfInView() {
        const statsSection = document.querySelector('.stats-box');
        if (!statsSection) return;
        
        const position = statsSection.getBoundingClientRect();
        
        // If stats section is in viewport
        if (position.top < window.innerHeight && position.bottom >= 0) {
            startCountUp();
            window.removeEventListener('scroll', checkIfInView);
        }
    }
    
    window.addEventListener('scroll', checkIfInView);
    checkIfInView(); // Check on page load
}

// Initialize Bootstrap Tooltips
function initTooltips() {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    if (tooltipTriggerList.length > 0 && typeof bootstrap !== 'undefined') {
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
    }
}

// Smooth Scrolling for Anchor Links
function initSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (!targetElement) return;
            
            window.scrollTo({
                top: targetElement.offsetTop - 80, // Offset for navbar
                behavior: 'smooth'
            });
            
            // Update active state in navbar
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            this.classList.add('active');
        });
    });
}

// Utility function to check if element is in viewport
function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.bottom >= 0 &&
        rect.left <= (window.innerWidth || document.documentElement.clientWidth) &&
        rect.right >= 0
    );
}