---
import LandingLayout from '@/layouts/LandingLayout.astro';
import Button from '@/components/ui/form/Button/Button.astro';
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
---

<LandingLayout
  title="Page not found"
  description="The page you're looking for has either been moved, deleted, or never existed in the first place."
  noindex
>
  <section class="relative min-h-[calc(100vh-8rem)] flex items-center justify-center overflow-hidden pt-16">
    <!-- Background Effects -->
    <div class="absolute inset-0 bg-grid-pattern [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_70%)] pointer-events-none opacity-40"></div>
    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-brand-500/15 rounded-full blur-[120px] pointer-events-none"></div>
    <div class="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-brand-600/10 rounded-full blur-[100px] pointer-events-none"></div>

    <div class="relative container px-6">
      <div class="max-w-2xl mx-auto text-center">
        <!-- Animated 404 -->
        <div class="relative mb-8">
          <div class="error-code font-display text-[10rem] md:text-[14rem] lg:text-[18rem] font-bold leading-none tracking-tighter select-none">
            <span class="inline-block error-digit" style="animation-delay: 0s;">4</span>
            <span class="inline-block error-digit text-transparent bg-clip-text bg-gradient-to-br from-brand-400 via-brand-500 to-brand-600" style="animation-delay: 0.1s;">0</span>
            <span class="inline-block error-digit" style="animation-delay: 0.2s;">4</span>
          </div>
          <!-- Glow effect behind the 0 -->
          <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <div class="w-32 h-32 md:w-48 md:h-48 bg-brand-500/20 rounded-full blur-[60px] animate-pulse"></div>
          </div>
        </div>

        <!-- Copy -->
        <h1 class="font-display text-2xl md:text-3xl font-bold text-foreground mb-4">
          Diese Seite existiert nicht
        </h1>

        <p class="text-lg text-foreground-muted max-w-md mx-auto mb-10">
          Die gesuchte Seite wurde verschoben, gelöscht oder existiert nicht.
        </p>

        <!-- CTAs -->
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
          <Button href="/" size="lg">
            <Icon name="arrow-left" size="sm" />
            Zur Startseite
          </Button>
          <Button href="/login" variant="outline" size="lg">
            Login
          </Button>
        </div>

        <!-- Quick Links -->
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/50 border border-border">
          <span class="text-sm text-foreground-muted">Quick Links:</span>
          <a
            href="/#features"
            class="text-sm font-medium text-foreground hover:text-brand-500 transition-colors"
          >
            Features
          </a>
          <span class="text-foreground-subtle">|</span>
          <a
            href="/register"
            class="text-sm font-medium text-foreground hover:text-brand-500 transition-colors"
          >
            Registrieren
          </a>
        </div>
      </div>
    </div>
  </section>
</LandingLayout>

<style>
  .error-code {
    color: var(--foreground);
    opacity: 0.15;
  }

  .error-digit {
    animation: float 3s ease-in-out infinite;
  }

  .error-digit:nth-child(2) {
    opacity: 1;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  /* Dark mode adjustments */
  :global(.dark) .error-code {
    opacity: 0.1;
  }

  :global(.dark) .error-digit:nth-child(2) {
    opacity: 1;
  }
</style>
