{% extends 'base/base.html' %}
{% load static %}

{% block title %}ThrillWiki - Your Ultimate Theme Park Adventure Guide{% endblock %}

{% block meta_description %}Discover the world's most thrilling theme parks and attractions. Explore detailed guides, stunning photos, and insider tips for your next adventure at Disney, Universal, Cedar Point, and beyond.{% endblock %}

{% block content %}
<!-- Hero Section - Absolutely Stunning -->
<section class="hero relative min-h-screen flex items-center justify-center overflow-hidden">
  <!-- Animated Background Elements -->
  <div class="absolute inset-0 opacity-10 dark:opacity-5">
    <div class="absolute top-20 left-10 w-32 h-32 bg-thrill-primary rounded-full blur-3xl animate-pulse"></div>
    <div class="absolute top-40 right-20 w-48 h-48 bg-thrill-secondary rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
    <div class="absolute bottom-32 left-1/4 w-40 h-40 bg-purple-500 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
    <div class="absolute bottom-20 right-1/3 w-36 h-36 bg-pink-500 rounded-full blur-3xl animate-pulse" style="animation-delay: 0.5s;"></div>
  </div>

  <!-- Main Hero Content -->
  <div class="hero-content container mx-auto px-6 relative z-10">
    <!-- Hero Badge -->
    <div class="flex justify-center mb-8">
      <div class="badge badge-info badge-lg pulse-glow">
        <i class="fas fa-rocket mr-2"></i>
        World's #1 Theme Park Guide
      </div>
    </div>

    <!-- Hero Title with Stunning Typography -->
    <h1 class="hero-title slide-in-up">
      Discover Your Next
      <span class="block">Thrilling Adventure</span>
    </h1>

    <!-- Hero Subtitle -->
    <p class="hero-subtitle slide-in-up" style="animation-delay: 0.2s;">
      Explore the world's most incredible theme parks, from heart-pounding roller coasters to magical experiences. 
      Your ultimate adventure starts here with insider guides, stunning visuals, and expert recommendations.
    </p>

    <!-- Hero CTA Buttons -->
    <div class="hero-cta slide-in-up" style="animation-delay: 0.4s;">
      <button class="btn-primary btn-lg hover-lift" 
              hx-get="/parks/" 
              hx-target="#main-content" 
              hx-swap="innerHTML transition:true">
        <i class="fas fa-map-marked-alt mr-3"></i>
        Explore Parks
      </button>
      <button class="btn-secondary btn-lg hover-lift">
        <i class="fas fa-play mr-3"></i>
        Watch Adventure
      </button>
    </div>

    <!-- Hero Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16 slide-in-up" style="animation-delay: 0.6s;">
      <div class="text-center">
        <div class="text-3xl md:text-4xl font-bold text-thrill-primary mb-2">500+</div>
        <div class="text-neutral-600 dark:text-neutral-400">Theme Parks</div>
      </div>
      <div class="text-center">
        <div class="text-3xl md:text-4xl font-bold text-thrill-secondary mb-2">2,000+</div>
        <div class="text-neutral-600 dark:text-neutral-400">Thrilling Rides</div>
      </div>
      <div class="text-center">
        <div class="text-3xl md:text-4xl font-bold text-thrill-success mb-2">50K+</div>
        <div class="text-neutral-600 dark:text-neutral-400">Happy Visitors</div>
      </div>
      <div class="text-center">
        <div class="text-3xl md:text-4xl font-bold text-purple-500 mb-2">100+</div>
        <div class="text-neutral-600 dark:text-neutral-400">Countries</div>
      </div>
    </div>
  </div>

  <!-- Scroll Indicator -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
    <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
      <div class="w-1 h-3 bg-white/50 rounded-full mt-2 animate-pulse"></div>
    </div>
  </div>
</section>

