{% comment %}
  Snippet: Limited Time Sale Block V2
  - Two-column layout: image panel + content panel
  - Configurable image position (desktop), mobile always stacks image on top
  - Divider with optional icon + label
  - Headline with accent color span
  - CTA button with arrow icon
  - Inline countdown timer with localStorage persistence + days support
  - Sell-out risk + shipping badge row
  - Centered badge chip (pill on top border)
{% endcomment %}

{%- capture ltsv2_countdown_html -%}
<div class="ltsv2-countdown-{{ block.id }}"
     id="ltsv2-countdown-{{ block.id }}"
     {% if block.settings.deal_mode == 'duration' %}
       data-days="{{ block.settings.duration_days }}"
       data-hours="{{ block.settings.duration_hours }}"
       data-minutes="{{ block.settings.duration_minutes }}"
       data-seconds="{{ block.settings.duration_seconds }}"
     {% else %}
       data-deadline="{{ block.settings.deadline }}"
     {% endif %}>
  <span class="ltsv2-cd-cell ltsv2-cd-days-cell-{{ block.id }}" style="display:none">
    <span class="ltsv2-cd-digits" id="ltsv2-dd-{{ block.id }}">00</span>
    <span class="ltsv2-cd-unit">{{ block.settings.timer_label_days | default: 'DAYS' }}</span>
  </span>
  <span class="ltsv2-cd-sep ltsv2-cd-days-sep-{{ block.id }}" style="display:none">:</span>
  <span class="ltsv2-cd-cell">
    <span class="ltsv2-cd-digits" id="ltsv2-hh-{{ block.id }}">{{ block.settings.duration_hours | default: 0 | prepend: '0' | slice: -2, 2 }}</span>
    <span class="ltsv2-cd-unit">{{ block.settings.timer_label_hours | default: 'HRS' }}</span>
  </span>
  <span class="ltsv2-cd-sep">:</span>
  <span class="ltsv2-cd-cell">
    <span class="ltsv2-cd-digits" id="ltsv2-mm-{{ block.id }}">{{ block.settings.duration_minutes | default: 0 | prepend: '0' | slice: -2, 2 }}</span>
    <span class="ltsv2-cd-unit">{{ block.settings.timer_label_minutes | default: 'MIN' }}</span>
  </span>
  <span class="ltsv2-cd-sep">:</span>
  <span class="ltsv2-cd-cell">
    <span class="ltsv2-cd-digits" id="ltsv2-ss-{{ block.id }}">{{ block.settings.duration_seconds | default: 0 | prepend: '0' | slice: -2, 2 }}</span>
    <span class="ltsv2-cd-unit">{{ block.settings.timer_label_seconds | default: 'SEC' }}</span>
  </span>
</div>
{%- endcapture -%}

