@extends('layouts.app')

@section('title', __('messages.site_name').' — '.__('messages.site_tagline'))

@section('content')

    {{-- Hero --}}
    <section class="relative overflow-hidden bg-forest text-cream">
        <div class="absolute inset-0 opacity-10" aria-hidden="true">
            <svg viewBox="0 0 800 400" class="h-full w-full" preserveAspectRatio="xMidYMid slice">
                <path d="M0 320 C 150 260, 250 380, 400 300 S 650 220, 800 300" stroke="#C9A227" stroke-width="3" fill="none"/>
                <path d="M0 250 C 180 200, 260 300, 420 240 S 680 160, 800 240" stroke="#C9A227" stroke-width="2" fill="none"/>
            </svg>
        </div>

        <div class="relative mx-auto max-w-6xl px-4 py-20 text-center md:py-28">
            <p class="mb-3 font-mono text-xs uppercase tracking-[0.3em] text-gold">{{ __('messages.hero_kicker') }}</p>
            <h1 class="mx-auto max-w-3xl font-display text-4xl font-bold leading-tight md:text-5xl">
                {{ __('messages.hero_title') }}
            </h1>
            <p class="mx-auto mt-4 max-w-xl text-cream/80">{{ __('messages.hero_subtitle') }}</p>

            <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
                <a href="{{ route('races.index', ['locale' => $currentLocale ?? app()->getLocale()]) }}" class="btn-primary w-full sm:w-auto">
                    {{ __('messages.hero_cta_races') }}
                </a>
                <a href="{{ route('horses.index', ['locale' => $currentLocale ?? app()->getLocale()]) }}" class="btn-outline w-full sm:w-auto">
                    {{ __('messages.hero_cta_horses') }}
                </a>
            </div>
        </div>
    </section>

    {{-- Stats strip --}}
    <section class="border-b border-ink/10 bg-white">
        <div class="mx-auto grid max-w-6xl grid-cols-2 gap-6 px-4 py-8 text-center md:grid-cols-4">
            @foreach ([
                'horses' => __('messages.stat_horses'),
                'races' => __('messages.stat_races'),
                'jockeys' => __('messages.stat_jockeys'),
                'organizers' => __('messages.stat_organizers'),
            ] as $key => $label)
                <div>
                    <div class="font-display text-3xl font-bold text-forest">{{ $stats[$key] }}+</div>
                    <div class="mt-1 text-sm text-ink/60">{{ $label }}</div>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Upcoming races --}}
    <section class="mx-auto max-w-6xl px-4 py-14">
        <div class="mb-6 flex items-center justify-between">
            <h2 class="font-display text-2xl font-bold">{{ __('messages.home_upcoming_races') }}</h2>
            <a href="{{ route('races.index', ['locale' => $currentLocale ?? app()->getLocale()]) }}" class="text-sm font-medium text-forest hover:text-gold-dark">{{ __('messages.view_all') }} →</a>
        </div>

        @if ($upcomingRaces->isEmpty())
            <p class="text-ink/50">{{ __('messages.no_upcoming_races') }}</p>
        @else
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($upcomingRaces as $race)
                    <a href="{{ $race->publicUrl() }}" class="card flex flex-col justify-between p-4 transition hover:border-gold hover:shadow-md">
                        <div>
                            <p class="font-mono text-xs text-ink/50">{{ $race->starts_at->translatedFormat('d M, H:i') }}</p>
                            <h3 class="mt-1 font-display font-semibold">{{ $race->name }}</h3>
                            <p class="mt-1 text-sm text-ink/60">{{ $race->location?->name }}</p>
                        </div>
                        <span class="status-pill mt-3 self-start bg-forest/10 text-forest">{{ __('messages.status_'.$race->status) }}</span>
                    </a>
                @endforeach
            </div>
        @endif
    </section>

    {{-- Top horses / jockeys --}}
    <section class="bg-white py-14">
        <div class="mx-auto grid max-w-6xl gap-10 px-4 md:grid-cols-2">
            <div>
                <h2 class="mb-6 font-display text-2xl font-bold">{{ __('messages.home_top_horses') }}</h2>
                <ol class="space-y-3">
                    @foreach ($topHorses as $i => $horse)
                        <li class="flex items-center gap-3 rounded-md border border-ink/10 p-3">
                            <span class="rank-badge rank-badge--{{ min($i + 1, 3) }}">{{ $i + 1 }}</span>
                            <a href="{{ $horse->publicUrl() }}" class="flex-1 font-medium hover:text-forest">{{ $horse->name }}</a>
                            <span class="font-mono text-sm text-ink/50">{{ $horse->points }} {{ __('messages.points_short') }}</span>
                        </li>
                    @endforeach
                </ol>
            </div>

            <div>
                <h2 class="mb-6 font-display text-2xl font-bold">{{ __('messages.home_top_jockeys') }}</h2>
                <ol class="space-y-3">
                    @foreach ($topJockeys as $i => $jockey)
                        <li class="flex items-center gap-3 rounded-md border border-ink/10 p-3">
                            <span class="rank-badge rank-badge--{{ min($i + 1, 3) }}">{{ $i + 1 }}</span>
                            <a href="{{ $jockey->publicUrl() }}" class="flex-1 font-medium hover:text-forest">{{ $jockey->user->fullName() }}</a>
                            <span class="font-mono text-sm text-ink/50">{{ $jockey->points }} {{ __('messages.points_short') }}</span>
                        </li>
                    @endforeach
                </ol>
            </div>
        </div>
    </section>

    {{-- News --}}
    @if ($latestNews->isNotEmpty())
        <section class="mx-auto max-w-6xl px-4 py-14">
            <h2 class="mb-6 font-display text-2xl font-bold">{{ __('messages.home_latest_news') }}</h2>
            <div class="grid gap-4 md:grid-cols-3">
                @foreach ($latestNews as $item)
                    <a href="{{ route('news.show', ['locale' => $currentLocale ?? app()->getLocale(), 'news' => $item->slug]) }}" class="card p-4 transition hover:border-gold hover:shadow-md">
                        <h3 class="font-display font-semibold">{{ $item->title }}</h3>
                        <p class="mt-2 text-sm text-ink/60">{{ \Illuminate\Support\Str::limit($item->excerpt, 100) }}</p>
                    </a>
                @endforeach
            </div>
        </section>
    @endif

@endsection