{%- comment -%}
Bottom Sticky Promo Bar — Anniversary version
Uses same layout/CSS as BFCM, but threshold logic only:
- 15% off sitewide
- extra discount unlocked at market-specific threshold
{%- endcomment -%}

<link rel="stylesheet" href="{{ 'bfcm-bottom.css' | asset_url }}">

{%- assign show_timer = section.settings.enable_countdown -%}
{%- assign right_mode = section.settings.right_content_mode -%}
{%- assign show_right = false -%}
{%- if right_mode != 'none' -%}
  {%- assign show_right = true -%}
{%- endif -%}

<div
  id="bfcm-bottom"
  class="bfcm-bottom color-{{ section.settings.color_scheme }}{% if section.settings.shadow %} bfcm-bottom--shadow{% endif %}"
  data-bfcm-bottom
  data-remember="{{ section.settings.remember_dismiss }}"
  data-remember-hours="{{ section.settings.dismiss_hours }}"
  data-end-label="{{ section.settings.timer_end_message | escape }}"
  data-right-mode="{{ right_mode }}"
  data-timer-enabled="{% if show_timer %}true{% else %}false{% endif %}"
  data-threshold-cad="{{ section.settings.threshold_cad }}"
  data-threshold-usd="{{ section.settings.threshold_usd }}"
  data-threshold-gbp="{{ section.settings.threshold_gbp }}"
  data-discount-label="{{ section.settings.discount_label | escape }}"
  data-unlocked-text="{{ section.settings.unlocked_text | escape }}"
  data-away-text-template="{{ section.settings.away_text_template | escape }}"
  style="display:none;"
