---
import Layout from '../layouts/Layout.astro';
---

<Layout title="404 - Page Not Found">
  <div
    class="relative flex min-h-[80vh] flex-col items-center justify-center overflow-hidden px-4 py-20 text-center"
    transition:animate="slide"
  >
    <!-- Animated background elements -->
    <div class="absolute inset-0 overflow-hidden">
      <div
        class="animate-blob absolute -top-20 -left-20 h-64 w-64 rounded-full bg-zinc-100 opacity-50 blur-3xl dark:bg-zinc-800/50"
      >
      </div>
      <div
        class="animate-blob animation-delay-2000 absolute top-1/2 right-1/4 h-96 w-96 rounded-full bg-zinc-200 opacity-30 blur-3xl dark:bg-zinc-800/30"
      >
      </div>
      <div
        class="animate-blob animation-delay-4000 absolute bottom-20 left-1/3 h-72 w-72 rounded-full bg-zinc-100 opacity-40 blur-3xl dark:bg-zinc-800/40"
      >
      </div>
    </div>

    <!-- Main content with animation -->
    <div class="relative z-10 mx-auto max-w-xl">
      <div class="glitch-wrapper">
        <h1
          class="glitch text-9xl leading-none font-bold text-zinc-900 sm:text-[12rem] dark:text-zinc-100"
          data-text="404"
        >
          404
        </h1>
      </div>

      <h2 class="mt-6 text-2xl font-bold text-zinc-800 sm:text-3xl dark:text-zinc-200">
        Page Not Found
      </h2>

      <p class="mx-auto mt-6 max-w-md text-lg text-zinc-600 dark:text-zinc-400">
        The page you're looking for does not exist.
      </p>

      <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
        <a
          href="/"
          class="group relative inline-flex items-center gap-2 overflow-hidden rounded-lg bg-zinc-900 px-6 py-3 text-zinc-100 shadow-lg transition-all duration-300 hover:bg-zinc-800 hover:shadow-xl dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
        >
          <span
            class="absolute inset-0 z-0 bg-gradient-to-r from-zinc-700 to-zinc-900 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-zinc-300 dark:to-zinc-100"
          >
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            class="relative z-10 h-5 w-5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
            >
            </path>
          </svg>
          <span class="relative z-10 font-medium">Return Home</span>
        </a>

        <button
          id="back-button"
          class="group inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-6 py-3 text-zinc-700 shadow-xs transition-all duration-300 hover:bg-zinc-100 hover:shadow-md dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            class="h-5 w-5 transition-transform duration-300 group-hover:-translate-x-1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
            >
            </path>
          </svg>
          <span class="font-medium">Go Back</span>
        </button>
      </div>

      <!-- Random fun fact -->
      <div
        class="mx-auto mt-16 max-w-md rounded-xl border border-zinc-100 bg-zinc-50 p-6 shadow-xs backdrop-blur-xs dark:border-zinc-700/50 dark:bg-zinc-800/50"
      >
        <h3 class="text-sm font-medium tracking-wider text-zinc-500 uppercase dark:text-zinc-400">
          Did you know?
        </h3>
        <p class="mt-2 text-sm text-zinc-700 dark:text-zinc-300" id="fun-fact">
          The 404 error code originated when CERN's web server displayed room 404 (their server
          room) as the error message when a file wasn't found.
        </p>
      </div>
    </div>
  </div>
</Layout>

<script>
  // Go back functionality
  document.getElementById('back-button')?.addEventListener('click', () => {
    window.history.back();
  });

  // Array of fun 404 facts
  const funFacts = [
    "The 404 error code originated when CERN's web server displayed room 404 (their server room) as the error message when a file wasn't found.",
    "In internet slang, '404' has become shorthand for something that's missing or someone who's clueless.",
    "Some websites turn their 404 pages into games, like Google's Pac-Man 404 page that once existed.",
    'The first web server was a NeXT computer used by Tim Berners-Lee at CERN, where the 404 error was born.',
    'Many companies use creative 404 pages as a way to showcase their brand personality and humor.',
    "The HTTP 1.0 specification from 1996 officially defined the 404 error as 'Not Found'.",
    'Studies show that well-designed 404 pages can reduce bounce rates by up to 30%.',
    'The most common cause of 404 errors is mistyped URLs.',
  ];

  // Display a random fun fact
  const funFactElement = document.getElementById('fun-fact');
  if (funFactElement) {
    const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
    funFactElement.textContent = randomFact;
  }
</script>

