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

<Layout title="Server Error - Black Canyon Tickets">
  <div class="min-h-screen bg-gradient-to-br from-red-50 via-white to-orange-50/30">
    <PublicHeader />
    
    <!-- 500 Hero Section -->
    <section class="relative overflow-hidden min-h-screen flex items-center justify-center">
      <!-- Animated Background -->
      <div class="absolute inset-0 opacity-20">
        <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-gradient-to-br from-red-400 to-orange-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-orange-400 to-red-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-yellow-400 to-orange-500 rounded-full blur-3xl animate-pulse delay-500"></div>
      </div>
      
      <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <!-- Error Illustration -->
        <div class="mb-12">
          <div class="relative inline-block">
            <!-- Large 500 Text -->
            <h1 class="text-[8rem] sm:text-[12rem] lg:text-[16rem] font-black leading-none">
              <span class="bg-gradient-to-br from-red-200 via-orange-300 to-red-400 bg-clip-text text-transparent drop-shadow-2xl">
                500
              </span>
            </h1>
            
            <!-- Floating Warning 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-red-600 to-orange-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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"></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">
            Something Went Wrong
          </h2>
          <p class="text-xl lg:text-2xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
            Our servers are experiencing some technical difficulties. Don't worry, our team has been notified and is working to fix this.
          </p>
          
          <!-- Status Card -->
          <div class="bg-white/70 backdrop-blur-lg border border-red-200/50 rounded-2xl p-8 shadow-2xl max-w-lg mx-auto mb-8">
            <div class="flex items-center justify-center space-x-3 mb-4">
              <div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
              <span class="text-lg font-semibold text-gray-900">Server Status</span>
            </div>
            <p class="text-gray-600 mb-4">
              We're working hard to restore full functionality. This is usually resolved within a few minutes.
            </p>
            <div class="text-sm text-gray-500">
              Error Code: <span class="font-mono bg-gray-100 px-2 py-1 rounded">TEMP_500</span>
            </div>
          </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
          <button 
            onclick="window.location.reload()" 
            class="group inline-flex items-center space-x-3 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
            <span>Try Again</span>
          </button>
          
          <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>
        
        <!-- Support Contact -->
        <div class="max-w-lg mx-auto">
          <div class="bg-gradient-to-r from-gray-50 to-gray-100 border border-gray-200 rounded-2xl p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">Need Immediate Help?</h3>
            <p class="text-gray-600 mb-4 text-sm">
              If this error persists, please reach out to our support team.
            </p>
            <a 
              href="/support" 
              class="inline-flex items-center space-x-2 text-blue-600 hover:text-blue-700 font-medium transition-colors"
            >
              <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              <span>Contact Support</span>
            </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);
    }
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
  }
</style>

<script>
  // Auto-retry functionality
  let retryCount = 0;
  const maxRetries = 3;
  
  // Show retry countdown if this is an automatic retry
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('retry')) {
    setTimeout(() => {
      if (retryCount < maxRetries) {
        window.location.reload();
        retryCount++;
      }
    }, 5000);
  }
  
  // Add interactive animations on page load
  document.addEventListener('DOMContentLoaded', () => {
    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>