@extends('layouts.app')

@section('title', 'Applications, jeux et outils présentés par LÉZIDÉJOU')
@section('description', 'Découvrez les applications, jeux et outils numériques présentés par LÉZIDÉJOU dans son catalogue éditorial.')

@section('content')
    <div class="page-intro">
        <span class="eyebrow">CATALOGUE DES RÉALISATIONS</span>
        <h1 class="page-title">Projets numériques</h1>
        <p class="lead-text">Découvrez les applications et jeux présentés par LÉZIDÉJOU.</p>
    </div>

    <nav class="filter-nav" aria-label="Filtres par catégorie">
        <ul>
            <li>
                <a href="{{ route('projects.index') }}" class="filter-link" @if($selectedCategory === null) aria-current="page" @endif>Tous</a>
            </li>
            <li>
                <a href="{{ route('projects.index', ['category' => 'application']) }}" class="filter-link" @if($selectedCategory?->value === 'application') aria-current="page" @endif>Applications</a>
            </li>
            <li>
                <a href="{{ route('projects.index', ['category' => 'game']) }}" class="filter-link" @if($selectedCategory?->value === 'game') aria-current="page" @endif>Jeux</a>
            </li>
        </ul>
    </nav>

    <section class="projects-list">
        @if(count($projects) === 0)
            <p>Aucun projet ne correspond à cette sélection.</p>
        @else
            <ul class="editorial-grid">
                @foreach($projects as $index => $project)
                    <li class="editorial-item">
                        <span class="editorial-index">{{ sprintf('%02d', $index + 1) }}</span>
                        <div class="editorial-meta">
                            <span class="badge badge-{{ $project->category->value }}">{{ $project->category->label() }}</span>
                            <span class="badge-status">{{ $project->status->label() }}</span>
                        </div>
                        <div class="editorial-content">
                            <h2>
                                <a href="{{ route('projects.show', $project->slug) }}">{{ $project->title }}</a>
                            </h2>
                            <p class="editorial-summary">{{ $project->summary }}</p>
                        </div>
                        <div class="editorial-action">
                            <a href="{{ route('projects.show', $project->slug) }}">Fiche du projet &rarr;</a>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </section>
@endsection