// JavaScript voor Curio Software Development informatiesite

document.addEventListener('DOMContentLoaded', function() {
    // Hamburger menu functionaliteit
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    
    if (hamburger && navMenu) {
        hamburger.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            hamburger.classList.toggle('active');
        });
        
        // Sluit menu bij klik op menu item
        const navLinks = document.querySelectorAll('.nav-menu a');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                hamburger.classList.remove('active');
            });
        });
    }
    
    // Smooth scrolling voor anker links
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                const offsetTop = targetElement.offsetTop - 80; // Account for fixed navbar
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Navbar scroll effect
    const navbar = document.querySelector('.navbar');
    let lastScrollTop = 0;
    
    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > 100) {
            navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
            navbar.style.backdropFilter = 'blur(10px)';
        } else {
            navbar.style.backgroundColor = '#ffffff';
            navbar.style.backdropFilter = 'none';
        }
        
        lastScrollTop = scrollTop;
    });
    
    // Animatie voor cards bij scrollen
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observeer alle cards voor animaties
    const animatedElements = document.querySelectorAll('.intro-card, .vak-card, .blok-card, .carriere-card, .highlight-item');
    animatedElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
    
    // Tooltip functionaliteit voor tags
    const tags = document.querySelectorAll('.tag');
    tags.forEach(tag => {
        tag.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.05)';
            this.style.boxShadow = '0 3px 10px rgba(0,103,79,0.3)';
        });
        
        tag.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
            this.style.boxShadow = 'none';
        });
    });
    
    // Parallax effect voor hero sectie
    const hero = document.querySelector('.hero');
    if (hero) {
        window.addEventListener('scroll', function() {
            const scrolled = window.pageYOffset;
            const rate = scrolled * -0.5;
            
            if (scrolled < hero.offsetHeight) {
                hero.style.transform = `translateY(${rate}px)`;
            }
        });
    }
    
    // Loading animation voor pagina
    window.addEventListener('load', function() {
        document.body.style.opacity = '0';
        document.body.style.transition = 'opacity 0.5s ease';
        
        setTimeout(() => {
            document.body.style.opacity = '1';
        }, 100);
    });
    
    // Scroll to top functionaliteit (wordt toegevoegd als gebruiker ver naar beneden scrollt)
    let scrollToTopButton;
    
    function createScrollToTopButton() {
        scrollToTopButton = document.createElement('button');
        scrollToTopButton.innerHTML = '↑';
        scrollToTopButton.className = 'scroll-to-top';
        scrollToTopButton.style.cssText = `
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: none;
            z-index: 1000;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,103,79,0.3);
        `;
        
        scrollToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        scrollToTopButton.addEventListener('mouseenter', function() {
            this.style.background = 'var(--accent-color)';
            this.style.transform = 'scale(1.1)';
        });
        
        scrollToTopButton.addEventListener('mouseleave', function() {
            this.style.background = 'var(--primary-color)';
            this.style.transform = 'scale(1)';
        });
        
        document.body.appendChild(scrollToTopButton);
    }
    
    // Toon/verberg scroll to top button
    window.addEventListener('scroll', function() {
        if (!scrollToTopButton) {
            createScrollToTopButton();
        }
        
        if (window.pageYOffset > 300) {
            scrollToTopButton.style.display = 'block';
        } else {
            scrollToTopButton.style.display = 'none';
        }
    });
    
    // Keyboard navigation verbetering
    document.addEventListener('keydown', function(e) {
        // Escape key sluit mobile menu
        if (e.key === 'Escape' && navMenu && navMenu.classList.contains('active')) {
            navMenu.classList.remove('active');
            hamburger.classList.remove('active');
        }
    });
    
    // Focus management voor toegankelijkheid
    const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    const modal = document.querySelector('.modal'); // Voor eventuele modals in de toekomst
    
    // Verbeterde rooster tabel scroll indicator
    const roosterTable = document.querySelector('.rooster-table');
    if (roosterTable) {
        function updateScrollIndicator() {
            const scrollLeft = roosterTable.scrollLeft;
            const scrollWidth = roosterTable.scrollWidth;
            const clientWidth = roosterTable.clientWidth;
            
            if (scrollWidth > clientWidth) {
                if (scrollLeft === 0) {
                    roosterTable.classList.add('scroll-start');
                    roosterTable.classList.remove('scroll-end');
                } else if (scrollLeft >= scrollWidth - clientWidth - 1) {
                    roosterTable.classList.add('scroll-end');
                    roosterTable.classList.remove('scroll-start');
                } else {
                    roosterTable.classList.remove('scroll-start', 'scroll-end');
                }
            }
        }
        
        roosterTable.addEventListener('scroll', updateScrollIndicator);
        window.addEventListener('resize', updateScrollIndicator);
        updateScrollIndicator(); // Initial check
    }
    
    // Preload critical images voor betere performance
    function preloadImages() {
        const images = [
            // Voeg hier belangrijke afbeeldingspaden toe indien nodig
        ];
        
        images.forEach(src => {
            const img = new Image();
            img.src = src;
        });
    }
    
    preloadImages();
    
    // Print functionaliteit
    function preparePrint() {
        window.print();
    }
    
    // Service Worker registratie voor offline functionaliteit (optioneel)
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').catch(err => {
            console.log('Service Worker registration failed');
        });
    }
    
    // Analytics events (vervang met echte analytics indien gewenst)
    function trackEvent(action, category = 'User Interaction') {
        // console.log(`Event: ${action} in ${category}`);
        // Hier zou je Google Analytics of andere tracking kunnen toevoegen
    }
    
    // Track belangrijke interacties
    document.querySelectorAll('.btn').forEach(btn => {
        btn.addEventListener('click', () => {
            trackEvent(`Button Click: ${btn.textContent.trim()}`);
        });
    });
    
    // Error handling voor development
    window.addEventListener('error', function(e) {
        console.error('JavaScript error:', e.error);
    });
    
    // Console log voor development
    console.log('🎓 Curio Software Development - Informatiesite geladen!');
    console.log('💚 Gebouwd met liefde voor onze toekomstige studenten');
});
