// main.js

document.addEventListener('DOMContentLoaded', () => {

    // Mobile Menu Toggle functioning
    const menuToggle = document.querySelector('.menu-toggle');
    const desktopNav = document.querySelector('.desktop-nav');

    if (menuToggle && desktopNav) {
        menuToggle.addEventListener('click', () => {
            // Note: In a full app, this would toggle a mobile-specific sidebar.
            // For this layout, we're just creating a simple toggle response to demonstrate JS.
            const isVisible = desktopNav.style.display === 'flex';
            if (isVisible) {
                desktopNav.style.display = 'none';
                menuToggle.innerHTML = '<i class="fa-solid fa-bars"></i>';
            } else {
                desktopNav.style.display = 'flex';
                desktopNav.style.position = 'absolute';
                desktopNav.style.top = '100%';
                desktopNav.style.left = '0';
                desktopNav.style.width = '100%';
                desktopNav.style.backgroundColor = '#fff';
                desktopNav.style.padding = '20px';
                desktopNav.style.boxShadow = '0 10px 20px rgba(0,0,0,0.1)';
                desktopNav.style.flexDirection = 'column';
                menuToggle.innerHTML = '<i class="fa-solid fa-xmark"></i>';
            }
        });
    }

    // Tabs functionality in Courses Section
    const tabs = document.querySelectorAll('.course-tabs li');

    // Quick demo capability for tab clicking
    tabs.forEach(tab => {
        tab.addEventListener('click', (e) => {
            // Remove active class from all tabs
            tabs.forEach(t => t.classList.remove('active'));
            // Add active class to clicked tab
            e.target.classList.add('active');

            // Here you would also filter courses based on data attributes
            // console.log(`Filtering for category: ${e.target.innerText}`);
        });
    });

    // Simple sticky header adjustment (already handled mostly via CSS 'sticky')
    // but we could add a shadow or shrink effect on scroll
    window.addEventListener('scroll', () => {
        const header = document.querySelector('.header');
        if (window.scrollY > 50) {
            header.style.boxShadow = '0 5px 20px rgba(0,0,0,0.1)';
            header.style.padding = '15px 0';
        } else {
            header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
            header.style.padding = '20px 0';
        }
    });

});
