@extends('layouts.app')

@section('titre', 'Équipes')

@section('contenu')

<section class="hero">
  <div class="container">
    <p class="hero-eyebrow">De l'école de foot à la Régional 1</p>
    <h1>Nos équipes</h1>
    <p class="lede">L'Union Saint-Jean FC compte des équipes dans toutes les catégories, de l'école de foot aux séniors.</p>
  </div>
</section>

<section class="section section--sombre">
  <div class="container">
    <div class="section-tete">
      <p class="section-eyebrow">Séniors</p>
      <h2>Équipes seniors</h2>
    </div>
    <div class="grille-equipes">
      @foreach ($equipesSeniors as $equipe)
        <article class="carte-equipe">
          <span class="categorie">{{ $equipe->categorie }}</span>
          <h3>{{ $equipe->nom }}</h3>
          @if ($equipe->description)
            <p>{{ $equipe->description }}</p>
          @endif
          @if ($equipe->niveau)
            <p class="niveau">{{ $equipe->niveau }}</p>
          @endif
        </article>
      @endforeach
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-tete">
      <p class="section-eyebrow">Jeunes</p>
      <h2>École de foot et catégories jeunes</h2>
    </div>
    <div class="grille-3">
      @foreach ($equipesJeunes as $equipe)
        <article class="carte">
          <span class="label">{{ $equipe->categorie }}</span>
          <h3>{{ $equipe->nom }}</h3>
          @if ($equipe->description)
            <p>{{ $equipe->description }}</p>
          @endif
        </article>
      @endforeach
    </div>
  </div>
</section>

@endsection