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

    // 1. Mobile Menu Toggle
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const navUl = document.querySelector('nav ul');

    if (mobileMenuBtn && navUl) {
        mobileMenuBtn.addEventListener('click', () => {
            if (navUl.style.display === 'flex') {
                navUl.style.display = '';
                navUl.style.flexDirection = '';
                navUl.style.position = '';
                navUl.style.top = '';
                navUl.style.left = '';
                navUl.style.width = '';
                navUl.style.background = '';
                navUl.style.padding = '';
                navUl.style.boxShadow = '';
                navUl.style.zIndex = '';
            } else {
                navUl.style.display = 'flex';
                navUl.style.flexDirection = 'column';
                navUl.style.position = 'absolute';
                navUl.style.top = '85px';
                navUl.style.left = '0';
                navUl.style.width = '100%';
                navUl.style.background = '#ffffff';
                navUl.style.padding = '20px 30px';
                navUl.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
                navUl.style.zIndex = '999';
                navUl.style.gap = '15px';
            }
        });
    }

    // 2. Adjust Header on Scroll
    const header = document.getElementById('main-header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.style.boxShadow = '0 10px 30px rgba(0,0,0,0.08)';
            header.style.transition = 'box-shadow 0.3s ease';
        } else {
            header.style.boxShadow = 'var(--shadow-sm)';
        }
    });

    // 3. Real Slider Logic for Hero Section
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.slider-dot');
    const prevBtn = document.getElementById('prevSlide');
    const nextBtn = document.getElementById('nextSlide');
    let currentSlide = 0;
    let slideInterval;

    const showSlide = (index) => {
        slides.forEach(slide => slide.classList.remove('active-slide'));
        dots.forEach(dot => dot.classList.remove('active'));
        
        // Reset animations on content
        slides.forEach(slide => {
            const content = slide.querySelector('.hero-content');
            if(content && !slide.classList.contains('active-slide')) {
                content.style.opacity = '0';
                content.style.transform = 'translateY(20px)';
            }
        });

        currentSlide = (index + slides.length) % slides.length;
        slides[currentSlide].classList.add('active-slide');
        dots[currentSlide].classList.add('active');

        // Play animation on new content
        const activeContent = slides[currentSlide].querySelector('.hero-content');
        if(activeContent) {
            setTimeout(() => {
                activeContent.style.opacity = '1';
                activeContent.style.transform = 'translateY(-20px)';
            }, 100);
        }
    };

    const nextSlide = () => showSlide(currentSlide + 1);
    const prevSlide = () => showSlide(currentSlide - 1);

    if (slides.length > 0) {
        nextBtn.addEventListener('click', () => { nextSlide(); resetInterval(); });
        prevBtn.addEventListener('click', () => { prevSlide(); resetInterval(); });

        dots.forEach((dot) => {
            dot.addEventListener('click', (e) => {
                const index = parseInt(e.target.getAttribute('data-index'));
                showSlide(index);
                resetInterval();
            });
        });

        const resetInterval = () => {
            clearInterval(slideInterval);
            slideInterval = setInterval(nextSlide, 5000);
        };
        slideInterval = setInterval(nextSlide, 5000); // Auto slide every 5 seconds
    }

    // 4. Smooth Scrolling for Internal Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                e.preventDefault();
                targetElement.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                
                // If mobile menu is open, close it after clicking
                if (window.innerWidth <= 768 && navUl.style.display === 'flex') {
                    mobileMenuBtn.click();
                }
            }
        });
    });

    // 5. Scroll Up Button Functionality
    const scrollUpBtn = document.querySelector('.scroll-up-btn');
    if (scrollUpBtn) {
        scrollUpBtn.addEventListener('click', (e) => {
            if (scrollUpBtn.getAttribute('href') === '#top') {
                e.preventDefault();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
        });
    }
});
