// Get all pages
const pages = {
    'page-a': document.getElementById('page-a'),
    'page-b': document.getElementById('page-b'),
    'page-c': document.getElementById('page-c'), // Achievement
    'page-d': document.getElementById('page-d'), // Records
    'page-e': document.getElementById('page-e'), // Customise
    'page-f': document.getElementById('page-f')  // Help
};

// Function to hide all pages and show the target one
function showPage(pageId) {
    // Hide all
    for (const key in pages) {
        pages[key].classList.add('hidden');
    }
    // Show target
    if(pages[pageId]) {
        pages[pageId].classList.remove('hidden');
    }
}

// Event Listeners for Menu
document.getElementById('menu-start').addEventListener('click', () => showPage('page-b'));
document.getElementById('menu-achievement').addEventListener('click', () => showPage('page-c'));
document.getElementById('menu-records').addEventListener('click', () => showPage('page-d'));
document.getElementById('menu-customise').addEventListener('click', () => showPage('page-e'));
document.getElementById('menu-help').addEventListener('click', () => showPage('page-f'));

// Event Listener for Page A Start Button
document.getElementById('start-button').addEventListener('click', () => showPage('page-b'));

// Frame Control Logic (Sync slider and input)
const frameSlider = document.getElementById('frame-slider');
const frameInput = document.getElementById('frame-input');

frameSlider.addEventListener('input', (e) => {
    frameInput.value = e.target.value;
    // Here you would add logic to debounce and update actual frame rate
});

frameInput.addEventListener('input', (e) => {
    frameSlider.value = e.target.value;
});