document.addEventListener('DOMContentLoaded', function() {
    // Menu category switching
    const tabButtons = document.querySelectorAll('[data-tab]');
    const menuContents = document.querySelectorAll('.menu-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const targetId = `${button.dataset.tab}-content`;
            
            // Update button styles
            tabButtons.forEach(btn => {
                const isActive = btn === button;
                btn.classList.toggle('bg-pizza-red', isActive);
                btn.classList.toggle('text-white', isActive);
                btn.classList.toggle('bg-gray-200', !isActive);
                btn.classList.toggle('dark:bg-pizza-darker', !isActive);
                btn.classList.toggle('text-gray-700', !isActive);
                btn.classList.toggle('dark:text-white', !isActive);
            });

            // Show/hide content
            menuContents.forEach(content => {
                content.classList.toggle('hidden', content.id !== targetId);
            });
        });
    });

    // Pizza price group toggles
    const priceGroupHeaders = document.querySelectorAll('.price-group-header');
    priceGroupHeaders.forEach(header => {
        header.addEventListener('click', () => {
            const content = header.nextElementSibling;
            const arrow = header.querySelector('svg');
            
            // Toggle content visibility
            content.classList.toggle('hidden');
            
            // Rotate arrow
            arrow.style.transform = content.classList.contains('hidden') 
                ? 'rotate(0deg)' 
                : 'rotate(180deg)';
        });
    });
});