FAQ en accordéon

{%- comment -%}
  Section NAHNAH AI : FAQ en accordéon, avec données structurées FAQPage pour Google.
{%- 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 -%}

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

    <div class="nahnah-faq__liste">
      {%- for block in section.blocks -%}
        <details class="nahnah-faq__item" {{ block.shopify_attributes }} {% if forloop.first and section.settings.premier_ouvert %}open{% endif %}>
          <summary class="nahnah-faq__question">
            <span>{{ block.settings.question | escape }}</span>
            <span class="nahnah-faq__signe" aria-hidden="true"></span>
          </summary>
          <div class="nahnah-faq__reponse rte">{{ block.settings.reponse }}</div>
        </details>
      {%- endfor -%}
    </div>
  </div>
</div>

{%- if section.blocks.size > 0 -%}
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {%- for block in section.blocks -%}
          {
            "@type": "Question",
            "name": {{ block.settings.question | json }},
            "acceptedAnswer": { "@type": "Answer", "text": {{ block.settings.reponse | strip_html | json }} }
          }{% unless forloop.last %},{% endunless %}
        {%- endfor -%}
      ]
    }
  </script>
{%- endif -%}

{% schema %}
{
  "name": "FAQ",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Questions fréquentes" },
    { "type": "checkbox", "id": "premier_ouvert", "label": "Ouvrir la première question", "default": true },
    { "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": "question",
      "name": "Question",
      "settings": [
        { "type": "text", "id": "question", "label": "Question", "default": "Quels sont les délais de livraison ?" },
        { "type": "richtext", "id": "reponse", "label": "Réponse", "default": "<p>Indique ici les délais réels de livraison.</p>" }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ",
      "blocks": [{ "type": "question" }, { "type": "question" }, { "type": "question" }]
    }
  ]
}
{% endschema %}