{%- comment -%}
  Timed Discount — offer with a countdown.

  The deadline is a real date you set. When it passes the section hides
  itself rather than looping a fake timer forever — an evergreen countdown
  that resets on every visit is a dark pattern and erodes trust fast.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
  assign now = 'now' | date: '%s' | plus: 0

  comment
    A repeating deadline computes the NEXT real occurrence, so every
    visitor sees the same countdown reaching zero at the same moment.
    That is a genuine recurring promotion. It is not a per-visitor timer
    that restarts on each page load.
  endcomment

  if s.repeat == 'none'
    assign ends = s.deadline | date: '%s' | plus: 0
  else
    assign today = 'now' | date: '%Y-%m-%d'
    assign stamp = today | append: ' ' | append: s.repeat_time
    assign ends = stamp | date: '%s' | plus: 0

    if s.repeat == 'daily'
      if ends <= now
        assign ends = ends | plus: 86400
      endif
    elsif s.repeat == 'weekly'
      assign dow = 'now' | date: '%w' | plus: 0
      assign delta = s.repeat_weekday | minus: dow
      if delta < 0
        assign delta = delta | plus: 7
      endif
      assign ends = delta | times: 86400 | plus: ends
      if ends <= now
        assign ends = ends | plus: 604800
      endif
    endif
  endif

  assign live = false
  if ends > now
    assign live = true
  endif
-%}

