script.js

document.addEventListener('DOMContentLoaded', () => {
    const navItems = document.querySelectorAll('.nav-links li');
    const sections = document.querySelectorAll('.view-section');

    // Navigation Logic
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            // Remove active classes
            navItems.forEach(nav => nav.classList.remove('active'));
            sections.forEach(sec => sec.classList.remove('active', 'hidden'));
            
            // Hide all sections
            sections.forEach(sec => {
                sec.style.display = 'none';
            });

            // Add active class to clicked nav
            item.classList.add('active');
            
            // Show corresponding section
            const tabId = item.getAttribute('data-tab');
            const targetSection = document.getElementById(tabId);
            if (targetSection) {
                targetSection.style.display = 'block';
                targetSection.classList.add('active');
            }
        });
    });

    // Load python code for the Code Explorer view
    fetch('eda.py')
        .then(response => {
            if (!response.ok) {
                throw new Error('Could not load eda.py');
            }
            return response.text();
        })
        .then(code => {
            const codeBlock = document.getElementById('code-block');
            codeBlock.textContent = code;
            // Tell Prism to re-highlight the new code
            if (window.Prism) {
                Prism.highlightElement(codeBlock);
            }
        })
        .catch(err => {
            document.getElementById('code-block').textContent = 'Error loading source code: ' + err.message;
        });

    // Modal (Lightbox) Logic
    const modal = document.getElementById("imageModal");
    const modalImg = document.getElementById("expandedImg");
    const captionText = document.getElementById("caption");
    const closeBtn = document.getElementsByClassName("close")[0];

    document.querySelectorAll('.img-container img').forEach(img => {
        img.addEventListener('click', function(){
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
        });
    });

    closeBtn.onclick = function() {
        modal.style.display = "none";
    }

    modal.onclick = function(e) {
        if(e.target !== modalImg) {
            modal.style.display = "none";
        }
    }
});