@extends('layouts.app')

@section('title', 'LÉZIDÉJOU — Applications, jeux, musique et créations indépendantes')
@section('description', 'Catalogue éditorial présentant les projets logiciels, les jeux, la musique et les créations de LÉZIDÉJOU.')

@section('content')
    <section class="page-intro">
        <span class="eyebrow">CATALOGUE NUMÉRIQUE ET CRÉATIF INDÉPENDANT</span>
        <h1 class="home-title">Applications, jeux, musique et créations indépendantes.</h1>
        <p class="lead-text">LÉZIDÉJOU rassemble des applications, des jeux, de la musique et des créations indépendantes.</p>
        <div style="margin-top: 24px;">
            <a href="{{ route('projects.index') }}" class="action-link">Voir les projets &rarr;</a>
        </div>
    </section>

    <section class="projects-selection" style="margin-top: 64px;">
        <h2>Sélection de projets</h2>
        <ul class="editorial-grid" style="margin-top: 24px;">
            @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">
                        <h3>
                            <a href="{{ route('projects.show', $project->slug) }}">{{ $project->title }}</a>
                        </h3>
                        <p class="editorial-summary">{{ $project->summary }}</p>
                    </div>
                    <div class="editorial-action">
                        <a href="{{ route('projects.show', $project->slug) }}">Découvrir la fiche &rarr;</a>
                    </div>
                </li>
            @endforeach
        </ul>
    </section>

    <section class="activity-fields" style="margin-top: 80px;">
        <h2>Champs d’activité</h2>
        <div class="fields-grid">
            <article class="field-card">
                <span class="badge badge-application" style="margin-bottom: 8px; display: block;">Applications</span>
                <h3>Outils numériques</h3>
                <p>Applications et outils numériques pratiques, conçus avec un souci de sobriété et d’utilité.</p>
            </article>
            <article class="field-card">
                <span class="badge badge-game" style="margin-bottom: 8px; display: block;">Jeux</span>
                <h3>Expériences ludiques</h3>
                <p>Jeux numériques conçus pour le divertissement et l’apprentissage.</p>
            </article>
            <article class="field-card">
                <span class="badge badge-music" style="margin-bottom: 8px; display: block;">Musique</span>
                <h3>Joanto</h3>
                <p>Productions musicales et créations sonores éditées sous le label Etbeur Music.</p>
            </article>
            <article class="field-card">
                <span class="badge badge-shop" style="margin-bottom: 8px; display: block;">Boutique</span>
                <h3>SerajoPrints</h3>
                <p>Créations numériques destinées à être imprimées et créations manuelles.</p>
            </article>
        </div>
    </section>

    <section class="about-summary-block" style="margin-top: 80px; border-top: 1px solid var(--color-line); padding-top: 40px;">
        <h2>À propos de LÉZIDÉJOU</h2>
        <p class="lead-text" style="font-size: 1.1rem; margin-top: 16px;">
            LÉZIDÉJOU est un catalogue numérique indépendant présentant les projets logiciels, ludiques, musicaux et graphiques portés par Etbeur. La démarche privilégie la clarté, l’indépendance de création et la transparence sur l’état réel de chaque projet.
        </p>
    </section>
@endsection