@extends('layouts.app')
@section('title', $organizer->organization_name)

@section('content')
<div class="mx-auto max-w-4xl px-4 py-10">
    <div class="flex items-center gap-6">
        <div class="h-24 w-24 shrink-0 overflow-hidden rounded-lg bg-forest/10">
            @if ($organizer->logo_path)
                <img src="{{ Illuminate\Support\Facades\Storage::disk('public')->url($organizer->logo_path) }}" alt="{{ $organizer->organization_name }}" class="h-full w-full object-cover">
            @endif
        </div>
        <div>
            <h1 class="font-display text-3xl font-bold">{{ $organizer->organization_name }}</h1>
            <p class="mt-1 text-ink/60">{{ $organizer->city }}, {{ $organizer->region }}</p>
        </div>
    </div>

    @if ($organizer->description)
        <div class="prose prose-sm mt-6 max-w-none text-ink/80">{!! nl2br(e($organizer->description)) !!}</div>
    @endif

    <h2 class="mb-4 mt-10 font-display text-xl font-bold">{{ __('messages.home_upcoming_races') }}</h2>
    <div class="grid gap-4 sm:grid-cols-2">
        @forelse ($upcoming as $race)
            <a href="{{ $race->publicUrl() }}" class="card p-4 hover:border-gold">
                <p class="font-mono text-xs text-ink/50">{{ $race->starts_at->translatedFormat('d M Y') }}</p>
                <h3 class="font-display font-semibold">{{ $race->name }}</h3>
            </a>
        @empty
            <p class="text-ink/40">—</p>
        @endforelse
    </div>

    <h2 class="mb-4 mt-10 font-display text-xl font-bold">{{ __('messages.status_completed') }}</h2>
    <div class="grid gap-4 sm:grid-cols-2">
        @forelse ($races as $race)
            <a href="{{ $race->publicUrl() }}" class="card p-4 hover:border-gold">
                <p class="font-mono text-xs text-ink/50">{{ $race->starts_at->translatedFormat('d M Y') }}</p>
                <h3 class="font-display font-semibold">{{ $race->name }}</h3>
            </a>
        @empty
            <p class="text-ink/40">—</p>
        @endforelse
    </div>

    @include('partials.gallery-display', ['gallery' => $organizer->media()->where('type','photo')->get()])
</div>
@endsection