---
export const prerender = true;

import BaseLayout from "../layouts/BaseLayout.astro";
import CtaLink from "../components/CtaLink.astro";
import { LINKS } from "../lib/links";
---

<BaseLayout
  title="Page Not Found | SanthoshJ"
  description="The page you're looking for doesn't exist. Explore tech videos, podcasts, and more."
  canonicalPath="/404"
>
  <section class="error-hero">
    <div class="error-code" aria-label="Error code">404</div>
    <h1 class="error-title">Page not found</h1>
    <p class="error-message">
      The page you're looking for doesn't exist or has been moved.
      <br />
      Let's get you back on track.
    </p>
    <div class="error-actions">
      <a href="/" class="error-btn error-btn-primary"> Go home </a>
      <a href="/videos" class="error-btn error-btn-secondary"> Browse videos </a>
    </div>
    <div class="error-divider" />
    <div class="error-suggestions">
      <h2 class="error-suggestions-title">Popular destinations</h2>
      <div class="error-links">
        <CtaLink
          platform="youtube"
          placement="error_page"
          url={LINKS.youtubeChannel}
          label="YouTube"
        />
        <CtaLink
          platform="podcast"
          placement="error_page"
          url={LINKS.podcast}
          label="Podcast"
        />
        <CtaLink
          platform="instagram"
          placement="error_page"
          url={LINKS.instagramProfile}
          label="Instagram"
        />
      </div>
    </div>
  </section>
</BaseLayout>