<!-- Featured Parks Section -->
<section class="py-24 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
  <div class="container mx-auto px-6">
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="text-4xl md:text-5xl font-bold mb-6">
        <span class="bg-gradient-to-r from-thrill-primary to-thrill-secondary bg-clip-text text-transparent">
          Featured Destinations
        </span>
      </h2>
      <p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
        Discover the world's most incredible theme parks, each offering unique thrills and unforgettable memories
      </p>
    </div>

    <!-- Featured Parks Grid -->
    <div class="grid-auto-fit-lg" 
         hx-get="/api/parks/featured/" 
         hx-trigger="revealed"
         hx-swap="innerHTML">
      <!-- Loading Skeletons -->
      <div class="card hover-lift">
        <div class="loading-skeleton aspect-video rounded-t-2xl"></div>
        <div class="p-6 space-y-4">
          <div class="loading-skeleton h-6 w-3/4 rounded"></div>
          <div class="loading-skeleton h-4 w-full rounded"></div>
          <div class="loading-skeleton h-4 w-2/3 rounded"></div>
          <div class="flex justify-between items-center">
            <div class="loading-skeleton h-6 w-20 rounded-full"></div>
            <div class="loading-skeleton h-8 w-24 rounded-lg"></div>
          </div>
        </div>
      </div>
      
      <div class="card hover-lift">
        <div class="loading-skeleton aspect-video rounded-t-2xl"></div>
        <div class="p-6 space-y-4">
          <div class="loading-skeleton h-6 w-3/4 rounded"></div>
          <div class="loading-skeleton h-4 w-full rounded"></div>
          <div class="loading-skeleton h-4 w-2/3 rounded"></div>
          <div class="flex justify-between items-center">
            <div class="loading-skeleton h-6 w-20 rounded-full"></div>
            <div class="loading-skeleton h-8 w-24 rounded-lg"></div>
          </div>
        </div>
      </div>
      
      <div class="card hover-lift">
        <div class="loading-skeleton aspect-video rounded-t-2xl"></div>
        <div class="p-6 space-y-4">
          <div class="loading-skeleton h-6 w-3/4 rounded"></div>
          <div class="loading-skeleton h-4 w-full rounded"></div>
          <div class="loading-skeleton h-4 w-2/3 rounded"></div>
          <div class="flex justify-between items-center">
            <div class="loading-skeleton h-6 w-20 rounded-full"></div>
            <div class="loading-skeleton h-8 w-24 rounded-lg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Trending Rides Section -->
