Mur d’avis défilant

{%- comment -%}
  Section NAHNAH AI : mur d'avis flottant (inspiré des « marquee » de 21st.dev).
  Cartes à photos qui défilent lentement sur 2 ou 3 lignes, en sens opposés,
  en pause au survol ou au focus clavier, et hors écran (nahnah-animations.js).
  Uniquement de vrais avis : sans avis, la section ne s'affiche pas.
  « Réduire les animations » : pas de défilement, simple liste qui se fait glisser.
{%- endcomment -%}
{{ 'nahnah-sections.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  # Moins de 6 avis : une seule ligne, pour éviter des lignes trop vides
  assign nb_lignes = section.settings.lignes | plus: 0
  if section.blocks.size < 6
    assign nb_lignes = 1
  endif
-%}

{%- if section.blocks.size > 0 -%}
  <div class="nahnah-mur color-{{ section.settings.color_scheme }} gradient">
    <div class="section-{{ section.id }}-padding">
      {%- if section.settings.titre != blank -%}
        <h2 class="nahnah-titre h1 page-width">{{ section.settings.titre | escape }}</h2>
      {%- endif -%}

      {%- comment -%} Moins de 4 avis : cartes fixes et centrées (un défilement paraîtrait vide) {%- endcomment -%}
      <nahnah-defilement class="nahnah-mur__lignes{% if section.blocks.size < 4 %} est-statique{% endif %}" style="--nahnah-duree: {{ section.settings.vitesse }}s;">
        {%- for ligne in (1..nb_lignes) -%}
          {%- assign reste = ligne | minus: 1 -%}
          <div class="nahnah-mur__ligne{% cycle '', ' nahnah-mur__ligne--inverse', '' %}">
            {%- comment -%} 4 copies identiques : boucle sans saut, même sur grand écran {%- endcomment -%}
            <div class="nahnah-defile__piste">
              {%- for copie in (1..4) -%}
                <ul class="nahnah-defile__groupe" role="list" {% if copie > 1 %}aria-hidden="true"{% endif %}>
                  {%- for block in section.blocks -%}
                    {%- assign modulo = forloop.index0 | modulo: nb_lignes -%}
                    {%- if modulo == reste -%}
                      <li class="nahnah-mur__carte" {% if copie == 1 %}{{ block.shopify_attributes }}{% endif %}>
                        {%- if block.settings.photo != blank -%}
                          {{
                            block.settings.photo
                            | image_url: width: 480
                            | image_tag: loading: 'lazy', class: 'nahnah-mur__photo', widths: '240, 480', sizes: '240px'
                          }}
                        {%- endif -%}
                        <div class="nahnah-mur__corps">
                          {% render 'nahnah-etoiles', note: block.settings.note %}
                          {%- if block.settings.texte != blank -%}
                            <p class="nahnah-mur__texte">{{ block.settings.texte | escape }}</p>
                          {%- endif -%}
                          <p class="nahnah-mur__auteur">
                            <strong>{{ block.settings.auteur | escape }}</strong>
                            {%- if block.settings.achat_verifie %}
                              · <span>{{ 'nahnah.avis.achat_verifie' | t }}</span>
                            {%- endif -%}
                          </p>
                        </div>
                      </li>
                    {%- endif -%}
                  {%- endfor -%}
                </ul>
              {%- endfor -%}
            </div>
          </div>
        {%- endfor -%}
      </nahnah-defilement>
    </div>
  </div>
{%- elsif request.design_mode -%}
  <div class="page-width nahnah-vide">Ajoute de vrais avis clients avec leur photo.</div>
{%- endif -%}

{% schema %}
{
  "name": "Mur d'avis flottant",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Ils en parlent mieux que nous" },
    {
      "type": "select", "id": "lignes", "label": "Nombre de lignes",
      "options": [{ "value": "2", "label": "2" }, { "value": "3", "label": "3" }],
      "default": "2"
    },
    { "type": "range", "id": "vitesse", "min": 30, "max": 120, "step": 5, "unit": "s", "label": "Durée d'un tour (plus grand = plus lent)", "default": 60 },
    { "type": "color_scheme", "id": "color_scheme", "label": "Couleurs", "default": "scheme-2" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Marge haute", "default": 36 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Marge basse", "default": 36 }
  ],
  "blocks": [
    {
      "type": "avis",
      "name": "Avis",
      "settings": [
        { "type": "image_picker", "id": "photo", "label": "Photo du client" },
        { "type": "text", "id": "auteur", "label": "Prénom du client", "default": "Client" },
        { "type": "range", "id": "note", "min": 1, "max": 5, "step": 1, "label": "Note", "default": 5 },
        { "type": "textarea", "id": "texte", "label": "Texte de l'avis" },
        { "type": "checkbox", "id": "achat_verifie", "label": "Achat vérifié", "default": false }
      ]
    }
  ],
  "presets": [{ "name": "Mur d'avis flottant" }]
}
{% endschema %}