{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Countdown banner: heading, text, button and a timer to an end date and time.
  Three layouts: inline bar, banner over an image or color, split image and text.
  The server renders the end date as text ("Ends 31 December"); a small custom element
  turns the timer on and updates it every second (or every minute without seconds).
  The end time is read in the UTC offset chosen in the settings, so every visitor sees the same deadline.
  Depends on: snippets/lib-button.liquid, snippets/lib-image.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif

  assign end_date = s.end_date | strip
  assign end_time = s.end_time | strip | default: '23:59'
  if end_time.size == 4
    assign end_time = '0' | append: end_time
  endif
  assign end_iso = ''
  if end_date.size == 10
    assign end_iso = end_date | append: 'T' | append: end_time | append: ':00' | append: s.utc_offset
  endif

  comment
    Server-side state: compare the deadline with the render time. Cached pages can be a little stale,
    so the custom element re-checks in the browser.
  endcomment
  assign ended = false
  if end_iso != blank
    assign end_epoch = end_iso | date: '%s' | plus: 0
    assign now_epoch = 'now' | date: '%s' | plus: 0
    if end_epoch > 0 and end_epoch <= now_epoch
      assign ended = true
    endif
    comment
      Midday keeps the printed day stable whatever the shop's time zone is.
    endcomment
    assign end_date_text = end_date | append: ' 12:00' | date: '%-d %B'
  endif

  assign hide_section = false
  if ended and s.end_behavior == 'hide' and request.design_mode != true
    assign hide_section = true
  endif

  assign has_image = false
  if s.image != blank or s.image_mobile != blank
    assign has_image = true
  endif
-%}

