blackcanyontickets/src/pages/404.astro

---
import Layout from '../layouts/Layout.astro';
import PublicHeader from '../components/PublicHeader.astro';
---

<Layout title="Page Not Found - Black Canyon Tickets">
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30">
    <PublicHeader />
    
    <!-- 404 Hero Section -->
    <section class="relative overflow-hidden min-h-screen flex items-center justify-center">
      <!-- Animated Background -->
      <div class="absolute inset-0 opacity-30">
        <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full blur-3xl animate-pulse delay-1000"></div>
        <div class="absolute top-1/2 right-1/3 w-48 h-48 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full blur-3xl animate-pulse delay-500"></div>
      </div>
      
      <!-- Floating Elements -->
      <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-20 left-20 w-8 h-8 bg-blue-200 rounded-full animate-float opacity-60"></div>
        <div class="absolute top-40 right-32 w-6 h-6 bg-purple-200 rounded-full animate-float opacity-50" style="animation-delay: 1s;"></div>
        <div class="absolute bottom-40 left-1/3 w-10 h-10 bg-pink-200 rounded-full animate-float opacity-40" style="animation-delay: 2s;"></div>
        <div class="absolute bottom-20 right-20 w-12 h-12 bg-cyan-200 rounded-full animate-float opacity-70" style="animation-delay: 1.5s;"></div>
      </div>
      
      <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <!-- 404 Illustration -->
        <div class="mb-12">
          <div class="relative inline-block">
            <!-- Large 404 Text with Gradient -->
            <h1 class="text-[12rem] sm:text-[16rem] lg:text-[20rem] font-black leading-none">
              <span class="bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 bg-clip-text text-transparent drop-shadow-2xl">
                404
              </span>
            </h1>
            
            <!-- Floating Calendar Icon -->
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-bounce">
              <div class="w-24 h-24 bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-2xl flex items-center justify-center transform rotate-12 hover:rotate-0 transition-transform duration-500">
                <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Error Message -->
        <div class="mb-12">
          <h2 class="text-4xl lg:text-6xl font-light text-gray-900 mb-6 tracking-tight">
            Oops! Event Not Found
          </h2>
          <p class="text-xl lg:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
            It seems like this page decided to skip the party. Let's get you back to where the action is.
          </p>
          
          <!-- Search Suggestion -->
          <div class="bg-white/70 backdrop-blur-lg border border-white/50 rounded-2xl p-8 shadow-2xl max-w-lg mx-auto mb-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Looking for something specific?</h3>
            <div class="relative">
              <input 
                type="text" 
                id="error-search"
                placeholder="Search events..." 
                class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              />
              <button 
                id="error-search-btn"
                class="absolute right-2 top-2 p-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200"
              >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
          <a 
            href="/calendar" 
            class="group inline-flex items-center space-x-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300"
          >
            <svg class="w-6 h-6 group-hover:animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            <span>Browse All Events</span>
          </a>
          
          <a 
            href="/" 
            class="group inline-flex items-center space-x-3 bg-white border-2 border-gray-200 hover:border-gray-300 text-gray-700 hover:text-gray-900 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
          >
            <svg class="w-6 h-6 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            <span>Go Home</span>
          </a>
        </div>
        
        <!-- Popular Suggestions -->
        <div class="max-w-2xl mx-auto">
          <h3 class="text-lg font-semibold text-gray-800 mb-6">Or explore these popular sections:</h3>
          <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <a 
              href="/calendar?featured=true" 
              class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
            >
              <div class="text-2xl mb-2 group-hover:animate-pulse">⭐</div>
              <div class="text-sm font-medium text-gray-700">Featured Events</div>
            </a>
            
            <a 
              href="/calendar?category=music" 
              class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
            >
              <div class="text-2xl mb-2 group-hover:animate-pulse">🎵</div>
              <div class="text-sm font-medium text-gray-700">Music</div>
            </a>
            
            <a 
              href="/calendar?category=arts" 
              class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
            >
              <div class="text-2xl mb-2 group-hover:animate-pulse">🎨</div>
              <div class="text-sm font-medium text-gray-700">Arts</div>
            </a>
            
            <a 
              href="/calendar?category=community" 
              class="group p-4 bg-white/50 backdrop-blur-sm border border-white/50 rounded-xl hover:bg-white/70 hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
            >
              <div class="text-2xl mb-2 group-hover:animate-pulse">🤝</div>
              <div class="text-sm font-medium text-gray-700">Community</div>
            </a>
          </div>
        </div>
      </div>
    </section>
  </div>
</Layout>

<style>
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes pulse-glow {
    0%, 100% { 
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }
    50% { 
      box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
    }
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
  }
  
  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  /* Interactive hover effects */
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
  }
</style>

<script>
  // Search functionality from 404 page
  const errorSearch = document.getElementById('error-search');
  const errorSearchBtn = document.getElementById('error-search-btn');
  
  function performSearch() {
    const query = errorSearch.value.trim();
    if (query) {
      window.location.href = `/calendar?search=${encodeURIComponent(query)}`;
    }
  }
  
  errorSearchBtn?.addEventListener('click', performSearch);
  
  errorSearch?.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      performSearch();
    }
  });
  
  // Add some interactive animations on page load
  document.addEventListener('DOMContentLoaded', () => {
    // Animate elements on scroll/load
    const animateElements = document.querySelectorAll('.animate-fade-in-up');
    animateElements.forEach((el, index) => {
      setTimeout(() => {
        el.style.animation = `fadeInUp 0.6s ease-out ${index * 0.1}s both`;
      }, 100);
    });
  });
</script>