<x-app-layout>
    @section('title', 'ThrillWiki - Your Ultimate Theme Park Guide')
    <div class="flex flex-col items-center justify-center min-h-[70vh] text-center">
        <div class="w-full max-w-4xl px-4">
            <h1 class="mb-8 text-6xl font-bold text-white">
                Welcome to ThrillWiki
            </h1>
            
            <p class="mb-16 text-2xl text-gray-300">
                Your ultimate guide to theme parks and attractions worldwide
            </p>

            <div class="flex items-center justify-center gap-4">
                <a href="{{ route('parks.index') }}" class="px-10 py-4 text-xl font-semibold text-white transition-transform bg-indigo-600 rounded-lg hover:scale-105">
                    Explore Parks
                </a>
                <a href="{{ route('rides.index') }}" class="px-10 py-4 text-xl font-semibold text-white transition-transform border rounded-lg hover:scale-105 border-white/20">
                    View Rides
                </a>
            </div>

            <div class="grid grid-cols-1 gap-8 mt-20 sm:grid-cols-3">
                <div class="p-8 text-center rounded-lg bg-gray-900/50">
                    <div class="text-6xl font-bold text-white">{{ $total_parks ?? 0 }}</div>
                    <div class="mt-3 text-xl text-gray-300">Theme Parks</div>
                </div>
                <div class="p-8 text-center rounded-lg bg-gray-900/50">
                    <div class="text-6xl font-bold text-white">{{ $total_attractions ?? 0 }}</div>
                    <div class="mt-3 text-xl text-gray-300">Attractions</div>
                </div>
                <div class="p-8 text-center rounded-lg bg-gray-900/50">
                    <div class="text-6xl font-bold text-white">{{ $total_coasters ?? 0 }}</div>
                    <div class="mt-3 text-xl text-gray-300">Roller Coasters</div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>