Compte à rebours réel

{%- comment -%}
  Section NAHNAH AI : compte à rebours vers une date de fin réelle.
  Le compteur ne se relance jamais tout seul : une fois la date passée,
  la section se masque (ou affiche « Offre terminée » selon le réglage).
{%- endcomment -%}
{{ 'nahnah-sections.css' | asset_url | stylesheet_tag }}
<script src="{{ 'nahnah-compte-a-rebours.js' | asset_url }}" defer="defer"></script>

{%- 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.settings.date_fin != blank -%}
  <nahnah-compte-a-rebours
    class="nahnah-rebours color-{{ section.settings.color_scheme }} gradient"
    data-fin="{{ section.settings.date_fin | escape }}"
    data-masquer="{{ section.settings.masquer_apres }}"
    {% if request.design_mode %}data-editeur="true"{% endif %}
  >
    <div class="page-width section-{{ section.id }}-padding nahnah-rebours__contenu">
      {%- if section.settings.titre != blank -%}
        <h2 class="nahnah-titre h2">{{ section.settings.titre | escape }}</h2>
      {%- endif -%}
      {%- if section.settings.sous_titre != blank -%}
        <p class="nahnah-rebours__sous-titre">{{ section.settings.sous_titre | escape }}</p>
      {%- endif -%}

      <div class="nahnah-rebours__compteur" role="timer" aria-live="off">
        <div class="nahnah-rebours__case"><span data-unite="jours">00</span><small>{{ 'nahnah.rebours.jours' | t }}</small></div>
        <div class="nahnah-rebours__case"><span data-unite="heures">00</span><small>{{ 'nahnah.rebours.heures' | t }}</small></div>
        <div class="nahnah-rebours__case"><span data-unite="minutes">00</span><small>{{ 'nahnah.rebours.minutes' | t }}</small></div>
        <div class="nahnah-rebours__case"><span data-unite="secondes">00</span><small>{{ 'nahnah.rebours.secondes' | t }}</small></div>
      </div>
      <p class="nahnah-rebours__termine" hidden>{{ 'nahnah.rebours.termine' | t }}</p>

      {%- if section.settings.texte_bouton != blank and section.settings.lien_bouton != blank -%}
        <a href="{{ section.settings.lien_bouton }}" class="button button--primary">{{ section.settings.texte_bouton | escape }}</a>
      {%- endif -%}
    </div>
  </nahnah-compte-a-rebours>
{%- elsif request.design_mode -%}
  <div class="page-width nahnah-vide">Indique une date de fin réelle pour afficher le compte à rebours.</div>
{%- endif -%}

{% schema %}
{
  "name": "Compte à rebours",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Offre de lancement" },
    { "type": "text", "id": "sous_titre", "label": "Sous-titre", "default": "Profite de la remise avant la fin de l'offre." },
    {
      "type": "text",
      "id": "date_fin",
      "label": "Date de fin de l'offre",
      "info": "Format : 2026-12-31T23:59:00+01:00 (date, heure et fuseau). Utilise la vraie date de fin de ta promotion."
    },
    { "type": "checkbox", "id": "masquer_apres", "label": "Masquer la section une fois l'offre terminée", "default": true },
    { "type": "text", "id": "texte_bouton", "label": "Texte du bouton", "default": "J'en profite" },
    { "type": "url", "id": "lien_bouton", "label": "Lien du bouton" },
    { "type": "color_scheme", "id": "color_scheme", "label": "Couleurs", "default": "scheme-3" },
    { "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 }
  ],
  "presets": [{ "name": "Compte à rebours" }]
}
{% endschema %}