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

<BaseLayout title="Signal Lost" description="Page introuvable">
  <section class="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4 relative">
    <!-- Static noise overlay -->
    <div
      class="absolute inset-0 pointer-events-none opacity-20 mix-blend-screen"
      style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.95%22 numOctaves=%222%22 stitchTiles=%22stitch%22/></filter><rect width=%22300%22 height=%22300%22 filter=%22url(%23n)%22/></svg>'); background-size: 300px;"
    >
    </div>

    <div class="relative z-10 text-center max-w-xl mx-auto">
      <div class="flex items-center gap-2 justify-center mb-6">
        <span class="led led-red animate-led-red"></span>
        <p class="font-mono text-sm text-[color:var(--color-red)] uppercase tracking-[0.3em]">
          signal lost
        </p>
      </div>

      <h1
        class="stencil text-[10rem] md:text-[14rem] font-bold leading-none mb-6 flex justify-center gap-2"
        style="filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.4));"
      >
        <span class="text-[color:var(--color-cyan)] glow-text-cyan animate-flicker">4</span>
        <span class="text-[color:var(--color-magenta)] glow-text-magenta">0</span>
        <span class="text-[color:var(--color-cyan)] glow-text-cyan animate-flicker">4</span>
      </h1>

      <div class="font-mono text-xs text-[color:var(--color-text-muted)] uppercase tracking-[0.2em] mb-10 space-y-2">
        <p>
          <span class="text-[color:var(--color-magenta)]">&gt;</span> frequency not found in crate
        </p>
        <p>
          <span class="text-[color:var(--color-magenta)]">&gt;</span> rejoin the main feed
        </p>
      </div>

      <a href="/" class="btn-primary">
        &lt;&lt; retour au sound system
      </a>
    </div>
  </section>
</BaseLayout>
