const pages = {
    home:    { title: "welcome" },
    contact: { title: "contact" },
    links:   { title: "links" },
    sitemap: { title: "sitemap" }
};

function switchPage(pageKey) {
    const page = pages[pageKey];
    const template = document.getElementById('page-' + pageKey);
    if (!page || !template) return;

    const contentDiv = document.getElementById('page-content');
    const toolbarTitle = document.getElementById('toolbar-title');

    location.hash = pageKey === 'home' ? '' : pageKey;

    contentDiv.style.opacity = 0;

    setTimeout(() => {
        contentDiv.innerHTML = '';
        contentDiv.appendChild(template.content.cloneNode(true));
        if (toolbarTitle) {
            toolbarTitle.textContent = page.title;
            toolbarTitle.setAttribute('data-text', page.title);
        }

        contentDiv.style.transition = 'opacity 0.3s ease';
        contentDiv.style.opacity = 1;
    }, 150);
}

document.addEventListener('DOMContentLoaded', () => {
    const hash = location.hash.replace('#', '');
    switchPage(pages[hash] ? hash : 'home');
});

window.addEventListener('hashchange', () => {
    const hash = location.hash.replace('#', '');
    switchPage(pages[hash] ? hash : 'home');
});