{%- comment -%}
Bottom Sticky Promo Bar — refined layout
Desktop:
- Both ON: [ ENDS IN | TIMER | Right text ]
- Timer OFF: right text centered
- Right OFF: timer centered

Mobile:
- Both ON: row1 [ ENDS IN | TIMER ], row2 [ Right text ]
- Timer OFF: row1 [ Right text ] centered
- Right OFF: row1 [ TIMER ] centered
{%- 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-remember="{{ section.settings.remember_dismiss }}"
  data-remember-hours="{{ section.settings.dismiss_hours }}"
  data-us-tiers="{{ section.settings.us_tiers | escape }}"
  data-ca-tiers="{{ section.settings.ca_tiers | escape }}"
  data-is-usa="{% if localization.country.iso_code == 'US' %}true{% else %}false{% endif %}"
  data-end-label="{{ section.settings.timer_end_message | escape }}"
  data-right-mode="{{ right_mode }}"
  data-timer-enabled="{% if show_timer %}true{% else %}false{% endif %}"
  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 -%}
            <!-- Left: label (changes to end label in JS when timer ends) -->
            <div class="bfcm-col bfcm-col--label">
              <div class="bfcm-timer-label" data-bfcm-label>
                {{ section.settings.timer_label | default: 'ENDS IN:' }}
              </div>
            </div>

            <!-- Center: timer -->
            <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' -%}
            <!-- Right: threshold message -->
            <div class="bfcm-col bfcm-col--text">
              <div class="bfcm-text" data-bfcm-text>Loading…</div>
            </div>
          {%- elsif right_mode == 'custom' -%}
            <!-- Right: custom text -->
            <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="{{ 'bfcm-bottom.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Bottom Promo Sticky Bar",
  "tag": "section",
  "class": "section-bottom-bfcm",
  "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 (left)", "default": "ENDS IN" },
    { "type": "number", "id": "timer_year", "label": "Year", "default": 2025 },
    { "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": "11" },
    { "type": "range", "id": "timer_day", "label": "Day", "min": 1, "max": 31, "step": 1, "default": 30 },
    { "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": "Free shipping unlocked at $200+" },

    { "type": "header", "content": "Threshold" },
    { "type": "text", "id": "us_tiers", "label": "USD Tiers (comma separated)", "default": "100,200,300,400" },
    { "type": "text", "id": "ca_tiers", "label": "CAD Tiers (comma separated)", "default": "100,200,300,400" },

    { "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": "Bottom Sticky Bar" }
  ]
}
{% endschema %}