@php
  $cookImages = ['A47A0476', 'A47A0242', 'A47A0207', 'A47A0397', 'A47A0233', 'A47A0288', 'A47A0504'];
@endphp

<div class="container mt-7" id="cours-de-cuisine">
  <div class="card bg-antique-white m-0 p-3 border-round-sm">
    <div class="row align-items-center">

      {{-- Galerie desktop (≥ md) --}}
      <div class="col-xl-5 p-5 d-none d-md-flex justify-content-center">
        <div class="w-100 text-center mt-0">
          <div class="pswp-gallery pswp-gallery--single-column" id="gallery--cours">
            <div class="row g-2 g-xl-3">
              @foreach ($cookImages as $img)
                <div class="col-{{ $loop->first ? '12' : '6' }} mb-1">
                  <a class="d-block overflow-hidden border-round-sm"
                     href="{{ asset('img/cook/'.$img.'.jpg') }}"
                     data-pswp-width="2500" data-pswp-height="1667" target="_blank">
                    <span class="ratio ratio-16x9 d-block overflow-hidden">
                      <img src="{{ asset('img/cook/'.$img.'.jpg') }}"
                           alt="Cours de cuisine – vue {{ $loop->iteration }}"
                           class="w-100 h-100 border-round-sm"
                           style="object-fit:cover;object-position:center;">
                    </span>
                  </a>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div><!-- /.col Galerie desktop -->

      {{-- Texte + slider mobile --}}
      <div class="col-xl-6">
        <h4 class="text-center text-xl-start text-black my-3">Un moment privilégié</h4>
        <p class="text-center text-xl-start my-3">
          Pendant un peu plus de deux heures, Justine vous accueille dans son antre pour un atelier immersif en petit groupe.<br><br>
          Pâton à la main, musique italienne dans les oreilles, vous plongez dans l’art des raviolis maison : pétrissage, farce, laminage, découpe… jusqu’au moment tant attendu de la dégustation.<br><br>
          Vous repartez avec vos propres créations, des conseils d’achat pour bien vous équiper, et un petit bout d’Italie dans la tête — en plus des mains pleines de farine.
        </p>

        <div class="text-center text-xl-start my-4">
          <ul class="list-unstyled mb-3 lead">
            <li><strong>5 à 9 participants</strong></li>
            <li>80€ TTC / personne</li>
            <li>Certains samedis &amp; mercredis – 10h‑12h ou 15h‑17h</li>
          </ul>
          <a href="{{ route('reservation', ['type' => 'wecandoo']) }}#collapse-wecandoo"
             class="btn btn-white"
             aria-label="Demander une réservation Cours de cuisine">
            Demander une réservation
          </a>
        </div>

        {{-- Slider mobile (visible uniquement < md) --}}
        <div class="d-md-none mt-4">
          <div class="container-fluid px-0">
            <div id="slider-cours" class="my-slider">
              <div class="slider-wrapper">
                @foreach ($cookImages as $img)
                  <div>
                    <img src="{{ asset('img/cook/'.$img.'.jpg') }}"
                         alt="Cours mobile {{ $loop->iteration }}"
                         class="img-fluid border-round-sm w-100">
                  </div>
                @endforeach
              </div>
            </div>

            <!-- Boutons nav -->
            <div id="custom-controls-cours" class="custom-controls text-center mt-2">
              <button type="button" class="btn btn-white prev mx-2"><i class="bi bi-arrow-left"></i></button>
              <button type="button" class="btn btn-white next mx-2"><i class="bi bi-arrow-right"></i></button>
            </div>
          </div>
          <script>
            document.addEventListener('DOMContentLoaded', function () {
              tns({
                container: '#slider-cours .slider-wrapper',
                items: 1,
                loop: false,
                mouseDrag: true,
                swipeAngle: false,
                speed: 400,
                responsive: {
                  400: { items: 1 },
                  750: { items: 2 }
                },
                controls: true,
                nav: false,
                controlsContainer: '#custom-controls-cours'
              });
            });
          </script>
        </div><!-- /slider mobile -->
      </div><!-- /.col texte+slider -->

    </div><!-- /.row -->
  </div><!-- /.card -->
</div><!-- /.container -->