/* NAVIGATION (SPA MODE) */
export function initNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const sections = document.querySelectorAll('section');

    function switchSection(targetId) {
        // Update Nav State
        navItems.forEach(nav => {
            if (nav.dataset.target === targetId) {
                nav.classList.add('active');
            } else {
                nav.classList.remove('active');
            }
        });

        // Update Section State
        sections.forEach(sec => {
            if (sec.id === targetId) {
                sec.classList.add('active-section');
                // Scroll to top of main area when switching
                const main = document.querySelector('main');
                if (main) main.scrollTop = 0;
            } else {
                sec.classList.remove('active-section');
            }
        });
    }

    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const targetId = item.getAttribute('data-target');
            if (document.getElementById(targetId)) {
                switchSection(targetId);
            } else {
                console.warn('Target section not found:', targetId);
            }
        });
    });

    // Handle Hash Navigation (Deep Linking)
    function handleHash() {
        const hash = window.location.hash.replace('#', '');
        if (hash && document.getElementById(hash)) {
            switchSection(hash);
        } else {
            // Default to 'intro' or first active if present
            const activeNav = document.querySelector('.nav-item.active');
            if (activeNav) {
                const target = activeNav.getAttribute('data-target');
                if (target) switchSection(target);
            }
        }
    }

    // Initial Load
    handleHash();

    // Handle hash changes (optional, but good for UX)
    window.addEventListener('hashchange', handleHash);
}
