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

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

{% block extra_css %}
<style>
    .hero-pattern {
        background-color: var(--color-background);
        background-image: radial-gradient(var(--color-primary-100) 1px, transparent 1px);
        background-size: 40px 40px;
    }
    .dark .hero-pattern {
        background-image: radial-gradient(var(--color-primary-900) 1px, transparent 1px);
    }
</style>
{% endblock %}

{% block main %}
<div class="flex flex-col min-h-screen">
    <!-- Hero Section -->
    <section class="relative py-20 overflow-hidden hero-pattern lg:py-32">
        <div class="container relative z-10 mx-auto text-center">
            <h1 class="mb-6 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
                Discover Your Next <br class="hidden sm:inline">
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-secondary-600">Adrenaline Rush</span>
            </h1>
            <p class="max-w-2xl mx-auto mb-10 text-lg text-muted-foreground sm:text-xl">
                The most comprehensive database of theme parks and roller coasters. 
                Track your credits, rate rides, and join the community.
            </p>
            
            <!-- Search Bar -->
            <div class="max-w-2xl mx-auto mb-12" x-data="{ query: '', results: [] }">
                <div class="relative group">
                    <div class="absolute inset-0 transition duration-200 rounded-lg opacity-25 bg-gradient-to-r from-primary-500 to-secondary-500 blur group-hover:opacity-50"></div>
                    <div class="relative rounded-lg shadow-xl bg-background">
                        <div class="flex items-center px-4 py-3">
                            <svg class="w-6 h-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                            <input type="text" 
                                   x-model="query"
                                   @focus="$store.search.open()"
                                   placeholder="Search parks, rides, or locations..." 
                                   class="w-full px-4 py-2 text-lg bg-transparent border-none focus:ring-0 placeholder:text-muted-foreground text-foreground">
                            <div class="hidden sm:flex text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5">
                                <span class="text-xs">⌘</span>K
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center gap-4 mt-4 text-sm text-muted-foreground">
                    <span>Popular:</span>
                    <button class="transition-colors hover:text-primary">Cedar Point</button>
                    <button class="transition-colors hover:text-primary">Six Flags</button>
                    <button class="transition-colors hover:text-primary">Disney World</button>
                </div>
            </div>

            <div class="flex flex-col justify-center gap-4 sm:flex-row">
                {% include "components/ui/button.html" with label="Explore Parks" href="/parks/" size="lg" %}
                {% include "components/ui/button.html" with label="Browse Rides" href="/rides/" variant="outline" size="lg" %}
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-12 border-y border-border bg-muted/50">
        <div class="container mx-auto">
            <div class="grid grid-cols-2 gap-8 text-center md:grid-cols-4">
                <div class="space-y-2">
                    <dt class="text-3xl font-bold text-foreground">2,500+</dt>
                    <dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Parks</dd>
                </div>
                <div class="space-y-2">
                    <dt class="text-3xl font-bold text-foreground">12,000+</dt>
                    <dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Rides</dd>
                </div>
                <div class="space-y-2">
                    <dt class="text-3xl font-bold text-foreground">50k+</dt>
                    <dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Reviews</dd>
                </div>
                <div class="space-y-2">
                    <dt class="text-3xl font-bold text-foreground">150k+</dt>
                    <dd class="text-sm font-medium tracking-wide uppercase text-muted-foreground">Photos</dd>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Parks -->
    <section class="py-20">
        <div class="container mx-auto">
            <div class="flex items-center justify-between mb-10">
                <div>
                    <h2 class="text-3xl font-bold tracking-tight text-foreground">Featured Parks</h2>
                    <p class="mt-2 text-muted-foreground">Top rated destinations from around the world.</p>
                </div>
                <a href="{% url 'parks:park_list' %}" class="items-center hidden font-medium sm:flex text-primary hover:text-primary/80">
                    View all parks <span class="ml-1">→</span>
                </a>
            </div>
            
            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3" 
                 hx-get="{% url 'api:parks-featured' %}" 
                 hx-trigger="load"
                 hx-swap="innerHTML">
                <!-- Loading Skeleton -->
                {% for i in "123"|make_list %}
                <div class="rounded-lg border bg-card text-card-foreground shadow-sm h-[400px]">
                    <div class="p-6 space-y-4">
                        <div class="w-full h-48 rounded bg-muted animate-pulse"></div>
                        <div class="space-y-2">
                            <div class="w-2/3 h-4 rounded bg-muted animate-pulse"></div>
                            <div class="w-1/2 h-4 rounded bg-muted animate-pulse"></div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <div class="mt-8 text-center sm:hidden">
                {% include "components/ui/button.html" with label="View all parks" href="/parks/" variant="outline" class="w-full" %}
            </div>
        </div>
    </section>

    <!-- Latest Reviews -->
    <section class="py-20 bg-muted/30">
        <div class="container mx-auto">
            <div class="flex items-center justify-between mb-10">
                <div>
                    <h2 class="text-3xl font-bold tracking-tight text-foreground">Community Pulse</h2>
                    <p class="mt-2 text-muted-foreground">Recent activity and reviews from our community.</p>
                </div>
            </div>
            
            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
                 hx-get="{% url 'api:reviews-recent' %}"
                 hx-trigger="load"
                 hx-swap="innerHTML">
                 <!-- Loading Skeleton -->
                 {% for i in "123"|make_list %}
                 <div class="p-6 border rounded-lg shadow-sm bg-card text-card-foreground">
                     <div class="flex items-center gap-4 mb-4">
                         <div class="w-10 h-10 rounded-full bg-muted animate-pulse"></div>
                         <div class="flex-1 space-y-2">
                             <div class="w-1/3 h-4 rounded bg-muted animate-pulse"></div>
                             <div class="w-1/4 h-3 rounded bg-muted animate-pulse"></div>
                         </div>
                     </div>
                     <div class="space-y-2">
                         <div class="w-full h-4 rounded bg-muted animate-pulse"></div>
                         <div class="w-5/6 h-4 rounded bg-muted animate-pulse"></div>
                     </div>
                 </div>
                 {% endfor %}
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="relative py-24 overflow-hidden bg-primary text-primary-foreground">
        <div class="absolute inset-0 bg-[url('/static/images/pattern.svg')] opacity-10"></div>
        <div class="container relative z-10 mx-auto text-center">
            <h2 class="mb-6 text-3xl font-bold sm:text-4xl">Ready to track your rides?</h2>
            <p class="max-w-2xl mx-auto mb-10 text-lg text-primary-foreground/80">
                Create a free account to log your coasters, rate parks, upload photos, and join the discussion.
            </p>
            {% include "components/ui/button.html" with label="Get Started for Free" href="/accounts/signup/" variant="secondary" size="lg" %}
        </div>
    </section>
</div>
{% endblock main %}