<style>
  /* Animation for floating blobs */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Glitch effect for 404 text */
  .glitch-wrapper {
    position: relative;
    display: inline-block;
  }

  .glitch {
    position: relative;
    display: inline-block;
    animation: glitch-skew 1s infinite linear alternate-reverse;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
  }

  .glitch::after {
    left: -2px;
    text-shadow:
      -2px 0 #00fff9,
      2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
  }

  @keyframes glitch-anim {
    0% {
      clip: rect(31px, 9999px, 94px, 0);
      transform: skew(0.85deg);
    }
    5% {
      clip: rect(70px, 9999px, 71px, 0);
      transform: skew(0.17deg);
    }
    10% {
      clip: rect(9px, 9999px, 85px, 0);
      transform: skew(0.4deg);
    }
    15% {
      clip: rect(47px, 9999px, 18px, 0);
      transform: skew(0.22deg);
    }
    20% {
      clip: rect(7px, 9999px, 78px, 0);
      transform: skew(0.96deg);
    }
    25% {
      clip: rect(53px, 9999px, 54px, 0);
      transform: skew(0.05deg);
    }
    30% {
      clip: rect(84px, 9999px, 52px, 0);
      transform: skew(0.94deg);
    }
    35% {
      clip: rect(46px, 9999px, 7px, 0);
      transform: skew(0.01deg);
    }
    40% {
      clip: rect(2px, 9999px, 66px, 0);
      transform: skew(0.66deg);
    }
    45% {
      clip: rect(34px, 9999px, 33px, 0);
      transform: skew(0.52deg);
    }
    50% {
      clip: rect(80px, 9999px, 73px, 0);
      transform: skew(0.9deg);
    }
    55% {
      clip: rect(8px, 9999px, 81px, 0);
      transform: skew(0.3deg);
    }
    60% {
      clip: rect(10px, 9999px, 86px, 0);
      transform: skew(0.85deg);
    }
    65% {
      clip: rect(36px, 9999px, 25px, 0);
      transform: skew(0.28deg);
    }
    70% {
      clip: rect(75px, 9999px, 31px, 0);
      transform: skew(0.46deg);
    }
    75% {
      clip: rect(46px, 9999px, 87px, 0);
      transform: skew(0.44deg);
    }
    80% {
      clip: rect(19px, 9999px, 40px, 0);
      transform: skew(0.07deg);
    }
    85% {
      clip: rect(85px, 9999px, 88px, 0);
      transform: skew(0.71deg);
    }
    90% {
      clip: rect(1px, 9999px, 89px, 0);
      transform: skew(0.76deg);
    }
    95% {
      clip: rect(44px, 9999px, 25px, 0);
      transform: skew(0.58deg);
    }
    100% {
      clip: rect(31px, 9999px, 26px, 0);
      transform: skew(0.6deg);
    }
  }

  @keyframes glitch-anim2 {
    0% {
      clip: rect(65px, 9999px, 65px, 0);
      transform: skew(0.16deg);
    }
    5% {
      clip: rect(8px, 9999px, 42px, 0);
      transform: skew(0.65deg);
    }
    10% {
      clip: rect(64px, 9999px, 30px, 0);
      transform: skew(0.42deg);
    }
    15% {
      clip: rect(29px, 9999px, 49px, 0);
      transform: skew(0.05deg);
    }
    20% {
      clip: rect(25px, 9999px, 56px, 0);
      transform: skew(0.09deg);
    }
    25% {
      clip: rect(76px, 9999px, 98px, 0);
      transform: skew(0.79deg);
    }
    30% {
      clip: rect(72px, 9999px, 3px, 0);
      transform: skew(0.12deg);
    }
    35% {
      clip: rect(20px, 9999px, 60px, 0);
      transform: skew(0.09deg);
    }
    40% {
      clip: rect(61px, 9999px, 47px, 0);
      transform: skew(0.45deg);
    }
    45% {
      clip: rect(29px, 9999px, 69px, 0);
      transform: skew(0.09deg);
    }
    50% {
      clip: rect(82px, 9999px, 96px, 0);
      transform: skew(0.05deg);
    }
    55% {
      clip: rect(33px, 9999px, 91px, 0);
      transform: skew(0.16deg);
    }
    60% {
      clip: rect(56px, 9999px, 23px, 0);
      transform: skew(0.01deg);
    }
    65% {
      clip: rect(46px, 9999px, 21px, 0);
      transform: skew(0.89deg);
    }
    70% {
      clip: rect(50px, 9999px, 1px, 0);
      transform: skew(0.85deg);
    }
    75% {
      clip: rect(82px, 9999px, 33px, 0);
      transform: skew(0.87deg);
    }
    80% {
      clip: rect(94px, 9999px, 46px, 0);
      transform: skew(0.64deg);
    }
    85% {
      clip: rect(48px, 9999px, 95px, 0);
      transform: skew(0.43deg);
    }
    90% {
      clip: rect(60px, 9999px, 10px, 0);
      transform: skew(0.29deg);
    }
    95% {
      clip: rect(85px, 9999px, 62px, 0);
      transform: skew(0.66deg);
    }
    100% {
      clip: rect(61px, 9999px, 58px, 0);
      transform: skew(0.74deg);
    }
  }

  @keyframes glitch-skew {
    0% {
      transform: skew(-1deg);
    }
    10% {
      transform: skew(0deg);
    }
    20% {
      transform: skew(0.5deg);
    }
    30% {
      transform: skew(-0.5deg);
    }
    40% {
      transform: skew(0.2deg);
    }
    50% {
      transform: skew(0deg);
    }
    60% {
      transform: skew(-0.5deg);
    }
    70% {
      transform: skew(0.8deg);
    }
    80% {
      transform: skew(-0.2deg);
    }
    90% {
      transform: skew(0.5deg);
    }
    100% {
      transform: skew(0deg);
    }
  }
</style>