@extends('layouts.app')

@section('title', 'Games Directory')

@section('content')
<div class="container-fluid px-4 py-4" data-reveal>
    <div class="mb-5">
        <h1 class="display-md mb-1 text-white">Games Directory</h1>
        <p class="text-muted fs-sm">Esports titles supported on ALGA ARENA competition layers.</p>
    </div>

    <div class="row g-4">
        @foreach($games as $game)
        @php
            $isMock = is_array($game);
            if ($isMock) {
                $gameName = $game['name'] ?? '';
                $coverPath = $game['cover'] ?? null;
                $typeLabel = $game['genre'] ?? '';
                $playersCount = $game['players_count'] ?? 0;
                $publisher = $game['publisher'] ?? '—';
                $gameUrl = url('preview/games/'.($game['id'] ?? $game['slug'] ?? ''));
            } else {
                $gameName = $game->translationName() ?? $game->name;
                $coverPath = $game->cover_path;
                $typeLabel = $game->game_type->label();
                $playersCount = $game->player_game_profiles_count ?? 0;
                $publisher = $game->publisher ?? '—';
                $gameUrl = route('games.show', ['game' => $game->slug]);
            }
        @endphp
        <div class="col-md-6 col-lg-3">
            <a href="{{ $gameUrl }}" class="card-arena card-glow overflow-hidden text-decoration-none d-block">
                <div style="height: 140px; background: linear-gradient(135deg, var(--arena-surface-02), var(--arena-surface-03)); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                    @if($coverPath)
                        <img src="{{ asset(ltrim($coverPath, '/')) }}" alt="{{ $gameName }}" style="width: 100%; height: 100%; object-fit: cover;">
                    @else
                        <span style="font-size: 2.5rem;">🎮</span>
                    @endif
                </div>
                <div class="p-4">
                    <h3 class="text-white fw-800 fs-5 mb-1">{{ $gameName }}</h3>
                    <div class="text-label mb-3" style="font-size: 0.6rem;">{{ $typeLabel }}</div>
                    <div class="d-flex justify-content-between fs-xs text-muted">
                        <span>👥 {{ number_format($playersCount) }} Players</span>
                        <span>{{ $publisher }}</span>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>
@endsection
