document.addEventListener('DOMContentLoaded', () => {
    // Highlight TOC and Sidebar based on scroll position
    const mainContent = document.getElementById('main-content');
    const sections = document.querySelectorAll('section[id]');
    
    // Sidebar Link Logic
    const sidebarLinks = document.querySelectorAll('.sidebar-link');
    const currentUrl = window.location.pathname;
    
    sidebarLinks.forEach(link => {
        // Simple check for demo purposes
        if(link.getAttribute('href') === currentUrl || (currentUrl === '/' && link.getAttribute('href') === '/index.html')) {
            link.classList.add('nav-item-active', 'font-medium');
            link.classList.remove('text-muted', 'hover:text-primary');
        }
    });

    // Intersection Observer for TOC
    const observerOptions = {
        root: mainContent,
        rootMargin: '-20% 0px -70% 0px', // Trigger when section is near top
        threshold: 0
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const id = entry.target.getAttribute('id');
                
                // Update TOC
                document.querySelectorAll('.toc-link').forEach(link => {
                    link.classList.remove('toc-item-active', 'font-medium');
                    link.classList.add('text-muted');
                    if (link.getAttribute('href') === `#${id}`) {
                        link.classList.add('toc-item-active', 'font-medium');
                        link.classList.remove('text-muted');
                    }
                });
            }
        });
    }, observerOptions);

    sections.forEach(section => observer.observe(section));
});