@extends('layouts.app')

@section('title', 'LoreKeepers — Track, Rate & Discover Video Games You Love')
@section('canonical', route('home'))
@section('description', 'LoreKeepers lets you track, rate, and review every game you play. Build your game library, discover top-rated games, and connect with other players.')
@section('og_title', 'LoreKeepers — Track, Rate & Discover Video Games You Love')
@section('og_description', 'Track, rate and review every game you play. Build your game library, discover top-rated games, and connect with other players on LoreKeepers.')

@section('content')

{{-- Hero --}}
<section class="bg-gradient-to-b from-[#1a1025] to-[#0f0f13] py-20 px-4">
    <div class="max-w-3xl mx-auto text-center">
        <h1 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-4">
            Track Every Game<br>
            <span class="text-purple-400">You Play</span>
        </h1>
        <p class="text-lg text-slate-400 mb-8">
            Rate games, build your library, discover what to play next.
        </p>

        <form action="{{ route('games.search') }}" method="GET" class="max-w-xl mx-auto">
            <div class="relative">
                <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" 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 0"/>
                </svg>
                <input type="text" name="q" placeholder="Search for a game…"
                       class="w-full bg-[#16161d] border border-white/10 rounded-xl pl-12 pr-4 py-4 text-base text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 transition">
                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors">
                    Search
                </button>
            </div>
        </form>

        @guest
        <div class="mt-8 flex items-center justify-center gap-4">
            <a href="{{ route('register') }}" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
                Create Free Account
            </a>
            <a href="{{ route('games.index') }}" class="px-6 py-3 border border-white/10 hover:border-white/20 text-slate-300 font-semibold rounded-lg transition-colors">
                Browse Games
            </a>
        </div>
        @endguest
    </div>
</section>

{{-- Top Rated --}}
@if($topRated->isNotEmpty())
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold text-white">Top Rated</h2>
        <a href="{{ route('games.top-rated') }}" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">
            See all →
        </a>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        @foreach($topRated as $game)
            <x-game-card :game="$game" />
        @endforeach
    </div>
</section>
@endif

{{-- New Releases --}}
@if($newReleases->isNotEmpty())
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 border-t border-white/5">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-bold text-white">New Releases</h2>
        <a href="{{ route('games.new-releases') }}" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">
            See all →
        </a>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
        @foreach($newReleases as $game)
            <x-game-card :game="$game" />
        @endforeach
    </div>
</section>
@endif

{{-- Empty state --}}
@if($topRated->isEmpty() && $newReleases->isEmpty())
<section class="max-w-3xl mx-auto px-4 py-24 text-center">
    <div class="text-slate-500 mb-4">
        <svg class="w-16 h-16 mx-auto mb-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
        </svg>
        <p class="text-lg text-slate-400">No games in the database yet.</p>
        <p class="text-sm mt-2">Run <code class="bg-[#16161d] px-2 py-1 rounded text-purple-400">php artisan games:import</code> to import games from IGDB.</p>
    </div>
</section>
@endif

@endsection