<section class="py-24">
  <div class="container mx-auto px-6">
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="text-4xl md:text-5xl font-bold mb-6">
        <span class="bg-gradient-to-r from-thrill-secondary to-red-500 bg-clip-text text-transparent">
          Trending Thrills
        </span>
      </h2>
      <p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
        The hottest rides everyone's talking about - from record-breaking coasters to innovative attractions
      </p>
    </div>

    <!-- Trending Rides Carousel -->
    <div class="relative">
      <div class="grid-auto-fit-md" 
           hx-get="/api/rides/trending/" 
           hx-trigger="revealed"
           hx-swap="innerHTML">
        <!-- Loading Skeletons for Rides -->
        <div class="card-ride hover-lift">
          <div class="loading-skeleton aspect-square rounded-t-2xl"></div>
          <div class="p-4 space-y-3">
            <div class="loading-skeleton h-5 w-3/4 rounded"></div>
            <div class="loading-skeleton h-4 w-full rounded"></div>
            <div class="flex justify-between items-center">
              <div class="loading-skeleton h-5 w-16 rounded-full"></div>
              <div class="loading-skeleton h-6 w-20 rounded-lg"></div>
            </div>
          </div>
        </div>
        
        <div class="card-ride hover-lift">
          <div class="loading-skeleton aspect-square rounded-t-2xl"></div>
          <div class="p-4 space-y-3">
            <div class="loading-skeleton h-5 w-3/4 rounded"></div>
            <div class="loading-skeleton h-4 w-full rounded"></div>
            <div class="flex justify-between items-center">
              <div class="loading-skeleton h-5 w-16 rounded-full"></div>
              <div class="loading-skeleton h-6 w-20 rounded-lg"></div>
            </div>
          </div>
        </div>
        
        <div class="card-ride hover-lift">
          <div class="loading-skeleton aspect-square rounded-t-2xl"></div>
          <div class="p-4 space-y-3">
            <div class="loading-skeleton h-5 w-3/4 rounded"></div>
            <div class="loading-skeleton h-4 w-full rounded"></div>
            <div class="flex justify-between items-center">
              <div class="loading-skeleton h-5 w-16 rounded-full"></div>
              <div class="loading-skeleton h-6 w-20 rounded-lg"></div>
            </div>
          </div>
        </div>
        
        <div class="card-ride hover-lift">
          <div class="loading-skeleton aspect-square rounded-t-2xl"></div>
          <div class="p-4 space-y-3">
            <div class="loading-skeleton h-5 w-3/4 rounded"></div>
            <div class="loading-skeleton h-4 w-full rounded"></div>
            <div class="flex justify-between items-center">
              <div class="loading-skeleton h-5 w-16 rounded-full"></div>
              <div class="loading-skeleton h-6 w-20 rounded-lg"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="py-24 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
  <div class="container mx-auto px-6">
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="text-4xl md:text-5xl font-bold mb-6">
        <span class="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
          Why Choose ThrillWiki?
        </span>
      </h2>
      <p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
        We're more than just a guide - we're your adventure companion
      </p>
    </div>

    <!-- Features Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature 1 -->
      <div class="card-feature hover-lift text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-thrill-primary to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-map-marked-alt text-2xl text-white"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">Comprehensive Guides</h3>
        <p class="text-neutral-600 dark:text-neutral-400">
          Detailed information on every park, ride, and attraction with insider tips and expert recommendations.
        </p>
      </div>

      <!-- Feature 2 -->
      <div class="card-feature hover-lift text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-thrill-secondary to-red-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-camera text-2xl text-white"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">Stunning Visuals</h3>
        <p class="text-neutral-600 dark:text-neutral-400">
          High-quality photos and videos that bring the magic to life before you even arrive.
        </p>
      </div>

      <!-- Feature 3 -->
      <div class="card-feature hover-lift text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-thrill-success to-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-users text-2xl text-white"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">Community Driven</h3>
        <p class="text-neutral-600 dark:text-neutral-400">
          Real reviews and experiences from fellow thrill-seekers and theme park enthusiasts.
        </p>
      </div>

      <!-- Feature 4 -->
      <div class="card-feature hover-lift text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-mobile-alt text-2xl text-white"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">Mobile Optimized</h3>
        <p class="text-neutral-600 dark:text-neutral-400">
          Perfect experience on any device, from planning at home to navigating in the park.
        </p>
      </div>

      <!-- Feature 5 -->
      <div class="card-feature hover-lift text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-clock text-2xl text-white"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">Real-Time Updates</h3>
        <p class="text-neutral-600 dark:text-neutral-400">
          Live wait times, operating hours, and park status to help you make the most of your visit.
        </p>
      </div>

      <!-- Feature 6 -->
      <div class="card-feature hover-lift text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <i class="fas fa-star text-2xl text-white"></i>
        </div>
        <h3 class="text-2xl font-bold mb-4">Expert Reviews</h3>
        <p class="text-neutral-600 dark:text-neutral-400">
          Professional insights and ratings from theme park experts and industry professionals.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Call to Action Section -->
<section class="py-24 relative overflow-hidden">
  <!-- Background Gradient -->
  <div class="absolute inset-0 bg-gradient-to-r from-thrill-primary via-purple-600 to-pink-600"></div>
  <div class="absolute inset-0 bg-black/20"></div>
  
  <!-- Content -->
  <div class="container mx-auto px-6 relative z-10 text-center text-white">
    <h2 class="text-4xl md:text-6xl font-bold mb-6">
      Ready for Your Next Adventure?
    </h2>
    <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto opacity-90">
      Join thousands of thrill-seekers who trust ThrillWiki to plan their perfect theme park adventures
    </p>
    
    <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
      <button class="btn-secondary btn-lg bg-white text-thrill-primary hover:bg-white/90 hover-lift">
        <i class="fas fa-user-plus mr-3"></i>
        Join the Community
      </button>
      <button class="btn-ghost btn-lg text-white border-white/30 hover:bg-white/10 hover-lift">
        <i class="fas fa-compass mr-3"></i>
        Start Exploring
      </button>
    </div>
  </div>
</section>

<!-- HTMX + AlpineJS Implementation (NO Custom JavaScript) -->
<div x-data="homePageAnimations" x-init="init()">
  <!-- Animation triggers handled by AlpineJS -->
</div>
{% endblock %}