app.js

document.addEventListener('DOMContentLoaded', () => {
    // 1. Mobile Menu Toggle
    const navToggle = document.getElementById('nav-toggle');
    const navLinks = document.getElementById('nav-links');
    const navbar = document.getElementById('navbar');

    if (navToggle && navLinks) {
        navToggle.addEventListener('click', () => {
            navLinks.classList.toggle('mobile-active');
            navbar.classList.toggle('mobile-active');
            const icon = navToggle.querySelector('i');
            if (icon) {
                icon.classList.toggle('fa-bars');
                icon.classList.toggle('fa-xmark');
            }
        });

        // Close mobile menu when clicking a link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('mobile-active');
                navbar.classList.remove('mobile-active');
                const icon = navToggle.querySelector('i');
                if (icon) {
                    icon.classList.add('fa-bars');
                    icon.classList.remove('fa-xmark');
                }
            });
        });
    }

    // 2. Navbar Scroll Effect & Scroll Spy
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
        highlightNavLink();
    });

    const sections = document.querySelectorAll('section, header');
    const navItems = document.querySelectorAll('.nav-link');

    function highlightNavLink() {
        let scrollPosition = window.scrollY + 100;

        sections.forEach(section => {
            const top = section.offsetTop;
            const height = section.offsetHeight;
            const id = section.getAttribute('id');

            if (scrollPosition >= top && scrollPosition < top + height) {
                navItems.forEach(item => {
                    item.classList.remove('active');
                    if (item.getAttribute('href') === `#${id}`) {
                        item.classList.add('active');
                    }
                });
            }
        });
    }

    // 3. Scroll Reveal Animations (Intersection Observer)
    const revealTargetSection = (hash) => {
        if (!hash || !hash.startsWith('#') || hash === '#') return;
        try {
            const targetSection = document.querySelector(hash);
            if (targetSection) {
                targetSection.querySelectorAll('.reveal').forEach(el => {
                    el.classList.add('active');
                });
            }
        } catch (e) {
            console.error("Error revealing target section:", e);
        }
    };

    const revealElements = document.querySelectorAll('.reveal');
    const revealObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
                observer.unobserve(entry.target); // Animates once
            }
        });
    }, {
        threshold: 0.05,
        rootMargin: '0px 0px -20px 0px'
    });

    revealElements.forEach(element => {
        revealObserver.observe(element);
    });

    // Immediately reveal elements if arriving via hash link or hash changes
    revealTargetSection(window.location.hash);
    window.addEventListener('hashchange', () => {
        revealTargetSection(window.location.hash);
    });

    // Also trigger on local hash link clicks
    document.querySelectorAll('a[href^="#"]').forEach(link => {
        link.addEventListener('click', () => {
            revealTargetSection(link.getAttribute('href'));
        });
    });

    // 4. Statistics Counter Animation
    const statNumbers = document.querySelectorAll('.stat-counter');
    const animateCounters = (element) => {
        const target = parseInt(element.getAttribute('data-target'), 10);
        const prefix = element.getAttribute('data-prefix') || '';
        const suffix = element.getAttribute('data-suffix') || '';
        const duration = 1500; // 1.5 seconds
        const startTime = performance.now();
        
        const updateCounter = (now) => {
            const progress = Math.min((now - startTime) / duration, 1);
            const current = Math.floor(progress * target);
            element.textContent = prefix + current + suffix;
            if (progress < 1) {
                requestAnimationFrame(updateCounter);
            } else {
                element.textContent = prefix + target + suffix;
            }
        };
        requestAnimationFrame(updateCounter);
    };

    const manifestoSection = document.getElementById('manifesto');
    if (manifestoSection) {
        const statsObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    statNumbers.forEach(num => animateCounters(num));
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.15 });
        
        statsObserver.observe(manifestoSection);
    }

    // 5. Dynamic Collaboration Form Submission
    const colForm = document.getElementById('collaboration-form');
    if (colForm) {
        colForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const field = document.getElementById('field').value;
            
            // Dynamic card replacement for a premium feedback loop
            const card = colForm.closest('.contact-form-card');
            if (card) {
                card.style.opacity = '0';
                card.style.transform = 'translateY(10px)';
                
                setTimeout(() => {
                    card.innerHTML = `
                        <div style="text-align: center; padding: 2rem 0;">
                            <div style="width: 80px; height: 80px; background: rgba(var(--primary-rgb), 0.1); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; color: var(--primary); font-size: 2.5rem; animation: pulse-glow 2s infinite;">
                                <i class="fa-solid fa-check"></i>
                            </div>
                            <h3 style="font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-primary);">Đăng Ký Thành Công!</h3>
                            <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.6;">
                                Chào <strong>${name}</strong>, chúng tôi đã nhận được thông tin đăng ký đồng hành trong lĩnh vực <strong>${field}</strong>.
                            </p>
                            <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem;">
                                Hệ thống đã lưu trữ email <strong>${email}</strong>. CEO Thiên Phong và đội ngũ quản lý CRF sẽ liên hệ trực tiếp với bạn qua email trong vòng 24-48 giờ làm việc.
                            </p>
                            <button id="btn-back-form" class="btn btn-secondary">Quay lại</button>
                        </div>
                    `;
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                    
                    // Allow re-submitting if needed
                    const backBtn = document.getElementById('btn-back-form');
                    if (backBtn) {
                        backBtn.addEventListener('click', () => {
                            window.location.reload();
                        });
                    }
                }, 300);
            }
        });
    }

    // 6. Course Tabs Filter Logic
    const courseTabs = document.querySelectorAll('.course-tab');
    const courseCards = document.querySelectorAll('.course-card');

    if (courseTabs.length > 0 && courseCards.length > 0) {
        courseTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Toggle active state
                courseTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');

                // Filter logic
                const filter = tab.getAttribute('data-filter');

                courseCards.forEach(card => {
                    const category = card.getAttribute('data-category');
                    if (filter === 'all' || category === filter) {
                        card.classList.remove('hide');
                    } else {
                        card.classList.add('hide');
                    }
                });
            });
        });
    }
});

// Extra style animation definition
const styleSheet = document.createElement("style");
styleSheet.textContent = `
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(var(--primary-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}
`;
document.head.appendChild(styleSheet);