{% extends '@SyliusShop/shared/layout/base.html.twig' %}

{% block content %}
<main class="content-wrapper">
  {# ------------------------------ HERO SECTION ----------------------------- #}
  <section class="position-relative" aria-label="Services du photographe – Hero">
    <div class="container position-relative">
      <div class="row justify-content-center">
        <div class="col-lg-9 col-xl-8 text-center pt-5 mt-1">
          <h1 class="display-4 pt-3 mt-3 mb-4">Services et Prestations Photo</h1>
          <p class="opacity-70 fs-xl">Sport, mariage, événements, portraits ... Je capture vos émotions, où que vous soyez</p>
        </div>
      </div>
    </div>
    <div class="d-none d-lg-block" style="height:480px"></div>
    <div class="d-lg-none" style="height:400px"></div>
  </section>

  <section class="container position-relative z-3" aria-label="Prestations de services photographiques">
    <div class="d-none d-lg-block" style="margin-top:-428px"></div>
    <div class="d-lg-none" style="margin-top:-370px"></div>

    <div class="swiper"
      data-swiper-options='{"slidesPerView":1,"spaceBetween":24,"pagination":{"el": ".swiper-pagination","clickable": true},"breakpoints":{"560":{"slidesPerView":2},"960":{"slidesPerView":3}}}'>
      <div class="swiper-wrapper">

        <div class="swiper-slide" aria-label="Service 1 : photographie sportive">
          <a href="{{ path('app_shop_services_sport') }}" title="Découvrir la prestation Photographe Sportif"
            class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
            <span class="position-absolute top-0 start-0 w-100 h-100 z-1"
              style="background:linear-gradient(180deg,rgba(18,21,25,0) 35.56%,#121519 95.3%)"></span>
            <div class="position-absolute bottom-0 w-100 z-2 p-4">
              <div class="px-md-3">
                <h3 class="h4 mb-0 text-white">Photographe Sportif</h3>
                <div class="d-flex align-items-center justify-content-between opacity-0">
                  <span class="fs-xs text-truncate opacity-70 pe-3">Actions intenses, émotions brutes, mouvements figés
                    avec netteté.</span>
                  <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                </div>
              </div>
            </div>
            <div class="zoom-effect-wrapper">
              <div class="zoom-effect-img">
                <img src="{{ asset('assets/images/sport/1_carre_service.jpg') }}"
                  alt="Exemple de photographie sportive en plein mouvement" loading="lazy">
              </div>
            </div>
          </a>
        </div>



        {# --------------------------- Portraits & Shooting --------------------------- #}
        <div class="swiper-slide" aria-label="Service 4 : portraits et shooting photo sur mesure">
          <a href="{{ path('app_shop_services_photo') }}" title="Découvrir la prestation Portraits & Shooting Photo"
            class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
            <span class="position-absolute top-0 start-0 w-100 h-100 z-1"
              style="background:linear-gradient(180deg,rgba(18,21,25,0) 35.56%,#121519 95.3%)"></span>
            <div class="position-absolute bottom-0 w-100 z-2 p-4">
              <div class="px-md-3">
                <h3 class="h4 mb-0 text-white">Portraits &amp; Shooting Photo</h3>
                <div class="d-flex align-items-center justify-content-between opacity-0">
                  <span class="fs-xs text-truncate opacity-70 pe-3 text-white">Portrait corporate, book artistique ou
                    souvenirs personnels.</span>
                  <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                </div>
              </div>
            </div>
            <div class="zoom-effect-wrapper">
              <div class="zoom-effect-img">
                <img src="{{ asset('assets/images/portrait/1_profil_service .jpg') }}"
                  alt="Portrait professionnel en lumière naturelle" loading="lazy">
              </div>
            </div>
          </a>
        </div>

        {# ------------------------- Photographe Mariage -------------------------- #}
        <div class="swiper-slide" aria-label="Service 2 : photographe de mariage">
          <a href="{{ path('app_shop_services_mariage') }}" title="Découvrir la prestation Photographe Mariage"
            class="card card-hover zoom-effect border-0 rounded-5 overflow-hidden">
            <span class="position-absolute top-0 start-0 w-100 h-100 z-1"
              style="background:linear-gradient(180deg,rgba(18,21,25,0) 35.56%,#121519 95.3%)"></span>
            <div class="position-absolute bottom-0 w-100 z-2 p-4">
              <div class="px-md-3">
                <h3 class="h4 mb-0 text-white">Photographe de Mariage</h3>
                <div class="d-flex align-items-center justify-content-between opacity-0">
                  <span class="fs-xs text-truncate opacity-70 pe-3">Instants précieux, reportage élégant et discret du
                    grand jour.</span>
                  <i class="ai-circle-arrow-right fs-3 text-primary"></i>
                </div>
              </div>
            </div>
            <div class="zoom-effect-wrapper">
              <div class="zoom-effect-img">
                <img src="{{ asset('assets/images/mariage/1_carre_service.jpg') }}"
                  alt="Photo de mariage – couple échangeant un regard complice" loading="lazy">
              </div>
            </div>
          </a>
        </div>
      </div>
      {# --------------------------- SLIDER PAGINATION --------------------------- #}
      <div class="swiper-pagination position-relative bottom-0 pt-2 pt-md-3 mt-4"></div>
    </div>
  </section>
</main>
{% endblock %}