@extends('layouts.app')

@section('content')

    {{-- ============ HERO ============ --}}
    <section class="relative overflow-hidden border-b border-white/5">
        <div class="absolute inset-0 bg-gradient-to-b from-ember-900/30 via-ink-900 to-ink-900"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32 text-center">
            <h1 class="font-display text-4xl sm:text-6xl font-black text-gold-300 tracking-wide">
                {{ config('game.server_name') }}
            </h1>
            <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-300">
                Classic Conquer-Online private server Version 6609.
                The only true free-to-play server where the only things that matter are perseverance and skill.
            </p>
            <div class="mt-10 flex flex-wrap justify-center gap-4">
                <a href="{{ route('register') }}"
                   class="px-6 py-3 rounded-md bg-ember-600 hover:bg-ember-500 text-white font-semibold transition">
                    Play for free now
                </a>
                <a href="{{ route('download') }}"
                   class="px-6 py-3 rounded-md border border-white/15 hover:border-gold-400 text-gray-200 hover:text-gold-300 font-semibold transition">
                    Download client
                </a>
            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 grid grid-cols-1 lg:grid-cols-3 gap-10">

        {{-- ============ MAIN COLUMN: NEWS ============ --}}
        <div class="lg:col-span-2 space-y-8">
            <div class="flex items-center justify-between">
                <h2 class="font-display text-2xl font-bold text-gray-100">Latest server news</h2>
                <a href="{{ route('news.index') }}" class="text-sm text-gold-400 hover:text-gold-300">Read more &rarr;</a>
            </div>

            @forelse ($news as $item)
                <article class="rounded-lg border border-white/5 bg-ink-800 p-6 hover:border-ember-700/50 transition">
                    <div class="text-xs uppercase tracking-wide text-ember-400 font-semibold">
                        {{ $item->category ?? 'Update' }}
                    </div>
                    <h3 class="mt-2 font-display text-xl font-bold text-gray-100">
                        <a href="{{ route('news.show', $item->slug) }}" class="hover:text-gold-300">{{ $item->title }}</a>
                    </h3>
                    <p class="mt-2 text-sm text-gray-400">{{ $item->excerpt }}</p>
                    <a href="{{ route('news.show', $item->slug) }}" class="mt-3 inline-block text-sm text-gold-400 hover:text-gold-300">
                        Read more &rarr;
                    </a>
                </article>
            @empty
                <div class="rounded-lg border border-dashed border-white/10 p-8 text-center text-gray-500">
                    No news yet.
                </div>
            @endforelse
        </div>

        {{-- ============ SIDEBAR ============ --}}
        <div class="space-y-8">

            {{-- Login widget --}}
            <div class="rounded-lg border border-white/5 bg-ink-800 p-6">
                <h3 class="font-display text-lg font-bold text-gray-100 mb-4">Account login</h3>

                @if (session('game_account_id'))
                    <p class="text-sm text-gray-300">
                        Ingelogd als <a href="{{ route('account') }}" class="text-gold-400 font-semibold hover:text-gold-300">{{ session('game_account_username') }}</a>.
                    </p>
                    <form method="POST" action="{{ route('logout') }}" class="mt-4">
                        @csrf
                        <button class="w-full py-2 rounded-md bg-ember-700 hover:bg-ember-600 text-white text-sm font-semibold transition">
                            Log out
                        </button>
                    </form>
                @else
                    <form method="POST" action="{{ route('login') }}" class="space-y-3">
                        @csrf
                        <div>
                            <input type="text" name="username" placeholder="Username"
                                   class="w-full rounded-md bg-ink-700 border border-white/10 px-3 py-2 text-sm text-gray-100 focus:border-gold-400 focus:ring-0">
                        </div>
                        <div>
                            <input type="password" name="password" placeholder="Password"
                                   class="w-full rounded-md bg-ink-700 border border-white/10 px-3 py-2 text-sm text-gray-100 focus:border-gold-400 focus:ring-0">
                        </div>
                        @if ($errors->any())
                            <p class="text-xs text-ember-400">{{ $errors->first() }}</p>
                        @endif
                        <button class="w-full py-2 rounded-md bg-ember-600 hover:bg-ember-500 text-white text-sm font-semibold transition">
                            Log in
                        </button>
                    </form>
                    <div class="mt-4 flex justify-between text-xs text-gray-500">
                        <a href="{{ route('password.request') }}" class="hover:text-gold-300">Forgot password?</a>
                        <a href="{{ route('register') }}" class="hover:text-gold-300">Create account</a>
                    </div>
                @endif
            </div>

            {{-- Leaderboard widget --}}
            <div class="rounded-lg border border-white/5 bg-ink-800 p-6">
                <h3 class="font-display text-lg font-bold text-gray-100 mb-4">Server leaderboard</h3>
                @if ($topPlayers->isNotEmpty())
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-left text-gray-500 text-xs uppercase">
                                <th class="pb-2">#</th>
                                <th class="pb-2">Naam</th>
                                <th class="pb-2 text-right">Lvl</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($topPlayers as $i => $player)
                                <tr class="border-t border-white/5">
                                    <td class="py-2 text-gray-500">{{ $i + 1 }}</td>
                                    <td class="py-2 text-gray-200">{{ $player->name }}</td>
                                    <td class="py-2 text-right text-gold-400 font-semibold">{{ $player->level }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <a href="{{ route('ranking') }}" class="mt-4 inline-block text-sm text-gold-400 hover:text-gold-300">
                        Rankings &rarr;
                    </a>
                @else
                    <p class="text-sm text-gray-500">Leaderboard coming soon.</p>
                @endif
            </div>

            {{-- Discord widget --}}
            <div class="rounded-lg border border-white/5 bg-ink-800 p-6 text-center">
                <h3 class="font-display text-lg font-bold text-gray-100 mb-3">Join our community discord</h3>
                <a href="{{ config('game.discord_url') }}" target="_blank" rel="noopener"
                   class="inline-block w-full py-2 rounded-md bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold transition">
                    Join Discord
                </a>
            </div>
        </div>
    </div>
@endsection