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

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

{% block content %}
<!-- Hero Section -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 mb-12">
    <div class="py-12 px-4 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-gray-900 dark:text-white">
            Welcome to ThrillWiki
        </h1>
        <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
            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="btn-primary text-lg px-8 py-3">
                Explore Parks
            </a>
            <a href="{% url 'rides:ride_list' %}" 
               class="btn-secondary text-lg px-8 py-3">
                View Rides
            </a>
        </div>
    </div>
</div>

<!-- Stats Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
    <!-- Total Parks -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-center transform transition-transform hover:-translate-y-1">
        <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
            {{ stats.total_parks }}
        </div>
        <div class="text-xl text-gray-600 dark:text-gray-300">
            Theme Parks
        </div>
    </div>

    <!-- Total Attractions -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-center transform transition-transform hover:-translate-y-1">
        <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
            {{ stats.total_rides }}
        </div>
        <div class="text-xl text-gray-600 dark:text-gray-300">
            Attractions
        </div>
    </div>

    <!-- Total Roller Coasters -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-center transform transition-transform hover:-translate-y-1">
        <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">
            {{ stats.total_roller_coasters }}
        </div>
        <div class="text-xl text-gray-600 dark:text-gray-300">
            Roller Coasters
        </div>
    </div>
</div>

<!-- Featured Content -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Popular Parks -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
            Popular Parks
        </h2>
        {% for park in popular_parks %}
            <a href="{% url 'parks:park_detail' park.slug %}" 
               class="block mb-4 p-4 rounded-lg transition-all hover:bg-gray-50 dark:hover:bg-gray-700 hover:translate-x-2">
                <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                    {{ park.name }}
                </div>
                <div class="text-gray-600 dark:text-gray-300">
                    {{ park.location }}
                </div>
                {% if park.average_rating %}
                    <div class="mt-1 flex items-center text-yellow-500">
                        <span class="mr-1">★</span>
                        <span>{{ park.average_rating|floatformat:1 }}/10</span>
                    </div>
                {% endif %}
            </a>
        {% empty %}
            <p class="text-gray-600 dark:text-gray-400">No popular parks found.</p>
        {% endfor %}
    </div>

    <!-- Popular Rides -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
            Popular Rides
        </h2>
        {% for ride in popular_rides %}
            <a href="{% url 'rides:ride_detail' ride.park.slug ride.slug %}" 
               class="block mb-4 p-4 rounded-lg transition-all hover:bg-gray-50 dark:hover:bg-gray-700 hover:translate-x-2">
                <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">
                    {{ ride.name }}
                </div>
                <div class="text-gray-600 dark:text-gray-300">
                    at {{ ride.park.name }}
                </div>
                {% if ride.average_rating %}
                    <div class="mt-1 flex items-center text-yellow-500">
                        <span class="mr-1">★</span>
                        <span>{{ ride.average_rating|floatformat:1 }}/10</span>
                    </div>
                {% endif %}
            </a>
        {% empty %}
            <p class="text-gray-600 dark:text-gray-400">No popular rides found.</p>
        {% endfor %}
    </div>
</div>
{% endblock %}