{%- if live or s.show_when_expired -%}
{% style %}
  .td-{{ uid }} { padding: {{ s.padding_y }}px 0; background: {{ s.bg_color }}; color: {{ s.text_color }}; }
  .td-{{ uid }}__box {
    max-width: {{ s.max_width }}px; margin: 0 auto; text-align: center;
    padding: {{ s.card_padding }}px; border-radius: {{ s.radius }}px;
    background: {{ s.card_bg }}; border: 1px solid {{ s.border_color }};
  }
  .td-{{ uid }}__head { margin: 0 0 4px; font-size: {{ s.heading_size }}px; font-weight: 700; }
  .td-{{ uid }}__sub { margin: 0 0 12px; font-size: {{ s.text_size }}px; opacity: .8; }
  .td-{{ uid }}__clock { display: flex; gap: 8px; justify-content: center; }
  .td-{{ uid }}__unit {
    min-width: 56px; padding: 8px 6px; border-radius: 8px;
    background: {{ s.unit_bg }}; color: {{ s.unit_text }};
  }
  .td-{{ uid }}__num { display: block; font-size: {{ s.heading_size | plus: 4 }}px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .td-{{ uid }}__cap { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin-top: 4px; }
  .td-{{ uid }}__cta {
    display: inline-block; margin-top: 14px; padding: 11px 22px; border-radius: 8px;
    background: {{ s.cta_bg }}; color: {{ s.cta_text }}; text-decoration: none; font-weight: 600;
  }
  .td-{{ uid }}[hidden] { display: none; }
{% endstyle %}

<div class="td-{{ uid }}" data-td="{{ uid }}" data-ends="{{ ends }}" data-expired-text="{{ s.expired_message | escape }}">
  <div class="page-width">
    <div class="td-{{ uid }}__box">
      <p class="td-{{ uid }}__head">{{ s.heading | escape }}</p>
      {%- if s.subheading != blank -%}<p class="td-{{ uid }}__sub">{{ s.subheading | escape }}</p>{%- endif -%}
      <div class="td-{{ uid }}__clock" data-td-clock>
        <span class="td-{{ uid }}__unit"><span class="td-{{ uid }}__num" data-d>00</span><span class="td-{{ uid }}__cap">Days</span></span>
        <span class="td-{{ uid }}__unit"><span class="td-{{ uid }}__num" data-h>00</span><span class="td-{{ uid }}__cap">Hrs</span></span>
        <span class="td-{{ uid }}__unit"><span class="td-{{ uid }}__num" data-m>00</span><span class="td-{{ uid }}__cap">Min</span></span>
        <span class="td-{{ uid }}__unit"><span class="td-{{ uid }}__num" data-s>00</span><span class="td-{{ uid }}__cap">Sec</span></span>
      </div>
      {%- if s.cta_label != blank -%}
        <a class="td-{{ uid }}__cta" href="{{ s.cta_link | default: '#' }}">{{ s.cta_label | escape }}</a>
      {%- endif -%}
    </div>
  </div>
</div>

<script>
  (() => {
    const root = document.querySelector('[data-td="{{ uid }}"]');
    if (!root) return;
    const ends = parseInt(root.dataset.ends, 10) * 1000;
    const clock = root.querySelector('[data-td-clock]');
    const el = k => root.querySelector('[data-' + k + ']');
    const pad = n => String(n).padStart(2, '0');
    const tick = () => {
      const left = ends - Date.now();
      if (left <= 0) {
        clock.innerHTML = '<span style="font-size:15px">' + root.dataset.expiredText + '</span>';
        return clearInterval(t);
      }
      const sec = Math.floor(left / 1000);
      el('d').textContent = pad(Math.floor(sec / 86400));
      el('h').textContent = pad(Math.floor(sec % 86400 / 3600));
      el('m').textContent = pad(Math.floor(sec % 3600 / 60));
      el('s').textContent = pad(sec % 60);
    };
    tick();
    const t = setInterval(tick, 1000);
  })();
</script>
{%- endif -%}

{% schema %}
{
  "name": "Timed Discount",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "Set a real deadline. When it passes the section hides itself rather than looping a fake timer."
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "20% off ends soon"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Use code PLUSH20 at checkout"
    },
    {
      "type": "text",
      "id": "deadline",
      "label": "Deadline",
      "default": "2026-12-31 23:59",
      "info": "YYYY-MM-DD HH:MM in the store's timezone. Used when Repeat is Off."
    },
    {
      "type": "select",
      "id": "repeat",
      "label": "Repeat",
      "default": "none",
      "options": [
        {
          "value": "none",
          "label": "Off \u2014 one fixed deadline"
        },
        {
          "value": "daily",
          "label": "Daily"
        },
        {
          "value": "weekly",
          "label": "Weekly"
        }
      ],
      "info": "A repeating offer counts down to the next real occurrence. Everyone sees the same clock."
    },
    {
      "type": "text",
      "id": "repeat_time",
      "label": "Ends at",
      "default": "23:59",
      "info": "24-hour, e.g. 23:59."
    },
    {
      "type": "select",
      "id": "repeat_weekday",
      "label": "Day (weekly only)",
      "default": "0",
      "options": [
        {
          "value": "0",
          "label": "Sunday"
        },
        {
          "value": "1",
          "label": "Monday"
        },
        {
          "value": "2",
          "label": "Tuesday"
        },
        {
          "value": "3",
          "label": "Wednesday"
        },
        {
          "value": "4",
          "label": "Thursday"
        },
        {
          "value": "5",
          "label": "Friday"
        },
        {
          "value": "6",
          "label": "Saturday"
        }
      ]
    },
    {
      "type": "text",
      "id": "expired_message",
      "label": "Expired message",
      "default": "This offer has ended"
    },
    {
      "type": "checkbox",
      "id": "show_when_expired",
      "label": "Keep showing after it ends",
      "default": false
    },
    {
      "type": "text",
      "id": "cta_label",
      "label": "Button label",
      "default": "Shop the sale"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "Button link"
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "max_width",
      "min": 300,
      "max": 900,
      "step": 20,
      "unit": "px",
      "label": "Max width",
      "default": 520
    },
    {
      "type": "range",
      "id": "card_padding",
      "min": 8,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Padding",
      "default": 22
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 28,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 12
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 14,
      "max": 40,
      "step": 1,
      "unit": "px",
      "label": "Heading size",
      "default": 20
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 11,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 14
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Section background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "card_bg",
      "label": "Card background",
      "default": "#fff8f4"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border",
      "default": "#f0ddd2"
    },
    {
      "type": "color",
      "id": "unit_bg",
      "label": "Digit background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "unit_text",
      "label": "Digit text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "cta_bg",
      "label": "Button background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "cta_text",
      "label": "Button text",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Vertical padding",
      "default": 26
    }
  ],
  "presets": [
    {
      "name": "Timed Discount"
    }
  ]
}
{% endschema %}
