Nous vs les autres

{%- comment -%}
  Section NAHNAH AI : tableau comparatif « Nous vs les autres ».
  Chaque ligne doit être vraie et vérifiable (pas d'affirmation inventée sur les concurrents).
{%- 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 -%}

{%- if section.blocks.size > 0 -%}
  <div class="nahnah-comparatif color-{{ section.settings.color_scheme }} gradient">
    <div class="page-width page-width--narrow section-{{ section.id }}-padding{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      {%- if section.settings.titre != blank -%}
        <h2 class="nahnah-titre h1">{{ section.settings.titre | escape }}</h2>
      {%- endif -%}
      <table class="nahnah-comparatif__table">
        <thead>
          <tr>
            <th scope="col"><span class="visually-hidden">{{ 'nahnah.comparatif.critere' | t }}</span></th>
            <th scope="col" class="nahnah-comparatif__nous">{{ section.settings.nom_nous | default: shop.name | escape }}</th>
            <th scope="col">{{ section.settings.nom_autres | escape }}</th>
          </tr>
        </thead>
        <tbody>
          {%- for block in section.blocks -%}
            <tr {{ block.shopify_attributes }}>
              <th scope="row">{{ block.settings.critere | escape }}</th>
              {%- for colonne in (1..2) -%}
                {%- liquid
                  if colonne == 1
                    assign valeur = block.settings.nous
                    assign texte = block.settings.nous_texte
                    assign classe = 'nahnah-comparatif__nous'
                  else
                    assign valeur = block.settings.autres
                    assign texte = block.settings.autres_texte
                    assign classe = ''
                  endif
                -%}
                <td class="{{ classe }}">
                  {%- case valeur -%}
                    {%- when 'oui' -%}
                      <span class="nahnah-comparatif__oui" aria-hidden="true">✓</span>
                      <span class="visually-hidden">{{ 'nahnah.comparatif.oui' | t }}</span>
                    {%- when 'non' -%}
                      <span class="nahnah-comparatif__non" aria-hidden="true">✕</span>
                      <span class="visually-hidden">{{ 'nahnah.comparatif.non' | t }}</span>
                    {%- else -%}
                      {{ texte | escape }}
                  {%- endcase -%}
                </td>
              {%- endfor -%}
            </tr>
          {%- endfor -%}
        </tbody>
      </table>
    </div>
  </div>
{%- elsif request.design_mode -%}
  <div class="page-width nahnah-vide">Ajoute des lignes de comparaison vraies et vérifiables.</div>
{%- endif -%}

{% schema %}
{
  "name": "Nous vs les autres",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Pourquoi nous choisir ?" },
    { "type": "text", "id": "nom_nous", "label": "Nom de notre colonne", "info": "Vide = nom de la boutique" },
    { "type": "text", "id": "nom_autres", "label": "Nom de l'autre colonne", "default": "Les autres" },
    { "type": "color_scheme", "id": "color_scheme", "label": "Couleurs", "default": "scheme-1" },
    { "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": "ligne",
      "name": "Ligne",
      "settings": [
        { "type": "text", "id": "critere", "label": "Critère", "default": "Livraison suivie" },
        {
          "type": "select", "id": "nous", "label": "Nous",
          "options": [{ "value": "oui", "label": "✓ Oui" }, { "value": "non", "label": "✕ Non" }, { "value": "texte", "label": "Texte" }],
          "default": "oui"
        },
        { "type": "text", "id": "nous_texte", "label": "Nous : texte (si « Texte »)" },
        {
          "type": "select", "id": "autres", "label": "Les autres",
          "options": [{ "value": "oui", "label": "✓ Oui" }, { "value": "non", "label": "✕ Non" }, { "value": "texte", "label": "Texte" }],
          "default": "non"
        },
        { "type": "text", "id": "autres_texte", "label": "Les autres : texte (si « Texte »)" }
      ]
    }
  ],
  "presets": [{ "name": "Nous vs les autres" }]
}
{% endschema %}