<nav>
  <a href="#" data-page="home">Home</a>
  <a href="#" data-page="about">About</a>
  <a href="#" data-page="contact">Contact</a>
</nav>
<main id="content">
  <h1>Home Page</h1>
  <p>Welcome to the home page!</p>
</main>

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 20px;
}

nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

a {
  text-decoration: none;
  font-size: 18px;
  color: blue;
  cursor: pointer;
}

/* View Transitions API Styling */
::view-transition-old(root) {
  animation: fadeOut 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

const pages = {
  home: `<h1>Home Page</h1><p>Welcome to the home page!</p>`,
  about: `<h1>About Page</h1><p>Learn more about us here.</p>`,
  contact: `<h1>Contact Page</h1><p>Get in touch with us.</p>`
};

document.querySelectorAll("nav a").forEach((link) => {
  link.addEventListener("click", (event) => {
    event.preventDefault();
    const page = event.target.dataset.page;

    if (document.startViewTransition) {
      document.startViewTransition(() => {
        document.getElementById("content").innerHTML = pages[page];
      });
    } else {
      document.getElementById("content").innerHTML = pages[page];
    }
  });
});