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

{% block title %}ThrillWiki - Theme Parks & Attractions Guide{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="mb-12 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700">
    <div class="px-4 py-12 text-center">
        <h1 class="mb-6 text-4xl font-bold text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
            Welcome to ThrillWiki
        </h1>
        <p class="max-w-3xl mx-auto mb-8 text-xl text-gray-600 md:text-2xl dark:text-gray-300">
            Your ultimate guide to theme parks and attractions worldwide
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{% url 'parks:park_list' %}" 
               class="px-8 py-3 text-lg btn-primary">
                Explore Parks
            </a>
            <a href="{% url 'rides:global_ride_list' %}"
               class="px-8 py-3 text-lg btn-secondary">
                View Rides
            </a>
        </div>
    </div>
</div>

<!-- Stats Section -->
<div class="grid-adaptive-sm mb-12">
    <!-- Total Parks -->
    <a href="{% url 'parks:park_list' %}" 
       class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
        <div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
            {{ stats.total_parks }}
        </div>
        <div class="text-xl text-gray-600 dark:text-gray-300">
            Theme Parks
        </div>
    </a>

    <!-- Total Attractions -->
    <a href="{% url 'rides:global_ride_list' %}"
       class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
        <div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
            {{ stats.ride_count }}
        </div>
        <div class="text-xl text-gray-600 dark:text-gray-300">
            Attractions
        </div>
    </a>

    <!-- Total Roller Coasters -->
    <a href="{% url 'rides:global_roller_coasters' %}"
       class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
        <div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
            {{ stats.coaster_count }}
        </div>
        <div class="text-xl text-gray-600 dark:text-gray-300">
            Roller Coasters
        </div>
    </a>
</div>

<!-- Featured Content -->
<div class="grid-adaptive">
    <!-- Trending Parks -->
    <div class="p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
            Trending Parks
        </h2>
        <div class="space-y-4">
            {% for park in popular_parks %}
                <a href="{% url 'parks:park_detail' park.slug %}" 
                   class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
                   {% if park.photos.first %}
                   style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ park.photos.first.image.url }}') center/cover no-repeat;"
                   {% else %}
                   style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
                   {% endif %}>
                    <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                        <div class="text-lg font-semibold">
                            {{ park.name }}
                        </div>
                        <div class="text-sm text-gray-200">
                            {{ park.ride_count }} rides, {{ park.coaster_count }} coasters
                        </div>
                        {% if park.average_rating %}
                            <div class="absolute top-0 right-0 p-2 text-yellow-400">
                                <span class="mr-1">★</span>
                                <span>{{ park.average_rating|floatformat:1 }}/10</span>
                            </div>
                        {% else %}
                            <div class="text-sm text-gray-400">Rating not available</div>
                        {% endif %}
                    </div>
                </a>
            {% empty %}
                <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                    <div class="mb-4 text-4xl">🎢</div>
                    <div class="text-lg font-medium text-gray-900 dark:text-white">No Parks Yet</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Parks will appear here once they're added to the database</div>
                </div>
            {% endfor %}
        </div>
    </div>

    <!-- Trending Rides -->
    <div class="p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
            Trending Rides
        </h2>
        <div class="space-y-4">
            {% for ride in popular_rides %}
                <a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}"
                   class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
                   {% if ride.photos.first %}
                   style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ ride.photos.first.image.url }}') center/cover no-repeat;"
                   {% else %}
                   style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"
                   {% endif %}>
                    <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                        <div class="text-lg font-semibold">
                            {{ ride.name }}
                        </div>
                        <div class="text-sm text-gray-200">
                            at {{ ride.park.name }}
                        </div>
                        {% if ride.average_rating %}
                            <div class="flex items-center mt-1 text-yellow-400">
                                <span class="mr-1">★</span>
                                <span>{{ ride.average_rating|floatformat:1 }}/10</span>
                            </div>
                        {% else %}
                            <div class="text-sm text-gray-400">Rating not available</div>
                        {% endif %}
                    </div>
                </a>
            {% empty %}
                <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                    <div class="mb-4 text-4xl">🎠</div>
                    <div class="text-lg font-medium text-gray-900 dark:text-white">No Rides Yet</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Rides will appear here once they're added to the database</div>
                </div>
            {% endfor %}
        </div>
    </div>

    <!-- Highest Rated -->
    <div class="p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
            Highest Rated
        </h2>
        <div class="space-y-4">
            {% for item in highest_rated %}
                {% if item.park %}
                    <!-- This is a ride -->
                    <a href="{% url 'parks:rides:ride_detail' item.park.slug item.slug %}"
                       class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
                       {% if item.photos.first %}
                       style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ item.photos.first.image.url }}') center/cover no-repeat;"
                       {% else %}
                       style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));"
                       {% endif %}>
                        <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                            <div class="text-lg font-semibold">
                                {{ item.name }}
                            </div>
                            <div class="text-sm text-gray-200">
                                at {{ item.park.name }}
                            </div>
                            <div class="flex items-center mt-1 text-yellow-400">
                                <span class="mr-1">★</span>
                                <span>{{ item.average_rating|floatformat:1 }}/10</span>
                            </div>
                        </div>
                    </a>
                {% else %}
                    <!-- This is a park -->
                    <a href="{% url 'parks:park_detail' item.slug %}" 
                       class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
                       {% if item.photos.first %}
                       style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ item.photos.first.image.url }}') center/cover no-repeat;"
                       {% else %}
                       style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));"
                       {% endif %}>
                        <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                            <div class="text-lg font-semibold">
                                {{ item.name }}
                            </div>
                            <div class="text-sm text-gray-200">
                                {{ item.ride_count }} rides, {{ item.coaster_count }} coasters
                            </div>
                            <div class="absolute top-0 right-0 p-2 text-yellow-400">
                                <span class="mr-1">★</span>
                                <span>{{ item.average_rating|floatformat:1 }}/10</span>
                            </div>
                        </div>
                    </a>
                {% endif %}
            {% empty %}
                <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                    <div class="mb-4 text-4xl">⭐</div>
                    <div class="text-lg font-medium text-gray-900 dark:text-white">No Ratings Yet</div>
                    <div class="text-sm text-gray-600 dark:text-gray-400">Highest rated content will appear here once users start rating</div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}