@extends('layouts.app')

@section('title', 'Jeux et expériences interactives | LÉZIDÉJOU')
@section('description', 'Découvrez les jeux et expériences interactives présentés par LÉZIDÉJOU, dont Belote Pro et Maths & Îles.')

@section('content')
    <div class="page-intro">
        <span class="eyebrow">UNIVERS LUDIQUE</span>
        <h1 class="page-title">Jeux</h1>
        <p class="lead-text">
            Découvrez les jeux et expériences interactives présentés par LÉZIDÉJOU. Les jeux sont actuellement présentés sous forme de fiches éditoriales et ne sont pas encore directement jouables sur le portail.
        </p>
    </div>

    <section class="games-list">
        @if(count($games) === 0)
            <p>Aucun jeu n’est disponible pour le moment.</p>
        @else
            <ul class="editorial-grid">
                @foreach($games as $index => $game)
                    <li class="editorial-item">
                        <span class="editorial-index">{{ sprintf('%02d', $index + 1) }}</span>
                        <div class="editorial-meta">
                            <span class="badge badge-game">{{ $game->category->label() }}</span>
                            <span class="badge-status">{{ $game->status->label() }}</span>
                        </div>
                        <div class="editorial-content">
                            <h2>
                                <a href="{{ route('projects.show', $game->slug) }}">{{ $game->title }}</a>
                            </h2>
                            <p class="editorial-summary">{{ $game->summary }}</p>
                        </div>
                        <div class="editorial-action">
                            <a href="{{ route('projects.show', $game->slug) }}">Fiche du jeu &rarr;</a>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </section>
@endsection