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

    // Mobile Menu Toggle
    const mobileBtn = document.getElementById('mobile-menu-btn');
    const navLinksContainer = document.getElementById('nav-links');
    
    if(mobileBtn) {
        mobileBtn.addEventListener('click', () => {
            navLinksContainer.classList.toggle('active');
            
            // Change icon
            const icon = mobileBtn.querySelector('i');
            if(navLinksContainer.classList.contains('active')) {
                icon.classList.remove('ph-list');
                icon.classList.add('ph-x');
            } else {
                icon.classList.remove('ph-x');
                icon.classList.add('ph-list');
            }
        });
    }

    // Scroll Reveal Animation Logic
    const reveals = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
    
    const revealOnScroll = () => {
        const triggerBottom = window.innerHeight * 0.9;
        
        reveals.forEach(reveal => {
            const revealTop = reveal.getBoundingClientRect().top;
            
            if(revealTop < triggerBottom) {
                reveal.classList.add('active');
            }
        });
    };

    window.addEventListener('scroll', revealOnScroll);
    revealOnScroll(); // Initial check

    // Modal Logic
    const registrationModal = document.getElementById('registration-modal');
    const openModalBtns = document.querySelectorAll('.open-registration, #btn-register-main');
    const closeModalBtn = document.querySelector('.close-modal');
    const registrationForm = document.getElementById('registration-form');

    const toggleModal = (show = true) => {
        if(show) {
            registrationModal.classList.add('active');
            document.body.style.overflow = 'hidden'; // Prevent scroll
        } else {
            registrationModal.classList.remove('active');
            document.body.style.overflow = 'auto';
        }
    };

    openModalBtns.forEach(btn => {
        btn.addEventListener('click', () => toggleModal(true));
    });

    closeModalBtn.addEventListener('click', () => toggleModal(false));
    
    // Close on backdrop click
    registrationModal.addEventListener('click', (e) => {
        if(e.target === registrationModal) toggleModal(false);
    });

    // Form Submission Handling
    if(registrationForm) {
        registrationForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Visual feedback
            const submitBtn = registrationForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerText;
            
            submitBtn.disabled = true;
            submitBtn.innerText = 'Mengirim...';
            
            setTimeout(() => {
                alert('Pendaftaran Anda telah berhasil dikirim! Kami akan menghubungi Anda via WhatsApp.');
                registrationForm.reset();
                submitBtn.disabled = false;
                submitBtn.innerText = originalText;
                toggleModal(false);
            }, 1500);
        });
    }

    // Smooth Scrolling & Active State Update
    const navLinks = document.querySelectorAll('.nav-link');
    const sections = document.querySelectorAll('section');

    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if(targetId.startsWith('#')) {
                e.preventDefault();
                
                if(navLinksContainer.classList.contains('active')) {
                    navLinksContainer.classList.remove('active');
                    const icon = mobileBtn.querySelector('i');
                    icon.classList.remove('ph-x');
                    icon.classList.add('ph-list');
                }

                const targetSection = document.querySelector(targetId);
                if(targetSection) {
                    const navHeight = navbar.offsetHeight;
                    const targetPosition = targetSection.offsetTop - navHeight;
                    
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                }
            }
        });
    });

    window.addEventListener('scroll', () => {
        let current = '';
        const scrollY = window.scrollY;
        const navHeight = navbar.offsetHeight;

        sections.forEach(section => {
            const sectionTop = section.offsetTop - navHeight - 100;
            const sectionHeight = section.offsetHeight;
            
            if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.add('active');
            }
        });
    });
});
