Avis par pays

{%- comment -%} NAHNAH AI · Avis par pays {%- endcomment -%}
<section class="nn-avis-par-pays" style="--nn-accent: {{ section.settings.accent }};">
  <h2>{{ section.settings.titre }}</h2>
  <div class="nn-avis-par-pays__pays" role="group" aria-label="Choisir un pays"><button type="button" class="is-actif" data-nn-pays="tous">Tous</button></div>
  <div class="nn-avis-par-pays__grille">
    {% for block in section.blocks %}
    <article class="nn-avis-par-pays__carte" data-nn-pays="{{ block.settings.code | upcase }}" {{ block.shopify_attributes }}>
      <span class="nn-avis-par-pays__code">{{ block.settings.code | upcase }}</span>
      <p>{{ block.settings.texte }}</p>
      <footer><strong>{{ block.settings.auteur }}</strong> · {{ block.settings.ville }}</footer>
    </article>
    {% endfor %}
  </div>
</section>
{% schema %}
{"name":"Avis par pays","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Ils nous font confiance partout"},
{"type":"color","id":"accent","label":"Couleur","default":"#0F766E"}],
"blocks":[{"type":"avis","name":"Avis","settings":[
{"type":"text","id":"code","label":"Code pays (2 lettres)","default":"FR"},
{"type":"text","id":"ville","label":"Ville","default":"Ville"},
{"type":"text","id":"auteur","label":"Auteur","default":"Prénom N."},
{"type":"textarea","id":"texte","label":"Avis","default":"Remplacez par l'avis réel d'un client de ce pays."}]}],
"presets":[{"name":"Avis par pays","blocks":[{"type":"avis"},{"type":"avis","settings":{"code":"BE"}},{"type":"avis","settings":{"code":"CH"}}]}]}
{% endschema %}

{% stylesheet %}
/* Pastilles pays générées depuis les blocs */
.nn-avis-par-pays{padding:60px 5vw;max-width:1100px;margin:0 auto}
.nn-avis-par-pays h2{text-align:center}
.nn-avis-par-pays__pays{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.nn-avis-par-pays__pays button{font:inherit;border:1px solid #e4e4e7;background:#fff;border-radius:8px;padding:6px 14px;cursor:pointer;font-weight:600}
.nn-avis-par-pays__pays button.is-actif{background:var(--nn-accent);color:#fff;border-color:var(--nn-accent)}
.nn-avis-par-pays__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.nn-avis-par-pays__carte{position:relative;border:1px solid #e4e4e7;border-radius:14px;padding:20px;background:#fff;transition:opacity .3s}
.nn-avis-par-pays__carte[hidden]{display:none}
.nn-avis-par-pays__code{position:absolute;top:14px;right:14px;font-size:12px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--nn-accent) 12%,#fff);color:var(--nn-accent)}
.nn-avis-par-pays__carte footer{font-size:14px;color:#71717a}
@media (prefers-reduced-motion: reduce){.nn-avis-par-pays__carte{transition:none}}
{% endstylesheet %}

{% javascript %}
// Crée un bouton par pays présent dans les avis et filtre au clic
(function () {
  document.querySelectorAll('.nn-avis-par-pays').forEach(function (s) {
    var zone = s.querySelector('.nn-avis-par-pays__pays'), cartes = s.querySelectorAll('.nn-avis-par-pays__carte'), vus = {};
    cartes.forEach(function (c) {
      var p = c.dataset.nnPays; if (!p || vus[p]) return; vus[p] = 1;
      var b = document.createElement('button'); b.type = 'button'; b.dataset.nnPays = p; b.textContent = p; zone.appendChild(b);
    });
    zone.addEventListener('click', function (e) {
      var b = e.target.closest('button'); if (!b) return;
      zone.querySelectorAll('button').forEach(function (x) { x.classList.toggle('is-actif', x === b); });
      cartes.forEach(function (c) { c.hidden = b.dataset.nnPays !== 'tous' && c.dataset.nnPays !== b.dataset.nnPays; });
    });
  });
})();
{% endjavascript %}