---
import Layout from '../layouts/Layout.astro';
Astro.response.status = 200;
---

<Layout
  title="404 - Không tìm thấy trang | TPHIMX"
  description="Trang bạn tìm kiếm không tồn tại hoặc đã bị gỡ bỏ. Quay lại trang chủ TPHIMX để tiếp tục trải nghiệm điện ảnh tuyệt đỉnh."
  slug="/404"
>
  <div class="relative flex min-h-[85vh] items-center justify-center overflow-hidden px-4 py-16">
    <!-- Cinematic Blur Backgrounds -->
    <div class="absolute top-1/4 left-1/4 h-[350px] w-[350px] rounded-full bg-primary/20 blur-[130px] pointer-events-none animate-pulse-slow"></div>
    <div class="absolute bottom-1/4 right-1/4 h-[400px] w-[400px] rounded-full bg-accent/15 blur-[160px] pointer-events-none animate-pulse-slower"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[500px] w-[500px] rounded-full bg-[#7c3aed]/5 blur-[200px] pointer-events-none"></div>

    <!-- Starfield / Cinema Dust Particles (Pure CSS) -->
    <div class="absolute inset-0 pointer-events-none opacity-30 select-none">
      <div class="absolute top-10 left-10 w-2 h-2 bg-white rounded-full animate-float" style="animation-delay: 0s; animation-duration: 8s;"></div>
      <div class="absolute top-1/3 right-12 w-1.5 h-1.5 bg-primary rounded-full animate-float" style="animation-delay: 2s; animation-duration: 10s;"></div>
      <div class="absolute bottom-20 left-1/5 w-1 h-1 bg-accent rounded-full animate-float" style="animation-delay: 4s; animation-duration: 7s;"></div>
      <div class="absolute bottom-1/3 right-1/4 w-2.5 h-2.5 bg-white/40 rounded-full animate-float" style="animation-delay: 1s; animation-duration: 9s;"></div>
      <div class="absolute top-1/4 left-1/3 w-1.5 h-1.5 bg-purple-400 rounded-full animate-float" style="animation-delay: 5s; animation-duration: 12s;"></div>
    </div>

    <div class="relative z-10 w-full max-w-xl rounded-[48px] border border-white/10 bg-black/40 p-8 md:p-16 text-center backdrop-blur-3xl shadow-[0_0_80px_rgba(0,0,0,0.9)] overflow-hidden group glass">
      
      <!-- Neon Corner Accents -->
      <div class="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-primary rounded-tl-[48px] opacity-40 group-hover:opacity-100 transition-opacity duration-700"></div>
      <div class="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-primary rounded-tr-[48px] opacity-40 group-hover:opacity-100 transition-opacity duration-700"></div>
      <div class="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-primary rounded-bl-[48px] opacity-40 group-hover:opacity-100 transition-opacity duration-700"></div>
      <div class="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-primary rounded-br-[48px] opacity-40 group-hover:opacity-100 transition-opacity duration-700"></div>

      <!-- Glowing Circle Path / Reel -->
      <div class="relative mx-auto mb-10 flex h-32 w-32 items-center justify-center rounded-full border border-white/10 bg-white/5 shadow-2xl">
        <div class="absolute inset-0 rounded-full bg-gradient-to-tr from-primary/20 via-transparent to-accent/20 animate-spin" style="animation-duration: 15s"></div>
        
        <!-- Inside Reel -->
        <div class="relative z-10 flex h-24 w-24 items-center justify-center rounded-full border border-white/5 bg-[#0f0f15]/80 shadow-inner group-hover:scale-105 transition-transform duration-500">
          <i class="fas fa-video-slash text-4xl text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent animate-flicker"></i>
        </div>
        
        <!-- Outer Glowing Halo -->
        <div class="absolute inset-0 rounded-full bg-primary/20 opacity-0 group-hover:opacity-100 blur-xl transition-all duration-700 scale-110 pointer-events-none"></div>
      </div>

      <!-- Big Flickering 404 Text -->
      <div class="relative mb-6">
        <h1 class="text-8xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-white via-gray-300 to-white md:text-9xl relative z-10 select-none">
          4<span class="text-primary text-glow-neon animate-flicker-strong">0</span>4
        </h1>
        <!-- Backshadow for 3D depth -->
        <div class="absolute inset-0 flex items-center justify-center opacity-10 blur-md translate-y-2 pointer-events-none">
          <span class="text-8xl md:text-9xl font-black tracking-tighter bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">404</span>
        </div>
      </div>

      <!-- Premium Subtitle -->
      <h2 class="text-lg font-black uppercase tracking-[0.2em] text-white">
        Tuyệt tác điện ảnh <span class="text-primary text-glow-neon">chưa bắt đầu</span>
      </h2>
      
      <p class="mt-4 text-xs font-medium leading-relaxed text-gray-400 max-w-sm mx-auto">
        Bộ phim hoặc phân cảnh bạn đang tìm kiếm không tồn tại, đã bị di dời hoặc đang được chúng tôi khởi chiếu ở một vũ trụ khác.
      </p>

      <!-- Interactive Navigation Actions -->
      <div class="mt-12 flex flex-col sm:flex-row gap-4 justify-center">
        <a
          href="/"
          class="flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-primary to-primary-dark px-8 py-4 text-xs font-black uppercase tracking-widest text-white hover:scale-105 transition-all shadow-[0_0_30px_rgba(124,58,237,0.4)] hover:shadow-[0_0_40px_rgba(124,58,237,0.6)] active:scale-95 duration-300"
        >
          <i class="fas fa-play text-[10px]"></i>
          Về trang chủ
        </a>
        <button
          onclick="window.history.back()"
          class="flex items-center justify-center gap-2 rounded-2xl bg-white/5 border border-white/10 px-8 py-4 text-xs font-black uppercase tracking-widest text-gray-300 hover:text-white hover:bg-white/10 hover:border-white/20 transition-all active:scale-95 duration-300"
        >
          <i class="fas fa-undo-alt text-[10px]"></i>
          Quay lại
        </button>
      </div>
    </div>
  </div>
</Layout>

<style>
  /* Keyframes for premium animations */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.35; }
  }
  @keyframes pulse-slower {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.15); opacity: 0.25; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
  }
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
    25%, 75% { opacity: 0.9; }
  }
  @keyframes flicker-strong {
    0%, 100%, 30%, 35%, 45%, 50%, 70%, 100% { opacity: 1; filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.8)); }
    33%, 48%, 72% { opacity: 0.4; filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.2)); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
  }
  .animate-pulse-slower {
    animation: pulse-slower 12s ease-in-out infinite;
  }
  .animate-float {
    animation: float infinite ease-in-out;
  }
  .animate-flicker {
    animation: flicker 4s infinite ease-in-out;
  }
  .animate-flicker-strong {
    animation: flicker-strong 6s infinite;
  }

  .text-glow-neon {
    text-shadow: 0 0 15px var(--primary), 0 0 30px rgba(124, 58, 237, 0.4);
  }

  .glass {
    background: rgba(15, 15, 20, 0.35);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
</style>