const viewport = document.getElementById('viewport');
const urlBar = document.querySelector('.url-bar');

// Simple "routing"
const pages = {
    'home': '<h1>Welcome</h1><p>You are browsing the retro web.</p>',
    'about': '<h1>About</h1><p>This is a simulation of a 1990s browser.</p>',
    'links': '<h1>Links</h1><ul><li><a href="#" onclick="loadPage(\'home\')">Home</a></li></ul>'
};

function loadPage(pageKey) {
    // Update URL bar
    urlBar.value = `http://neocities.org/${pageKey}`;
    
    // Add a small delay to simulate loading
    viewport.style.opacity = 0.5;
    setTimeout(() => {
        viewport.innerHTML = pages[pageKey];
        viewport.style.opacity = 1;
    }, 200);
}

// Bind click events to links inside the viewport
document.addEventListener('click', (e) => {
    if(e.target.tagName === 'A' && e.target.getAttribute('onclick')) {
        e.preventDefault();
        // Extract the function call (simple parsing)
        const func = e.target.getAttribute('onclick');
        eval(func); // Note: eval is generally unsafe, but fine for a simple local demo
    }
});