function navigate(url, state = {}) {
  history.pushState(state, '', url);
  render(url); // Update page content
}

window.addEventListener('popstate', () => {
  render(window.location.pathname);
});

const routes = {
  '/': () => import('./pages/home.js'),
  '/about': () => import('./pages/about.js'),
  '/contact': () => import('./pages/contact.js')
};

// Navigate without page reload
document.querySelectorAll('a[data-link]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const url = link.getAttribute('href');
    navigate(url);
  });
});

async function navigate(url) {
  history.pushState({ url }, '', url);
  const page = routes[url];
  if (page) {
    const module = await page();
    module.render();
  }
}

// Handle back/forward
window.addEventListener('popstate', () => {
  navigate(window.location.pathname);
});