{%- unless hide_section -%}
  <div
    class="lib-countdown lib-countdown--{{ s.layout }}"
    {% if s.anchor_id != blank %}
      id="{{ s.anchor_id | handleize }}"
    {% endif %}
    data-show="{{ s.show_on }}"
    data-digits="{{ s.digit_style }}"
    data-align="{{ s.text_alignment }}"
    data-align-m="{{ s.text_alignment_mobile }}"
    data-image-pos="{{ s.image_position }}"
    data-valign-m="{{ s.content_valign_mobile }}"
    {% if has_image and s.layout != 'split' %}
      data-has-bg
    {% endif %}
    {% if ended %}
      data-ended
    {% endif %}
    {% if s.animate %}
      data-animate
    {% endif %}
    style="
      --lib-bg: {{ s.color_bg }};
      {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
      --lib-text: {{ s.color_text }};
      --lib-accent: {{ s.color_accent }};
      --lib-accent-text: {{ s.color_accent_text }};
      --lib-overlay-opacity: {{ s.overlay_opacity | divided_by: 100.0 }};
      --lib-pt: {{ s.padding_top }}px;
      --lib-pb: {{ s.padding_bottom }}px;
      --lib-pt-m: {{ s.padding_top_mobile }}px;
      --lib-pb-m: {{ s.padding_bottom_mobile }}px;
    "
  >
    {%- if s.layout != 'split' and has_image -%}
      <div class="lib-countdown__bg" aria-hidden="true">
        {%- render 'lib-image',
          image: s.image,
          image_mobile: s.image_mobile,
          class: 'lib-countdown__img',
          sizes: '100vw',
          eager: eager
        -%}
      </div>
    {%- endif -%}

    <div class="lib-countdown__inner">
      {%- if s.layout == 'split' -%}
        <div class="lib-countdown__media">
          {%- render 'lib-image',
            image: s.image,
            image_mobile: s.image_mobile,
            class: 'lib-countdown__img',
            sizes: '(min-width: 990px) 50vw, 100vw',
            eager: eager,
            placeholder: 'lifestyle-2'
          -%}
        </div>
      {%- endif -%}

      <div class="lib-countdown__copy">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-countdown__heading lib-countdown__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-countdown__text">{{ s.text }}</div>
        {%- endif -%}
      </div>

      {%- if end_iso != blank -%}
        <lib-countdown-banner-timer
          class="lib-countdown__timer"
          data-end="{{ end_iso | escape }}"
          data-end-behavior="{{ s.end_behavior }}"
          {% if s.show_seconds %}
            data-seconds
          {% endif %}
          data-label-days="{{ s.label_days | escape }}"
          data-label-hours="{{ s.label_hours | escape }}"
          data-label-minutes="{{ s.label_minutes | escape }}"
          data-label-seconds="{{ s.label_seconds | escape }}"
        >
          {%- liquid
            assign show_clock = true
            assign start_digits = '--'
            if ended
              assign show_clock = false
              if s.end_behavior == 'zero'
                assign show_clock = true
                assign start_digits = '00'
              endif
            endif
          -%}
          {%- if show_clock -%}
            <div class="lib-countdown__clock" aria-hidden="true" data-clock>
              {%- assign units = 'days,hours,minutes,seconds' | split: ',' -%}
              {%- for unit in units -%}
                {%- if unit == 'seconds' and s.show_seconds == false -%}{%- continue -%}{%- endif -%}
                {%- liquid
                  case unit
                    when 'days'
                      assign unit_label = s.label_days
                    when 'hours'
                      assign unit_label = s.label_hours
                    when 'minutes'
                      assign unit_label = s.label_minutes
                    else
                      assign unit_label = s.label_seconds
                  endcase
                -%}
                {%- unless forloop.first -%}
                  <span class="lib-countdown__sep">:</span>
                {%- endunless -%}
                <span class="lib-countdown__unit">
                  <span class="lib-countdown__num" data-unit="{{ unit }}" aria-live="off">{{ start_digits }}</span>
                  <span class="lib-countdown__label">{{ unit_label | escape }}</span>
                </span>
              {%- endfor -%}
            </div>
          {%- endif -%}
          {%- comment -%} Read by screen readers instead of the ticking digits; the timer rewrites it once a minute. {%- endcomment -%}
          <p class="lib-countdown__date" data-summary {% if ended and s.end_behavior != 'zero' %}hidden{% endif %}>
            <span data-summary-date>
              {%- if s.ends_prefix != blank %}{{ s.ends_prefix | escape }} {% endif -%}
              {{- end_date_text -}}
            </span>
            <span data-summary-text></span>
          </p>
          {%- if s.end_behavior != 'zero' -%}
            <p class="lib-countdown__ended" data-ended-message {% unless ended %}hidden{% endunless %}>
              {%- if s.end_behavior == 'hide' -%}
                This countdown has ended, so the section is hidden on your live store.
              {%- else -%}
                {{- s.ended_message | escape -}}
              {%- endif -%}
            </p>
          {%- endif -%}
        </lib-countdown-banner-timer>
      {%- elsif request.design_mode -%}
        <p class="lib-countdown__ended">Set an end date as YYYY-MM-DD to show the countdown.</p>
      {%- endif -%}

      {%- if s.button_label != blank -%}
        <div class="lib-countdown__actions">
          {%- render 'lib-button',
            label: s.button_label,
            url: s.button_url,
            style: s.button_style,
            new_tab: s.button_new_tab
          -%}
        </div>
      {%- endif -%}
    </div>
  </div>
{%- endunless -%}

{% stylesheet %}
  .lib-countdown {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-countdown[hidden], .lib-countdown [hidden] { display: none !important; }
  @media (max-width: 749px) {
    .lib-countdown { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-countdown[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-countdown[data-show='mobile'] { display: none; }
  }

  /* Background image with overlay (bar and banner layouts). */
  .lib-countdown__bg { position: absolute; inset: 0; z-index: -1; }
  .lib-countdown__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lib-bg);
    opacity: var(--lib-overlay-opacity);
  }
  .lib-countdown__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-countdown__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); background: color-mix(in srgb, var(--lib-text) 8%, transparent); }

  .lib-countdown__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Alignment (banner and split): desktop, then mobile override. */
  .lib-countdown__inner { align-items: flex-start; text-align: left; }
  .lib-countdown[data-align='center'] .lib-countdown__inner { align-items: center; text-align: center; }
  .lib-countdown[data-align='right'] .lib-countdown__inner { align-items: flex-end; text-align: right; }
  @media (max-width: 749px) {
    .lib-countdown[data-align-m='left'] .lib-countdown__inner { align-items: flex-start; text-align: left; }
    .lib-countdown[data-align-m='center'] .lib-countdown__inner { align-items: center; text-align: center; }
    .lib-countdown[data-align-m='right'] .lib-countdown__inner { align-items: flex-end; text-align: right; }
  }

  /* Banner */
  .lib-countdown--banner .lib-countdown__inner { justify-content: center; }
  .lib-countdown--banner .lib-countdown__copy { max-width: 42rem; }
  .lib-countdown--banner[data-has-bg] .lib-countdown__inner { min-height: 26rem; }
  @media (max-width: 749px) {
    .lib-countdown--banner[data-has-bg] .lib-countdown__inner { min-height: 32rem; }
    .lib-countdown--banner[data-valign-m='top'] .lib-countdown__inner { justify-content: flex-start; }
    .lib-countdown--banner[data-valign-m='center'] .lib-countdown__inner { justify-content: center; }
    .lib-countdown--banner[data-valign-m='bottom'] .lib-countdown__inner { justify-content: flex-end; }
    .lib-countdown__clock { gap: 0.75rem; }
    .lib-countdown__label { font-size: 0.6875rem; letter-spacing: 0.04em; }
  }

  /* Inline bar: copy, timer and button in one row from 990px. */
  .lib-countdown--bar .lib-countdown__inner { gap: 1rem; }
  @media (min-width: 990px) {
    .lib-countdown--bar[data-align] .lib-countdown__inner {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      gap: 1rem 2.5rem;
    }
    .lib-countdown--bar .lib-countdown__copy { flex: 1 1 18rem; }
    .lib-countdown--bar[data-align] .lib-countdown__copy { align-items: flex-start; }
    .lib-countdown--bar .lib-countdown__text { margin-top: 0.25rem; }
  }
  .lib-countdown--bar .lib-countdown__heading { font-size: clamp(1.25rem, 2vw, 1.5rem); }
  .lib-countdown--bar .lib-countdown__actions { margin-top: 0; }

  /* Split */
  .lib-countdown__media {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
  }
  @media (min-width: 990px) {
    .lib-countdown--split .lib-countdown__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto;
      column-gap: clamp(2.5rem, 5vw, 4.5rem);
      row-gap: 1.75rem;
      align-content: center;
    }
    .lib-countdown--split .lib-countdown__media { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
    .lib-countdown--split .lib-countdown__inner > :not(.lib-countdown__media) { grid-column: 2; }
    .lib-countdown--split .lib-countdown__copy { align-self: end; }
    .lib-countdown--split .lib-countdown__inner > :last-child:not(.lib-countdown__media) { align-self: start; }
    .lib-countdown--split[data-image-pos='right'] .lib-countdown__media { grid-column: 2; }
    .lib-countdown--split[data-image-pos='right'] .lib-countdown__inner > :not(.lib-countdown__media) { grid-column: 1; }
    .lib-countdown--split[data-align='center'] .lib-countdown__inner > :not(.lib-countdown__media) { justify-self: center; }
    .lib-countdown--split[data-align='right'] .lib-countdown__inner > :not(.lib-countdown__media) { justify-self: end; }
  }

  /* Copy */
  .lib-countdown__copy { display: flex; flex-direction: column; align-items: inherit; }
  .lib-countdown__heading {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-countdown__heading--small { font-size: clamp(1.5rem, 2.5vw, 2rem); }
  .lib-countdown__heading--medium { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
  .lib-countdown__heading--xlarge { font-size: clamp(2.5rem, 6.5vw, 5rem); }
  .lib-countdown__text { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.85; }
  .lib-countdown__text > :first-child { margin-top: 0; }
  .lib-countdown__text > :last-child { margin-bottom: 0; }

  /* Timer */
  .lib-countdown__timer { display: flex; flex-direction: column; align-items: inherit; gap: 0.6rem; }
  .lib-countdown__clock {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
  }
  .lib-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 0; }
  .lib-countdown__num {
    display: block;
    min-width: 2ch;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
  }
  .lib-countdown__label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
  .lib-countdown__sep { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 600; line-height: 1.1; opacity: 0.5; }
  .lib-countdown[data-digits='boxes'] .lib-countdown__sep { display: none; }
  .lib-countdown[data-digits='boxes'] .lib-countdown__num {
    min-width: calc(2ch + 1.5rem);
    padding: 0.7rem 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--lib-text) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 18%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .lib-countdown--bar .lib-countdown__num { font-size: clamp(1.5rem, 2.5vw, 2rem); }
  .lib-countdown--bar[data-digits='boxes'] .lib-countdown__num { padding: 0.55rem 0.6rem; }
  .lib-countdown__date, .lib-countdown__ended { margin: 0; font-size: 0.9375rem; opacity: 0.85; }
  .lib-countdown__ended { font-size: 1.125rem; font-weight: 600; opacity: 1; }
  .lib-countdown__timer.is-live .lib-countdown__date {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lib-countdown__actions { margin-top: 0.5rem; }

  /* Motion: a short drop when a digit changes; none under reduced motion. */
  @media (prefers-reduced-motion: no-preference) {
    .lib-countdown__num.is-ticking { animation: lib-countdown-tick 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  }
  @keyframes lib-countdown-tick {
    from { opacity: 0.2; transform: translateY(-0.2em); }
  }
{% endstylesheet %}

{% javascript %}
  if (!customElements.get('lib-countdown-banner-timer')) {
    customElements.define(
      'lib-countdown-banner-timer',
      class extends HTMLElement {
        connectedCallback() {
          this.end = Date.parse(this.dataset.end || '');
          this.clock = this.querySelector('[data-clock]');
          if (Number.isNaN(this.end) || !this.clock) return;
          this.seconds = this.hasAttribute('data-seconds');
          this.animate = this.closest('[data-animate]') !== null;
          this.nums = {};
          for (const el of this.querySelectorAll('[data-unit]')) this.nums[el.dataset.unit] = el;
          this.summary = this.querySelector('[data-summary-text]');
          this.lastMinute = -1;
          this.classList.add('is-live');
          this.tick();
        }

        disconnectedCallback() {
          clearTimeout(this.timer);
        }

        tick() {
          const left = this.end - Date.now();
          if (left <= 0) return this.finish();
          const total = Math.floor(left / 1000);
          const parts = {
            days: Math.floor(total / 86400),
            hours: Math.floor((total % 86400) / 3600),
            minutes: Math.floor((total % 3600) / 60),
            seconds: total % 60,
          };
          for (const [unit, value] of Object.entries(parts)) this.set(unit, value);
          const minute = Math.floor(total / 60);
          if (minute !== this.lastMinute) {
            this.lastMinute = minute;
            this.speak(parts);
          }
          // Wake up on the next second (or minute) boundary of the countdown.
          const step = this.seconds ? 1000 : 60000;
          this.timer = setTimeout(() => this.tick(), (left % step) || step);
        }

        set(unit, value) {
          const el = this.nums[unit];
          if (!el) return;
          const text = String(value).padStart(2, '0');
          if (el.textContent === text) return;
          el.textContent = text;
          if (this.animate) {
            el.classList.remove('is-ticking');
            void el.offsetWidth;
            el.classList.add('is-ticking');
          }
        }

        speak(p) {
          if (!this.summary) return;
          const d = this.dataset;
          const bits = [];
          if (p.days) bits.push(`${p.days} ${d.labelDays}`);
          if (p.days || p.hours) bits.push(`${p.hours} ${d.labelHours}`);
          bits.push(`${p.minutes} ${d.labelMinutes}`);
          this.summary.textContent = `: ${bits.join(' ')}`;
        }

        finish() {
          clearTimeout(this.timer);
          const behavior = this.dataset.endBehavior;
          const root = this.closest('.lib-countdown');
          const message = this.querySelector('[data-ended-message]');
          const designMode = window.Shopify && window.Shopify.designMode;
          if (behavior === 'hide' && root && !designMode) {
            root.hidden = true;
            return;
          }
          if (behavior === 'zero') {
            for (const unit of Object.keys(this.nums)) this.set(unit, 0);
            if (this.summary) this.summary.textContent = this.summary.textContent.replace(/\d+/g, '0');
            return;
          }
          this.clock.hidden = true;
          if (this.summary) this.summary.parentElement.hidden = true;
          if (message) message.hidden = false;
          if (root) root.setAttribute('data-ended', '');
        }
      }
    );
  }
{% endjavascript %}

{% schema %}
{
  "name": "Lib · Countdown banner",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    {"type": "header", "content": "Content"},
    {"type": "inline_richtext", "id": "heading", "label": "Heading", "default": "25% off the whole studio"},
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        {"value": "h1", "label": "H1"},
        {"value": "h2", "label": "H2"},
        {"value": "h3", "label": "H3"},
        {"value": "p", "label": "Paragraph"}
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        {"value": "small", "label": "Small"},
        {"value": "medium", "label": "Medium"},
        {"value": "large", "label": "Large"},
        {"value": "xlarge", "label": "Extra large"}
      ],
      "default": "large"
    },
    {"type": "richtext", "id": "text", "label": "Text", "default": "<p>Vases, candles and tableware, while the kiln cools down for the year.</p>"},

    {"type": "header", "content": "Countdown"},
    {"type": "text", "id": "end_date", "label": "End date", "info": "Format YYYY-MM-DD, for example 2026-12-31.", "default": "2026-12-31"},
    {"type": "text", "id": "end_time", "label": "End time", "info": "24-hour format HH:MM, for example 23:59. Leave blank for 23:59.", "default": "23:59"},
    {
      "type": "select",
      "id": "utc_offset",
      "label": "Time zone of the end time (UTC offset)",
      "info": "The date and time above are read in this offset, so the timer ends at the same moment for every visitor wherever they are. Pick your shop's offset, and remember daylight saving time: for example UTC+01:00 is winter time in Berlin, UTC+02:00 summer time.",
      "options": [
        {"value": "-12:00", "label": "UTC−12:00"},
        {"value": "-11:00", "label": "UTC−11:00"},
        {"value": "-10:00", "label": "UTC−10:00 (Hawaii)"},
        {"value": "-09:30", "label": "UTC−09:30"},
        {"value": "-09:00", "label": "UTC−09:00 (Alaska)"},
        {"value": "-08:00", "label": "UTC−08:00 (Pacific standard)"},
        {"value": "-07:00", "label": "UTC−07:00 (Mountain standard, Pacific daylight)"},
        {"value": "-06:00", "label": "UTC−06:00 (Central standard)"},
        {"value": "-05:00", "label": "UTC−05:00 (Eastern standard, Central daylight)"},
        {"value": "-04:00", "label": "UTC−04:00 (Atlantic, Eastern daylight)"},
        {"value": "-03:30", "label": "UTC−03:30"},
        {"value": "-03:00", "label": "UTC−03:00"},
        {"value": "-02:00", "label": "UTC−02:00"},
        {"value": "-01:00", "label": "UTC−01:00"},
        {"value": "+00:00", "label": "UTC±00:00 (London winter)"},
        {"value": "+01:00", "label": "UTC+01:00 (Central Europe winter, London summer)"},
        {"value": "+02:00", "label": "UTC+02:00 (Central Europe summer)"},
        {"value": "+03:00", "label": "UTC+03:00"},
        {"value": "+03:30", "label": "UTC+03:30"},
        {"value": "+04:00", "label": "UTC+04:00"},
        {"value": "+04:30", "label": "UTC+04:30"},
        {"value": "+05:00", "label": "UTC+05:00"},
        {"value": "+05:30", "label": "UTC+05:30 (India)"},
        {"value": "+05:45", "label": "UTC+05:45"},
        {"value": "+06:00", "label": "UTC+06:00"},
        {"value": "+06:30", "label": "UTC+06:30"},
        {"value": "+07:00", "label": "UTC+07:00"},
        {"value": "+08:00", "label": "UTC+08:00"},
        {"value": "+09:00", "label": "UTC+09:00"},
        {"value": "+09:30", "label": "UTC+09:30"},
        {"value": "+10:00", "label": "UTC+10:00"},
        {"value": "+10:30", "label": "UTC+10:30"},
        {"value": "+11:00", "label": "UTC+11:00"},
        {"value": "+12:00", "label": "UTC+12:00"},
        {"value": "+13:00", "label": "UTC+13:00"},
        {"value": "+14:00", "label": "UTC+14:00"}
      ],
      "default": "+00:00"
    },
    {"type": "checkbox", "id": "show_seconds", "label": "Show seconds", "info": "Without seconds the timer updates once a minute.", "default": true},
    {"type": "text", "id": "label_days", "label": "Days label", "default": "Days"},
    {"type": "text", "id": "label_hours", "label": "Hours label", "default": "Hours"},
    {"type": "text", "id": "label_minutes", "label": "Minutes label", "default": "Minutes"},
    {"type": "text", "id": "label_seconds", "label": "Seconds label", "default": "Seconds", "visible_if": "{{ section.settings.show_seconds }}"},
    {"type": "text", "id": "ends_prefix", "label": "End date prefix", "info": "Shown before the end date, e.g. \"Ends 31 December\". Visible before the timer starts; screen readers hear it with the time left, updated once a minute.", "default": "Ends"},
    {
      "type": "select",
      "id": "end_behavior",
      "label": "When the timer reaches zero",
      "info": "The section also checks the end date when the page is built, so an ended offer does not flash on load.",
      "options": [
        {"value": "hide", "label": "Hide the section"},
        {"value": "message", "label": "Show a message"},
        {"value": "zero", "label": "Keep showing 00"}
      ],
      "default": "message"
    },
    {"type": "text", "id": "ended_message", "label": "Ended message", "default": "This offer has ended. Thank you for shopping with us.", "visible_if": "{{ section.settings.end_behavior == 'message' }}"},

    {"type": "header", "content": "Image"},
    {"type": "image_picker", "id": "image", "label": "Desktop image", "info": "Optional in the bar and banner layouts (shown behind the text); the split layout shows it beside the text."},
    {"type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px; a portrait crop works best."},
    {
      "type": "select",
      "id": "image_position",
      "label": "Image position on desktop",
      "options": [
        {"value": "left", "label": "Left"},
        {"value": "right", "label": "Right"}
      ],
      "default": "left",
      "visible_if": "{{ section.settings.layout == 'split' }}"
    },
    {"type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 40, "visible_if": "{{ section.settings.layout != 'split' }}", "info": "The overlay uses the background color."},

    {"type": "header", "content": "Button"},
    {"type": "text", "id": "button_label", "label": "Button label", "default": "Shop the sale"},
    {"type": "url", "id": "button_url", "label": "Button link"},
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        {"value": "primary", "label": "Solid"},
        {"value": "outline", "label": "Outline"},
        {"value": "text", "label": "Text link"}
      ],
      "default": "primary"
    },
    {"type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false},

    {"type": "header", "content": "Layout"},
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {"value": "bar", "label": "Inline bar"},
        {"value": "banner", "label": "Banner"},
        {"value": "split", "label": "Split image and text"}
      ],
      "default": "banner"
    },
    {
      "type": "select",
      "id": "content_valign_mobile",
      "label": "Content position on mobile",
      "info": "Place the text where the mobile image has space.",
      "options": [
        {"value": "top", "label": "Top"},
        {"value": "center", "label": "Middle"},
        {"value": "bottom", "label": "Bottom"}
      ],
      "default": "center",
      "visible_if": "{{ section.settings.layout == 'banner' }}"
    },
    {
      "type": "select",
      "id": "digit_style",
      "label": "Digit style",
      "options": [
        {"value": "boxes", "label": "Boxes"},
        {"value": "plain", "label": "Plain with colons"}
      ],
      "default": "boxes"
    },
    {"type": "text_alignment", "id": "text_alignment", "label": "Alignment on desktop", "info": "Banner and split layouts.", "default": "center"},
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Alignment on mobile",
      "options": [
        {"value": "left", "label": "Left"},
        {"value": "center", "label": "Center"},
        {"value": "right", "label": "Right"}
      ],
      "default": "center"
    },

    {"type": "header", "content": "Colors"},
    {"type": "color", "id": "color_bg", "label": "Background", "default": "#1C1917"},
    {"type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color."},
    {"type": "color", "id": "color_text", "label": "Text", "default": "#FAFAF9"},
    {"type": "color", "id": "color_accent", "label": "Accent (button)", "default": "#E8B04A"},
    {"type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#1C1917"},

    {"type": "header", "content": "Spacing and visibility"},
    {"type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 64},
    {"type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 64},
    {"type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40},
    {"type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40},
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        {"value": "all", "label": "All devices"},
        {"value": "desktop", "label": "Desktop only"},
        {"value": "mobile", "label": "Mobile only"}
      ],
      "default": "all"
    },
    {"type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id."},

    {"type": "header", "content": "Motion"},
    {"type": "checkbox", "id": "animate", "label": "Animate digits when they change", "info": "Always off when the visitor prefers reduced motion.", "default": true}
  ],
  "presets": [
    {
      "name": "Lib · Countdown banner"
    }
  ]
}
{% endschema %}