---
import { readSingleton } from '@directus/sdk';

import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
import GoBack from '@/components/ui/buttons/GoBack.astro';

const global = await directus.request(readSingleton('site_global'));
---

<BaseLayout
  title="Page Not Found"
  description="Page Not Found"
  structuredData={{
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    inLanguage: 'en-US',
    '@id': Astro.url.href,
    url: Astro.url.href,
    name: `Page Not Found | ${global.name}`,
    description: 'Page Not Found',
    isPartOf: {
      '@type': 'WebSite',
      url: global.site_url,
      name: global.name,
      description: global.about,
    },
  }}
>
  <section class="mt-20 grid place-content-center">
    <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
      <div class="mx-auto max-w-screen-sm text-center">
        <div class="glitch-wrapper smooth-reveal">
          <h1
            class="glitch text-9xl leading-none font-bold text-neutral-900 sm:text-[12rem] dark:text-neutral-100"
            data-text="404"
          >
            Not Found
          </h1>
        </div>

        <h1
          class="text-dark smooth-reveal mb-4 text-7xl font-extrabold text-yellow-500 lg:text-9xl dark:text-yellow-400"
        >
          {`Page Not Found - ${global.name}`}
        </h1>
        <div
          class="smooth-reveal mx-auto mt-16 max-w-md rounded-xl bg-neutral-100 p-6 shadow-xs dark:border-neutral-700/50 dark:bg-stone-800"
        >
          <h3
            class="text-sm font-medium tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
          >
            Did you know?
          </h3>
          <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-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
          class="smooth-reveal mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
        >
          <GoBack title="Go Back" />
          <PrimaryCTA title="Return Home" url={global.site_url} noArrow addHome />
        </div>
      </div>
    </div>
  </section>
</BaseLayout>

<script>
  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;
  }

  // Add smooth reveal animations for content after loading
  document.addEventListener('astro:page-load', () => {
    const animateContent = () => {
      // Animate group 1
      const smoothReveal = document.querySelectorAll('.smooth-reveal');
      smoothReveal.forEach((el, index) => {
        setTimeout(
          () => {
            el.classList.add('animate-reveal');
          },
          100 + index * 150
        );
      });
    };

    animateContent();
  });
</script>

<style>
  /* 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>