---
import Icon from '../components/Icon.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getRoadmapIds } from '../lib/roadmap';

const roadmapIds = await getRoadmapIds();
const legacyRoadmapUrls = roadmapIds.map((id) => `/${id}/`);
---

<BaseLayout title='Page not found' permalink={'/404'}>
  <!-- Legacy roadmp pages handling -->
  <script slot='after-header' define:vars={{ legacyRoadmapUrls }}>
    // If it's a roadmap page and it ends with a slash
    // redirect to the same page without the slash
    if (legacyRoadmapUrls.includes(window.location.pathname)) {
      window.location.pathname = window.location.pathname.slice(0, -1);
    }
  </script>

  <div class='bg-gray-100'>
    <div class='py-10 md:py-32 container flex flex-col md:flex-row items-center justify-center gap-7'>
      <Icon icon='construction' class='hidden md:block' />
      <div class='text-left md:text-left'>
        <h1
          class='font-extrabold text-transparent text-2xl leading-normal md:text-5xl md:leading-normal bg-clip-text bg-gradient-to-t from-black to-gray-600'
        >
          Page not found!
        </h1>
        <p class='text-md md:text-xl mb-2'>Sorry, we couldn't find the page you are looking for.</p>
        <p>
          <a class='underline text-blue-700' href='/'>Homepage</a> &middot; <a
            href='/roadmaps'
            class='underline text-blue-700'>Roadmaps</a
          > &middot; <a href='/videos' class='underline text-blue-700'>Videos</a>
        </p>
      </div>
    </div>
  </div>
</BaseLayout>