<div class="ltsv2-outer-{{ block.id }}"
     style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px;
            margin-left: -{{ block.settings.container_padding_horizontal }}px;
            margin-right: -{{ block.settings.container_padding_horizontal }}px;">

  {%- comment -%} Badge chip — centered on top border {%- endcomment -%}
  {% if block.settings.badge_text != blank %}
    <div class="ltsv2-badge-wrapper-{{ block.id }}">
      <div class="ltsv2-badge-{{ block.id }}">{{ block.settings.badge_text }}</div>
    </div>
  {% endif %}

  <div class="ltsv2-card-{{ block.id }}">

    {%- comment -%} IMAGE PANEL {%- endcomment -%}
    <div class="ltsv2-photo-{{ block.id }}">
      {% if block.settings.image != blank %}
        {{ block.settings.image | image_url: width: 800 | image_tag:
            class: 'ltsv2-photo-img',
            loading: 'lazy',
            sizes: '(max-width: 749px) 100vw, 50vw' }}
      {% else %}
        <div class="ltsv2-photo-placeholder">Product Image</div>
      {% endif %}
    </div>

    {%- comment -%} CONTENT PANEL {%- endcomment -%}
    <div class="ltsv2-content-{{ block.id }}">

      {%- comment -%} Top label — centered above headline {%- endcomment -%}
      {% if block.settings.divider_label != blank %}
        <div class="ltsv2-top-label-{{ block.id }}">
          <span class="ltsv2-divider-label-{{ block.id }}">{{ block.settings.divider_label }}</span>
        </div>
      {% endif %}

      {%- comment -%} Headline {%- endcomment -%}
      {% if block.settings.headline != blank or block.settings.headline_accent != blank %}
        <h2 class="ltsv2-heading-{{ block.id }}">
          {% if block.settings.headline_accent != blank %}
            <span class="ltsv2-heading-accent-{{ block.id }}">{{ block.settings.headline_accent }}</span>
          {% endif %}
          {% if block.settings.headline != blank %}
            {{ block.settings.headline }}
          {% endif %}
        </h2>
      {% endif %}

      {%- comment -%} Subtitle {%- endcomment -%}
      {% if block.settings.subtitle != blank %}
        <p class="ltsv2-subtitle-{{ block.id }}">{{ block.settings.subtitle }}</p>
      {% endif %}

      {%- comment -%} CTA button {%- endcomment -%}
      {% if block.settings.cta_label != blank %}
        <a href="{{ block.settings.cta_link | default: '#' }}" class="ltsv2-cta-{{ block.id }}">
          <span class="ltsv2-cta-text">{{ block.settings.cta_label }}</span>
          <span class="ltsv2-cta-icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
              <path fill-rule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z" clip-rule="evenodd"/>
            </svg>
          </span>
        </a>
      {% endif %}

      {%- comment -%} Countdown {%- endcomment -%}
      {% if block.settings.enable_countdown %}
        <div class="ltsv2-deal-row-{{ block.id }}{% if block.settings.countdown_inline %} ltsv2-deal-row-inline-{{ block.id }}{% endif %}">
          {% if block.settings.countdown_label != blank %}
            <span class="ltsv2-deal-label-{{ block.id }}">{{ block.settings.countdown_label }}</span>
          {% endif %}
          {{ ltsv2_countdown_html }}
        </div>
      {% endif %}

      {%- comment -%} Badges: sell-out risk + shipping {%- endcomment -%}
      {% if block.settings.sellout_risk_label != blank or block.settings.shipping_text != blank %}
        <div class="ltsv2-badges-{{ block.id }}">
          {% if block.settings.sellout_risk_label != blank %}
            <div class="ltsv2-badge-item">
              <span class="ltsv2-badge-label-{{ block.id }}">{{ block.settings.sellout_risk_label }}</span>
              <span class="ltsv2-badge-value-{{ block.id }}">{{ block.settings.sellout_risk }}</span>
            </div>
          {% endif %}
          {% if block.settings.sellout_risk_label != blank and block.settings.shipping_text != blank %}
            <span class="ltsv2-badge-sep-{{ block.id }}">|</span>
          {% endif %}
          {% if block.settings.shipping_text != blank %}
            <div class="ltsv2-badge-item">
              <span class="ltsv2-shipping-{{ block.id }}">{{ block.settings.shipping_text }}</span>
            </div>
          {% endif %}
        </div>
      {% endif %}

      {%- comment -%} Guarantee fine print {%- endcomment -%}
      {% if block.settings.guarantee_text != blank %}
        <p class="ltsv2-guarantee-{{ block.id }}">{{ block.settings.guarantee_text }}</p>
      {% endif %}

    </div>{%- comment -%} /content {%- endcomment -%}
  </div>{%- comment -%} /card {%- endcomment -%}
</div>

