@extends('layouts.app')

@section('titre', 'Accueil')

@section('contenu')

<section class="hero">
  <div class="container">
    <p class="hero-eyebrow">Club de football amateur — Saint-Jean</p>
    <h1>Un club, un maillot, une famille</h1>
    <p class="lede">L'Union Saint-Jean FC réunit près de 750 licenciés autour du ballon rond, de l'école de foot jusqu'à la Régional 1, et anime la vie du village bien au-delà des terrains.</p>
    <div class="hero-stats">
      <div><strong>750+</strong><span>Licenciés</span></div>
      <div><strong>R1</strong><span>Équipe fanion</span></div>
      <div><strong>4</strong><span>Événements annuels</span></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-tete">
      <p class="section-eyebrow">Actualités</p>
      <h2>Ça se passe au club</h2>
      <p class="chapo">Résultats, vie associative et coulisses de la saison.</p>
    </div>
    <div class="grille-3">
      @forelse ($actualites as $actualite)
        <article class="carte">
          <span class="label">{{ $actualite->categorie ?? 'Actualité' }}</span>
          <h3>{{ $actualite->titre }}</h3>
          <p>{{ \Illuminate\Support\Str::limit($actualite->contenu, 110) }}</p>
        </article>
      @empty
        <p class="chapo">Aucune actualité publiée pour le moment.</p>
      @endforelse
    </div>
  </div>
</section>

@if ($prochainEvenement)
<section class="section section--sombre">
  <div class="container">
    <div class="section-tete">
      <p class="section-eyebrow">Agenda</p>
      <h2>Prochain rendez-vous</h2>
      <p class="chapo">Le détail de tous les événements de la saison se trouve sur la page dédiée.</p>
    </div>
    <div class="billet">
      <div class="billet-date">
        <span class="jour">{{ $prochainEvenement->date_evenement->format('d') }}</span>
        <span class="mois">{{ ucfirst($prochainEvenement->date_evenement->translatedFormat('M.')) }}</span>
      </div>
      <div class="billet-corps">
        <span class="billet-type">{{ $prochainEvenement->type }}</span>
        <h3>{{ $prochainEvenement->titre }}</h3>
        <p class="billet-lieu">{{ $prochainEvenement->lieu }}</p>
      </div>
    </div>
  </div>
</section>
@endif

@endsection