---
import Layout from '../layouts/Layout.astro';
import PublicHeader from '../components/PublicHeader.astro';
import ComparisonSection from '../components/ComparisonSection.astro';
// Test deployment script - 2025-01-12
---

<Layout title="Black Canyon Tickets - Premium Event Ticketing Platform">
  <div class="min-h-screen relative overflow-hidden">
    <!-- Premium Hero Background with Animated Gradients -->
    <div class="absolute inset-0" style="background: var(--bg-gradient);">
      <!-- Animated Background Elements -->
      <div class="absolute inset-0 opacity-30">
        <!-- Large flowing orbs -->
        <div class="absolute top-16 left-16 w-80 h-80 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-1); animation-duration: 20s;"></div>
        <div class="absolute bottom-16 right-16 w-96 h-96 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-2); animation-duration: 25s; animation-delay: -5s;"></div>
        <div class="absolute top-1/3 right-1/4 w-72 h-72 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-3); animation-duration: 18s; animation-delay: -10s;"></div>
        <div class="absolute bottom-1/3 left-1/4 w-64 h-64 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-4); animation-duration: 22s; animation-delay: -15s;"></div>
        <div class="absolute top-2/3 left-1/2 w-56 h-56 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-5); animation-duration: 16s; animation-delay: -8s;"></div>
        
        <!-- Smaller accent orbs -->
        <div class="absolute top-1/4 left-3/4 w-32 h-32 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-1); animation-duration: 3s;"></div>
        <div class="absolute bottom-1/4 left-1/3 w-24 h-24 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-2); animation-duration: 4s; animation-delay: -1s;"></div>
        <div class="absolute top-3/4 right-1/3 w-40 h-40 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-3); animation-duration: 5s; animation-delay: -2s;"></div>
      </div>
      
      <!-- Geometric Patterns -->
      <div class="absolute inset-0" style="opacity: var(--grid-opacity, 0.1);">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
          <defs>
            <!-- Fine grid pattern -->
            <pattern id="grid" width="3" height="3" patternUnits="userSpaceOnUse">
              <path d="M 3 0 L 0 0 0 3" fill="none" stroke="currentColor" stroke-width="0.2" style="color: var(--grid-pattern);"/>
            </pattern>
            <!-- Dots pattern -->
            <pattern id="dots" width="8" height="8" patternUnits="userSpaceOnUse">
              <circle cx="4" cy="4" r="0.5" fill="currentColor" style="color: var(--grid-pattern); opacity: 0.3;"/>
            </pattern>
            <!-- Diagonal lines -->
            <pattern id="diagonals" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M 0 10 L 10 0" stroke="currentColor" stroke-width="0.1" style="color: var(--grid-pattern); opacity: 0.2;"/>
            </pattern>
          </defs>
          <rect width="100" height="100" fill="url(#grid)" />
          <rect width="100" height="100" fill="url(#dots)" />
          <rect width="100" height="100" fill="url(#diagonals)" />
        </svg>
      </div>
      
      <!-- Premium geometric shapes -->
      <div class="absolute inset-0 opacity-10">
        <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-purple-400 rounded-full animate-ping" style="animation-duration: 4s;"></div>
        <div class="absolute top-3/4 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-ping" style="animation-duration: 6s; animation-delay: -2s;"></div>
        <div class="absolute bottom-1/4 left-3/4 w-1.5 h-1.5 bg-indigo-400 rounded-full animate-ping" style="animation-duration: 5s; animation-delay: -4s;"></div>
        
        <!-- Floating geometric shapes -->
        <div class="absolute top-1/3 right-1/5 w-8 h-8 border border-purple-300 rounded rotate-45 animate-spin" style="animation-duration: 30s;"></div>
        <div class="absolute bottom-1/3 left-1/6 w-6 h-6 border border-blue-300 rounded-full animate-spin" style="animation-duration: 25s; animation-direction: reverse;"></div>
        <div class="absolute top-2/3 right-2/5 w-4 h-4 bg-gradient-to-r from-purple-400 to-blue-400 rounded-sm animate-bounce" style="animation-duration: 8s;"></div>
      </div>
    </div>

    <!-- Navigation -->
    <PublicHeader />
    

    <!-- Hero Section -->
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24 lg:pt-40 lg:pb-32">
      <div class="text-center">
        <!-- Badge -->
        <div class="inline-flex items-center px-4 py-2 rounded-full backdrop-blur-lg mb-8" style="background: var(--glass-bg); border: 1px solid var(--glass-border);">
          <span class="text-sm font-medium flex items-center gap-2" style="color: var(--glass-text-secondary);">
            <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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
            </svg>
            Premium Event Ticketing Platform
          </span>
        </div>
        
        <!-- Main Heading -->
        <h1 class="text-5xl lg:text-7xl font-light mb-6 tracking-tight" style="color: var(--glass-text-primary);">
          Premium Ticketing for
          <span class="font-bold" style="color: var(--glass-text-accent);">
            Colorado's Elite
          </span>
        </h1>
        
        <!-- Subheading -->
        <p class="text-xl lg:text-2xl mb-12 max-w-3xl mx-auto leading-relaxed" style="color: var(--glass-text-secondary);">
          Elegant self-service platform designed for upscale venues, prestigious events, and discerning organizers
        </p>
        
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
          <a href="/login-new" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 hover:shadow-xl">
            Start Selling Tickets
          </a>
          <a href="/calendar" class="backdrop-blur-xl px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105" style="background: var(--glass-bg-button); border: 1px solid var(--glass-border); color: var(--glass-text-primary);">
            View Events
          </a>
        </div>
        
        <!-- Feature Points -->
        <div class="flex flex-wrap justify-center gap-6 text-sm" style="color: var(--glass-text-tertiary);">
          <span class="flex items-center">
            <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
            No setup fees
          </span>
          <span class="flex items-center">
            <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
            Instant payouts
          </span>
          <span class="flex items-center">
            <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
            Mobile-first design
          </span>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <section id="features" class="relative z-10 py-20 lg:py-32">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h3 class="text-3xl lg:text-5xl font-light mb-6" style="color: var(--glass-text-primary);">
            Why Choose
            <span class="font-bold" style="color: var(--glass-text-accent);">
              Black Canyon
            </span>
          </h3>
          <p class="text-lg max-w-2xl mx-auto" style="color: var(--glass-text-secondary);">
            Built specifically for Colorado's premium venues and high-end events
          </p>
        </div>
        
        <!-- Feature Tiles Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
          
          <!-- Quick Setup Tile -->
          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--glass-text-accent);">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
              </svg>
            </div>
            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Quick Setup</h4>
            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
              Create professional events in minutes with our intuitive dashboard
            </p>
            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
              Learn More
            </button>
          </div>
          
          <!-- Real Experience Tile -->
          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--success-color);">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </div>
            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Built by Event Pros</h4>
            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
              Created by people who've actually worked ticket gates and run events
            </p>
            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
              Learn More
            </button>
          </div>
          
          <!-- Analytics Tile -->
          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--premium-gold);">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Live Analytics</h4>
            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
              Real-time sales tracking with comprehensive reporting
            </p>
            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
              Learn More
            </button>
          </div>
          
          <!-- Human Support Tile -->
          <div class="group backdrop-blur-lg rounded-xl p-6 text-center transition-all duration-300 hover:transform hover:scale-105" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4" style="background: var(--warning-color);">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            </div>
            <h4 class="text-xl font-semibold mb-2" style="color: var(--glass-text-primary);">Real Human Support</h4>
            <p class="text-sm mb-4" style="color: var(--glass-text-tertiary);">
              Actual humans help you before and during your event
            </p>
            <button class="font-medium text-sm transition-colors" style="color: var(--glass-text-accent);">
              Get Help
            </button>
          </div>
          
        </div>
      </div>
    </section>

    <!-- Competitive Comparison Section -->
    <ComparisonSection />

    <!-- Call to Action -->
    <section class="relative z-10 py-20">
      <div class="container mx-auto px-4 text-center">
        <div class="max-w-3xl mx-auto">
          <h3 class="text-3xl lg:text-5xl font-light mb-6" style="color: var(--glass-text-primary);">
            Ready to
            <span class="font-bold" style="color: var(--glass-text-accent);">
              Get Started?
            </span>
          </h3>
          <p class="text-xl mb-8" style="color: var(--glass-text-secondary);">
            Join Colorado's most prestigious venues and start selling tickets today
          </p>
          <a href="/login-new" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 hover:shadow-xl backdrop-blur-xl">
            Create Your Account
          </a>
        </div>
      </div>
    </section>

  </div>
</Layout>

<style>
  /* Smooth scrolling for anchor links */
  html {
    scroll-behavior: smooth;
  }
  
  /* Custom animations */
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .delay-1000 {
    animation-delay: 1s;
  }
  
  .delay-500 {
    animation-delay: 0.5s;
  }
  
</style>

<script>
  // Force dark mode for this page - no theme toggle allowed
  document.documentElement.setAttribute('data-theme', 'dark');
  document.documentElement.classList.add('dark');
  document.documentElement.classList.remove('light');
  
  // Override any global theme logic for this page
  (window as any).__FORCE_DARK_MODE__ = true;
  
  // Prevent theme changes on this page
  if (window.localStorage) {
    const originalTheme = localStorage.getItem('theme');
    if (originalTheme && originalTheme !== 'dark') {
      sessionStorage.setItem('originalTheme', originalTheme);
    }
    localStorage.setItem('theme', 'dark');
  }
  
  // Block any theme toggle attempts
  window.addEventListener('themeChanged', (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.documentElement.setAttribute('data-theme', 'dark');
    document.documentElement.classList.add('dark');
    document.documentElement.classList.remove('light');
  }, true);
</script>