>
  <div class="bfcm-container {{ section.settings.section_width }}">
    <div class="bfcm-wrap">
      <button class="bfcm-close" type="button" aria-label="Close">×</button>

      <div class="bfcm-body">
        <div class="bfcm-row
          {% if show_timer and show_right %} bfcm-row--3col{% endif %}
          {% if show_timer and show_right == false %} bfcm-row--timer-only{% endif %}
          {% if show_timer == false and show_right %} bfcm-row--right-only{% endif %}
        ">
          {%- if show_timer -%}
            <div class="bfcm-col bfcm-col--label">
              <div class="bfcm-timer-label" data-bfcm-label>
                {{ section.settings.timer_label | default: 'ENDS IN' }}
              </div>
            </div>

            <div class="bfcm-col bfcm-col--timer">
              <div
                id="bfcm-timer"
                class="countdown-timer"
                data-year="{{ section.settings.timer_year }}"
                data-month="{{ section.settings.timer_month }}"
                data-day="{{ section.settings.timer_day }}"
                data-hour="{{ section.settings.timer_hour }}"
                data-minute="{{ section.settings.timer_minute }}"
                data-show-days="{{ section.settings.show_timer_days }}"
                data-show-hours="{{ section.settings.show_timer_hours }}"
                data-show-minutes="{{ section.settings.show_timer_minutes }}"
                data-show-seconds="{{ section.settings.show_timer_seconds }}"
              >
                <div class="countdown-timer__columns">
                  <div class="countdown-timer__column" data-unit="days">
                    <span class="countdown-timer__column-number" data-bfcm-days>00</span>
                    <span class="countdown-timer__column-text">D</span>
                  </div>
                  <div class="countdown-timer__column" data-unit="hours">
                    <span class="countdown-timer__column-number" data-bfcm-hours>00</span>
                    <span class="countdown-timer__column-text">H</span>
                  </div>
                  <div class="countdown-timer__column" data-unit="minutes">
                    <span class="countdown-timer__column-number" data-bfcm-minutes>00</span>
                    <span class="countdown-timer__column-text">M</span>
                  </div>
                  <div class="countdown-timer__column" data-unit="seconds">
                    <span class="countdown-timer__column-number" data-bfcm-seconds>00</span>
                    <span class="countdown-timer__column-text">S</span>
                  </div>
                </div>
              </div>
            </div>
          {%- endif -%}

          {%- if right_mode == 'threshold' -%}
            <div class="bfcm-col bfcm-col--text">
              <div class="bfcm-text" data-bfcm-text>Loading…</div>
            </div>
          {%- elsif right_mode == 'custom' -%}
            <div class="bfcm-col bfcm-col--text">
              <div class="bfcm-text bfcm-text--custom">
                {{ section.settings.custom_right_text }}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ 'anniversary-bottom.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Anniversary Bottom Bar",
  "tag": "section",
  "class": "section-bottom-anniversary",
  "settings": [
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "max-w-page", "label": "Page width" },
        { "value": "max-w-fluid", "label": "Fluid" },
        { "value": "max-w-full", "label": "Full width" }
      ],
      "default": "max-w-fluid"
    },

    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-2" },
    { "type": "checkbox", "id": "shadow", "label": "Top shadow", "default": true },

    { "type": "header", "content": "Countdown Timer" },
    { "type": "checkbox", "id": "enable_countdown", "label": "Show countdown timer", "default": true },
    { "type": "inline_richtext", "id": "timer_label", "label": "Timer label", "default": "ENDS IN" },
    { "type": "number", "id": "timer_year", "label": "Year", "default": 2026 },
    {
      "type": "select",
      "id": "timer_month",
      "label": "Month",
      "options": [
        { "value": "01", "label": "01" }, { "value": "02", "label": "02" }, { "value": "03", "label": "03" },
        { "value": "04", "label": "04" }, { "value": "05", "label": "05" }, { "value": "06", "label": "06" },
        { "value": "07", "label": "07" }, { "value": "08", "label": "08" }, { "value": "09", "label": "09" },
        { "value": "10", "label": "10" }, { "value": "11", "label": "11" }, { "value": "12", "label": "12" }
      ],
      "default": "03"
    },
    { "type": "range", "id": "timer_day", "label": "Day", "min": 1, "max": 31, "step": 1, "default": 31 },
    { "type": "range", "id": "timer_hour", "label": "Hour (0–23)", "min": 0, "max": 23, "step": 1, "default": 23 },
    { "type": "range", "id": "timer_minute", "label": "Minute (0–59)", "min": 0, "max": 59, "step": 1, "default": 59 },
    { "type": "checkbox", "id": "show_timer_days", "label": "Show days", "default": true },
    { "type": "checkbox", "id": "show_timer_hours", "label": "Show hours", "default": true },
    { "type": "checkbox", "id": "show_timer_minutes", "label": "Show minutes", "default": true },
    { "type": "checkbox", "id": "show_timer_seconds", "label": "Show seconds", "default": true },
    { "type": "inline_richtext", "id": "timer_end_message", "label": "End message", "default": "Sale Has Ended" },

    { "type": "header", "content": "Right side content" },
    {
      "type": "select",
      "id": "right_content_mode",
      "label": "Right side shows",
      "options": [
        { "value": "threshold", "label": "Threshold message" },
        { "value": "custom", "label": "Custom text" },
        { "value": "none", "label": "Nothing" }
      ],
      "default": "threshold"
    },
    {
      "type": "inline_richtext",
      "id": "custom_right_text",
      "label": "Custom right text",
      "default": "15% off sitewide + an extra 15% off over threshold"
    },

    { "type": "header", "content": "Threshold settings" },
    { "type": "number", "id": "threshold_cad", "label": "CAD threshold", "default": 500 },
    { "type": "number", "id": "threshold_usd", "label": "USD threshold", "default": 370 },
    { "type": "number", "id": "threshold_gbp", "label": "GBP threshold", "default": 280 },

    { "type": "text", "id": "discount_label", "label": "Discount label", "default": "AN EXTRA 15% OFF" },
    { "type": "text", "id": "unlocked_text", "label": "Unlocked text", "default": "AN EXTRA 15% OFF UNLOCKED" },
    {
    "type": "text",
    "id": "away_text_template",
    "label": "Away text template",
    "default": "[[amount]] AWAY FROM [[discount]]"
    },

    { "type": "header", "content": "Dismiss" },
    { "type": "checkbox", "id": "remember_dismiss", "label": "Remember dismiss", "default": true },
    { "type": "range", "id": "dismiss_hours", "label": "Hide after dismiss (hours)", "min": 1, "max": 48, "step": 1, "default": 12 }
  ],
  "presets": [
    { "name": "Threshold Bottom Sticky Bar" }
  ]
}
{% endschema %}