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

{% block title %}ThrillWiki - Your Ultimate Theme Park & Ride Database{% endblock %}

{% block meta_description %}Discover the world's best theme parks and thrilling rides. Search, explore, and share your experiences with the ultimate theme park database.{% endblock %}

{% block extra_head %}
<!-- Homepage specific meta tags -->
<meta property="og:title" content="ThrillWiki - Your Ultimate Theme Park & Ride Database">
<meta property="og:description" content="Discover the world's best theme parks and thrilling rides. Search, explore, and share your experiences.">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ request.build_absolute_uri }}">

<!-- Preload critical homepage resources -->
<link rel="preload" href="{% static 'images/hero-bg.jpg' %}" as="image">
{% endblock %}

{% block body_class %}homepage{% endblock %}

{% block content %}
<!-- Skip to main content for accessibility -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-primary-foreground px-4 py-2 rounded-md z-50">
    Skip to main content
</a>

<main id="main-content" class="min-h-screen">
    <!-- Hero Section -->
    <section class="hero-section relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-secondary/10 dark:from-primary/5 dark:via-background dark:to-secondary/5">
        <!-- Background Pattern -->
        <div class="absolute inset-0 bg-grid-pattern opacity-5 dark:opacity-10"></div>
        
        <!-- Hero Content -->
        <div class="relative container mx-auto px-4 py-16 lg:py-24">
            <div class="max-w-4xl mx-auto text-center">
                <!-- Main Heading -->
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6">
                    <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                        Discover
                    </span>
                    <br>
                    <span class="text-foreground">Amazing Theme Parks</span>
                </h1>
                
                <!-- Subtitle -->
                <p class="text-xl md:text-2xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
                    Explore the world's most thrilling rides, discover new parks, and share your adventures with fellow enthusiasts.
                </p>
                
                <!-- Search Bar -->
                <div class="max-w-2xl mx-auto mb-8" 
                     x-data="{ 
                         searchQuery: '', 
                         isSearching: false,
                         searchResults: [],
                         showResults: false 
                     }">
                    <div class="relative">
                        <div class="relative">
                            <input 
                                type="text" 
                                x-model="searchQuery"
                                @input.debounce.300ms="searchGlobal()"
                                @focus="showResults = true"
                                @keydown.escape="showResults = false"
                                placeholder="Search parks, rides, or locations..."
                                class="w-full px-6 py-4 pl-14 pr-16 text-lg rounded-2xl border-2 border-border/50 bg-background/80 backdrop-blur-sm focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200 shadow-lg"
                                aria-label="Search parks and rides"
                                autocomplete="off"
                            >
                            
                            <!-- Search Icon -->
                            <div class="absolute left-5 top-1/2 transform -translate-y-1/2">
                                <svg class="w-6 h-6 text-muted-foreground" 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>
                            </div>
                            
                            <!-- Loading Spinner -->
                            <div x-show="isSearching" class="absolute right-5 top-1/2 transform -translate-y-1/2">
                                <div class="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent"></div>
                            </div>
                            
                            <!-- Clear Button -->
                            <button 
                                x-show="searchQuery.length > 0 && !isSearching"
                                @click="searchQuery = ''; showResults = false"
                                class="absolute right-5 top-1/2 transform -translate-y-1/2 p-1 rounded-full hover:bg-muted transition-colors"
                                aria-label="Clear search"
                            >
                                <svg class="w-5 h-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>
                        
                        <!-- Search Results Dropdown -->
                        <div x-show="showResults && searchResults.length > 0" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-95"
                             @click.away="showResults = false"
                             class="absolute top-full left-0 right-0 mt-2 bg-background border border-border rounded-xl shadow-xl z-50 max-h-96 overflow-y-auto">
                            
                            <div id="search-results-container">
                                <!-- Search results will be loaded here via HTMX -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- Search Suggestions -->
                    <div class="flex flex-wrap gap-2 mt-4 justify-center">
                        <span class="text-sm text-muted-foreground">Popular searches:</span>
                        <button class="text-sm text-primary hover:text-primary/80 transition-colors" @click="searchQuery = 'roller coaster'">
                            Roller Coasters
                        </button>
                        <span class="text-muted-foreground">•</span>
                        <button class="text-sm text-primary hover:text-primary/80 transition-colors" @click="searchQuery = 'Disney'">
                            Disney Parks
                        </button>
                        <span class="text-muted-foreground">•</span>
                        <button class="text-sm text-primary hover:text-primary/80 transition-colors" @click="searchQuery = 'Cedar Point'">
                            Cedar Point
                        </button>
                    </div>
                </div>
                
                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                    <a href="/parks/" 
                       class="inline-flex items-center px-8 py-4 bg-primary text-primary-foreground rounded-xl font-semibold text-lg hover:bg-primary/90 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                        Explore Parks
                    </a>
                    <a href="/rides/" 
                       class="inline-flex items-center px-8 py-4 bg-secondary text-secondary-foreground rounded-xl font-semibold text-lg hover:bg-secondary/90 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        Browse Rides
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <svg class="w-6 h-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
        </div>
    </section>

    <!-- Statistics Dashboard -->
    <section class="py-16 bg-muted/30 dark:bg-muted/10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
                <!-- Stats will be loaded via HTMX -->
                <div hx-get="/api/v1/stats/homepage/" 
                     hx-trigger="load" 
                     hx-target="this"
                     class="text-center p-6 bg-background rounded-xl shadow-sm border border-border/50">
                    <div class="animate-pulse">
                        <div class="h-8 bg-muted rounded mb-2"></div>
                        <div class="h-4 bg-muted rounded"></div>
                    </div>
                </div>
                
                <div class="text-center p-6 bg-background rounded-xl shadow-sm border border-border/50">
                    <div class="animate-pulse">
                        <div class="h-8 bg-muted rounded mb-2"></div>
                        <div class="h-4 bg-muted rounded"></div>
                    </div>
                </div>
                
                <div class="text-center p-6 bg-background rounded-xl shadow-sm border border-border/50">
                    <div class="animate-pulse">
                        <div class="h-8 bg-muted rounded mb-2"></div>
                        <div class="h-4 bg-muted rounded"></div>
                    </div>
                </div>
                
                <div class="text-center p-6 bg-background rounded-xl shadow-sm border border-border/50">
                    <div class="animate-pulse">
                        <div class="h-8 bg-muted rounded mb-2"></div>
                        <div class="h-4 bg-muted rounded"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Parks Section -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Theme Parks</h2>
                <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
                    Discover the world's most amazing theme parks, from classic favorites to hidden gems.
                </p>
            </div>
            
            <!-- Featured Parks Grid -->
            <div hx-get="/api/v1/parks/featured/" 
                 hx-trigger="load" 
                 hx-target="this"
                 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <!-- Loading Placeholders -->
                <div class="animate-pulse">
                    <div class="aspect-video bg-muted rounded-xl mb-4"></div>
                    <div class="h-6 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-3/4"></div>
                </div>
                
                <div class="animate-pulse">
                    <div class="aspect-video bg-muted rounded-xl mb-4"></div>
                    <div class="h-6 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-3/4"></div>
                </div>
                
                <div class="animate-pulse">
                    <div class="aspect-video bg-muted rounded-xl mb-4"></div>
                    <div class="h-6 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-3/4"></div>
                </div>
            </div>
            
            <!-- View All Parks Button -->
            <div class="text-center mt-12">
                <a href="/parks/" 
                   class="inline-flex items-center px-6 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition-colors">
                    View All Parks
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Featured Rides Section -->
    <section class="py-16 bg-muted/30 dark:bg-muted/10">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Top-Rated Rides</h2>
                <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
                    Experience the most thrilling and beloved rides from around the world.
                </p>
            </div>
            
            <!-- Featured Rides Grid -->
            <div hx-get="/api/v1/rides/featured/" 
                 hx-trigger="load" 
                 hx-target="this"
                 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                
                <!-- Loading Placeholders -->
                <div class="animate-pulse">
                    <div class="aspect-square bg-muted rounded-xl mb-4"></div>
                    <div class="h-5 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-2/3"></div>
                </div>
                
                <div class="animate-pulse">
                    <div class="aspect-square bg-muted rounded-xl mb-4"></div>
                    <div class="h-5 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-2/3"></div>
                </div>
                
                <div class="animate-pulse">
                    <div class="aspect-square bg-muted rounded-xl mb-4"></div>
                    <div class="h-5 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-2/3"></div>
                </div>
                
                <div class="animate-pulse">
                    <div class="aspect-square bg-muted rounded-xl mb-4"></div>
                    <div class="h-5 bg-muted rounded mb-2"></div>
                    <div class="h-4 bg-muted rounded w-2/3"></div>
                </div>
            </div>
            
            <!-- View All Rides Button -->
            <div class="text-center mt-12">
                <a href="/rides/" 
                   class="inline-flex items-center px-6 py-3 bg-secondary text-secondary-foreground rounded-lg font-semibold hover:bg-secondary/90 transition-colors">
                    View All Rides
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Recent Activity Section -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Recent Activity</h2>
                <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
                    See what's new in the ThrillWiki community - latest reviews, photos, and updates.
                </p>
            </div>
            
            <!-- Recent Activity Feed -->
            <div class="max-w-4xl mx-auto">
                <div hx-get="/api/v1/activity/recent/" 
                     hx-trigger="load" 
                     hx-target="this"
                     class="space-y-6">
                    
                    <!-- Loading Placeholders -->
                    <div class="animate-pulse flex items-start space-x-4 p-6 bg-background rounded-xl border border-border/50">
                        <div class="w-12 h-12 bg-muted rounded-full"></div>
                        <div class="flex-1">
                            <div class="h-4 bg-muted rounded w-1/4 mb-2"></div>
                            <div class="h-4 bg-muted rounded w-3/4 mb-2"></div>
                            <div class="h-3 bg-muted rounded w-1/2"></div>
                        </div>
                    </div>
                    
                    <div class="animate-pulse flex items-start space-x-4 p-6 bg-background rounded-xl border border-border/50">
                        <div class="w-12 h-12 bg-muted rounded-full"></div>
                        <div class="flex-1">
                            <div class="h-4 bg-muted rounded w-1/4 mb-2"></div>
                            <div class="h-4 bg-muted rounded w-3/4 mb-2"></div>
                            <div class="h-3 bg-muted rounded w-1/2"></div>
                        </div>
                    </div>
                    
                    <div class="animate-pulse flex items-start space-x-4 p-6 bg-background rounded-xl border border-border/50">
                        <div class="w-12 h-12 bg-muted rounded-full"></div>
                        <div class="flex-1">
                            <div class="h-4 bg-muted rounded w-1/4 mb-2"></div>
                            <div class="h-4 bg-muted rounded w-3/4 mb-2"></div>
                            <div class="h-3 bg-muted rounded w-1/2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- Alpine.js Search Functionality -->
<script>
function searchGlobal() {
    if (this.searchQuery.length < 2) {
        this.searchResults = [];
        this.showResults = false;
        return;
    }
    
    this.isSearching = true;
    
    // Use HTMX to fetch search results
    htmx.ajax('GET', `/api/v1/search/global/?q=${encodeURIComponent(this.searchQuery)}`, {
        target: '#search-results-container',
        swap: 'innerHTML'
    }).then(() => {
        this.isSearching = false;
        this.showResults = true;
    }).catch(() => {
        this.isSearching = false;
    });
}
</script>
{% endblock %}

{% block extra_js %}
<!-- Homepage specific JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in-up');
            }
        });
    }, observerOptions);
    
    // Observe sections for animation
    document.querySelectorAll('section').forEach(section => {
        observer.observe(section);
    });
});
</script>
{% endblock %}