<style>
  /* ── Outer wrapper / bleed ── */
  .ltsv2-outer-{{ block.id }} {
    position: relative;
  }

  /* ── Badge chip ── */
  .ltsv2-badge-wrapper-{{ block.id }} {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    top: 16px;
    margin-bottom: -8px;
  }

  .ltsv2-badge-{{ block.id }} {
    background: {{ block.settings.badge_bg_color }};
    color: {{ block.settings.badge_text_color }};
    padding: 8px 20px;
    border-radius: {{ block.settings.badge_border_radius }}px;
    font-size: {{ block.settings.badge_font_size }}px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
  }

  /* ── Card ── */
  .ltsv2-card-{{ block.id }} {
    background: {{ block.settings.bg_color }};
    border: {{ block.settings.border_width }}px {{ block.settings.border_style }} {{ block.settings.border_color }};
    border-radius: {{ block.settings.border_radius }}px;
    overflow: hidden;
    display: flex;
    flex-direction: {% if block.settings.image_position == 'right' %}row-reverse{% else %}row{% endif %};
    align-items: stretch;
  }

  /* ── Photo panel ── */
  .ltsv2-photo-{{ block.id }} {
    flex: 0 0 {{ block.settings.image_width_percent }}%;
    width: {{ block.settings.image_width_percent }}%;
    background: {{ block.settings.image_bg_color }};
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .ltsv2-photo-{{ block.id }} .ltsv2-photo-img {
    width: 100%;
    height: 100%;
    object-fit: {{ block.settings.image_object_fit }};
    object-position: center;
    display: block;
  }

  .ltsv2-photo-placeholder {
    color: #999;
    font-size: 14px;
    padding: 40px;
  }

  /* ── Content panel ── */
  .ltsv2-content-{{ block.id }} {
    flex: 1;
    min-width: 0;
    padding: {{ block.settings.content_padding }}px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: {{ block.settings.content_gap }}px;
    text-align: center;
  }

  /* ── Top label row ── */
  .ltsv2-top-label-{{ block.id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  .ltsv2-divider-label-{{ block.id }} {
    font-size: {{ block.settings.divider_label_size }}px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: {{ block.settings.divider_color }};
    white-space: nowrap;
  }

  /* ── Heading ── */
  .ltsv2-heading-{{ block.id }} {
    font-size: {{ block.settings.headline_size }}px;
    font-weight: 900;
    line-height: 1.2;
    color: {{ block.settings.text_color }};
    margin: 0;
    letter-spacing: var(--letter-spacing-heading);
  }

  .ltsv2-heading-accent-{{ block.id }} {
    color: {{ block.settings.accent_color }};
  }

  /* ── Subtitle ── */
  .ltsv2-subtitle-{{ block.id }} {
    font-size: {{ block.settings.subtitle_size }}px;
    color: {{ block.settings.text_color }};
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
    max-width: 360px;
  }

  /* ── CTA button ── */
  .ltsv2-cta-{{ block.id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    background: {{ block.settings.cta_bg_color }};
    color: {{ block.settings.cta_text_color }};
    border-radius: {{ block.settings.cta_border_radius }}px;
    font-size: {{ block.settings.cta_font_size }}px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    position: relative;
  }

  .ltsv2-cta-{{ block.id }}:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: {{ block.settings.cta_text_color }};
  }

  .ltsv2-cta-text {
    font-weight: 900;
  }

  .ltsv2-cta-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* ── Countdown deal row ── */
  .ltsv2-deal-row-{{ block.id }} {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  /* Inline: label + timer on same line */
  .ltsv2-deal-row-inline-{{ block.id }} {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .ltsv2-deal-row-inline-{{ block.id }} .ltsv2-cd-sep {
    margin-bottom: 0;
  }

  .ltsv2-deal-label-{{ block.id }} {
    font-size: {{ block.settings.countdown_label_size }}px;
    font-weight: 800;
    color: {{ block.settings.text_color }};
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* ── Countdown digits ── */
  .ltsv2-countdown-{{ block.id }} {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ltsv2-cd-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .ltsv2-cd-digits {
    font-size: {{ block.settings.countdown_size }}px;
    font-weight: 800;
    color: {{ block.settings.countdown_color }};
    line-height: 1;
    letter-spacing: 1px;
  }

  .ltsv2-cd-unit {
    font-size: {{ block.settings.timer_label_size }}px;
    font-weight: 700;
    color: {{ block.settings.text_color }};
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
  }

  .ltsv2-cd-sep {
    font-size: {{ block.settings.countdown_size }}px;
    font-weight: 800;
    color: {{ block.settings.countdown_color }};
    line-height: 1;
    margin-bottom: {{ block.settings.timer_label_size | plus: 4 }}px;
  }

  /* ── Badges row ── */
  .ltsv2-badges-{{ block.id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: {{ block.settings.badges_bg_color }};
    border: 1px {{ block.settings.badges_border_style }} {{ block.settings.badges_border_color }};
    border-radius: {{ block.settings.badges_border_radius }}px;
    padding: 10px 16px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  .ltsv2-badge-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ltsv2-badge-label-{{ block.id }} {
    font-size: {{ block.settings.badges_font_size }}px;
    font-weight: 500;
    color: {{ block.settings.text_color }};
  }

  .ltsv2-badge-value-{{ block.id }} {
    font-size: {{ block.settings.badges_font_size }}px;
    font-weight: 800;
    color: {{ block.settings.sellout_risk_color }};
  }

  .ltsv2-badge-sep-{{ block.id }} {
    color: {{ block.settings.text_color }};
    opacity: 0.3;
    font-size: {{ block.settings.badges_font_size }}px;
  }

  .ltsv2-shipping-{{ block.id }} {
    font-size: {{ block.settings.badges_font_size }}px;
    font-weight: 800;
    color: {{ block.settings.text_color }};
  }

  /* ── Guarantee ── */
  .ltsv2-guarantee-{{ block.id }} {
    font-size: {{ block.settings.guarantee_size }}px;
    color: {{ block.settings.text_color }};
    opacity: {% if block.settings.guarantee_dim %}0.65{% else %}1{% endif %};
    margin: 0;
    text-align: center;
  }

  /* ── Mobile ── */
  @media (max-width: 749px) {
    .ltsv2-outer-{{ block.id }} {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .ltsv2-card-{{ block.id }} {
      flex-direction: column;
    }

    .ltsv2-photo-{{ block.id }} {
      flex: none;
      width: 100%;
      min-height: {{ block.settings.mobile_image_height }}px;
      order: 0;
    }

    .ltsv2-content-{{ block.id }} {
      order: 1;
      padding: {{ block.settings.mobile_content_padding }}px;
    }

    .ltsv2-heading-{{ block.id }} {
      font-size: {{ block.settings.mobile_headline_size }}px;
    }

    .ltsv2-subtitle-{{ block.id }} {
      font-size: {{ block.settings.mobile_subtitle_size }}px;
    }

    .ltsv2-cd-digits {
      font-size: {{ block.settings.mobile_countdown_size }}px;
    }

    .ltsv2-cd-sep {
      font-size: {{ block.settings.mobile_countdown_size }}px;
    }
  }
</style>

{% if block.settings.enable_countdown %}
<script>
(function(){
  const el = document.getElementById('ltsv2-countdown-{{ block.id }}');
  if (!el) return;

  const ddEl     = document.getElementById('ltsv2-dd-{{ block.id }}');
  const hhEl     = document.getElementById('ltsv2-hh-{{ block.id }}');
  const mmEl     = document.getElementById('ltsv2-mm-{{ block.id }}');
  const ssEl     = document.getElementById('ltsv2-ss-{{ block.id }}');
  const daysCell = el.querySelector('.ltsv2-cd-days-cell-{{ block.id }}');
  const daysSep  = el.querySelector('.ltsv2-cd-days-sep-{{ block.id }}');

  const deadlineAttr = el.getAttribute('data-deadline');
  const storageKey   = 'ascendify-v2-{{ block.id }}';
  const configKey    = storageKey + '-config';
  let endTime;

  if (deadlineAttr) {
    endTime = new Date(deadlineAttr).getTime();
  } else {
    const D = parseInt(el.getAttribute('data-days')    || '0', 10);
    const H = parseInt(el.getAttribute('data-hours')   || '0', 10);
    const M = parseInt(el.getAttribute('data-minutes') || '0', 10);
    const S = parseInt(el.getAttribute('data-seconds') || '0', 10);
    const durationMs = ((D * 24 * 60 + H * 60 + M) * 60 + S) * 1000;
    const configVal  = D + '-' + H + '-' + M + '-' + S;

    const storedConfig = localStorage.getItem(configKey);
    const storedEnd    = localStorage.getItem(storageKey);

    if (storedEnd && storedConfig === configVal && parseInt(storedEnd, 10) > Date.now()) {
      endTime = parseInt(storedEnd, 10);
    } else {
      endTime = Date.now() + durationMs;
      localStorage.setItem(storageKey, String(endTime));
      localStorage.setItem(configKey, configVal);
    }
  }

  function pad(n) { return String(n).padStart(2, '0'); }

  function tick() {
    const diff         = Math.max(0, endTime - Date.now());
    const totalSeconds = Math.floor(diff / 1000);
    const days    = Math.floor(totalSeconds / 86400);
    const hours   = Math.floor((totalSeconds % 86400) / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    if (days > 0) {
      if (daysCell) daysCell.style.display = 'inline-flex';
      if (daysSep)  daysSep.style.display  = 'inline';
      if (ddEl)     ddEl.textContent = pad(days);
    } else {
      if (daysCell) daysCell.style.display = 'none';
      if (daysSep)  daysSep.style.display  = 'none';
    }

    hhEl.textContent = pad(hours);
    mmEl.textContent = pad(minutes);
    ssEl.textContent = pad(seconds);

    if (diff <= 0) clearInterval(timerId);
  }

  tick();
  const timerId = setInterval(tick, 1000);
})();
</script>
{% endif %}