// Tab functionality for commission rates
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const tabsContainer = document.querySelector('.tabs-container');

    // Function to switch tabs
    function switchTab(tabId) {
        // Hide all tab panes
        tabPanes.forEach(pane => {
            pane.classList.remove('active');
        });

        // Remove active class from all buttons
        tabButtons.forEach(button => {
            button.classList.remove('active');
        });

        // Show the selected tab pane
        const selectedPane = document.getElementById(tabId);
        if (selectedPane) {
            selectedPane.classList.add('active');
        }

        // Activate the clicked button
        const activeButton = document.querySelector(`[data-tab="${tabId}"]`);
        if (activeButton) {
            activeButton.classList.add('active');
        }

        // Update URL hash for deep linking without scrolling
        if (history.replaceState) {
            history.replaceState(null, null, '#' + tabId);
        } else {
            window.location.hash = tabId;
        }

        // Smoothly scroll to the top of the tabs container with offset
        if (tabsContainer) {
            const containerTop = tabsContainer.getBoundingClientRect().top + window.pageYOffset;
            const offset = 100; // Adjust this value to control how much to scroll
            window.scrollTo({
                top: containerTop - offset,
                behavior: 'smooth'
            });
        }
    }

    // Add click event listeners to all tab buttons
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const tabId = this.getAttribute('data-tab');
            switchTab(tabId);
        });
    });

    // Check for hash in URL on page load
    if (window.location.hash) {
        const hash = window.location.hash.substring(1);
        if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
            switchTab(hash);
        }
    }

    // Handle browser back/forward navigation
    window.addEventListener('hashchange', function() {
        const hash = window.location.hash.substring(1);
        if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
            switchTab(hash);
        }
    });
});