Announcement Bar Pro

{%- comment -%}
  modblo. Announcement Bar Pro
  Replaces Hextom / Promo Bar / Essential Announcement-style apps.
  Features:
    • Rotating messages (any number, configurable interval)
    • Optional free-shipping progress (live cart total via JS)
    • Optional countdown to a date
    • Optional dismiss + persist (localStorage)
    • Geo placeholder text via {{ localization.country.iso_code }}
{%- endcomment -%}

{%- assign threshold = section.settings.free_ship_threshold | times: 100 -%}
{%- assign show_ship = section.settings.show_ship -%}

<aside class="modblo-ann"
       data-modblo-ann
       data-section-id="{{ section.id }}"
       data-interval="{{ section.settings.interval | default: 5 }}"
       data-dismissible="{{ section.settings.dismissible }}"
       data-threshold="{{ threshold }}"
       data-deadline="{{ section.settings.deadline }}"
       style="--modblo-ann-bg: {{ section.settings.bg }};
              --modblo-ann-fg: {{ section.settings.fg }};
              --modblo-ann-link: {{ section.settings.link_color }};">
  <div class="modblo-ann__inner page-width">
    <div class="modblo-ann__rail" data-modblo-ann-rail>
      {%- for block in section.blocks -%}
        {%- if block.type == 'message' -%}
          <div class="modblo-ann__msg" data-modblo-ann-msg {{ block.shopify_attributes }}>
            {%- if block.settings.icon != blank -%}
              <span class="modblo-ann__icon" aria-hidden="true">{{ block.settings.icon }}</span>
            {%- endif -%}
            {%- if block.settings.url != blank -%}
              <a href="{{ block.settings.url }}">{{ block.settings.text }}</a>
            {%- else -%}
              <span>{{ block.settings.text }}</span>
            {%- endif -%}
          </div>
        {%- endif -%}
      {%- endfor -%}

      {%- if show_ship -%}
        <div class="modblo-ann__msg modblo-ann__ship" data-modblo-ann-msg data-modblo-ann-ship>
          <span class="modblo-ann__icon" aria-hidden="true">🚚</span>
          <span data-modblo-ann-ship-text>
            Add <strong data-modblo-ann-remaining>{{ threshold | money }}</strong> for free shipping
          </span>
        </div>
      {%- endif -%}

      {%- if section.settings.deadline != blank -%}
        <div class="modblo-ann__msg modblo-ann__cd" data-modblo-ann-msg data-modblo-ann-cd>
          <span class="modblo-ann__icon" aria-hidden="true">⏱</span>
          <span>
            {{ section.settings.deadline_label }}
            <strong data-modblo-ann-cd-text>--:--:--</strong>
          </span>
        </div>
      {%- endif -%}
    </div>

    {%- if section.settings.dismissible -%}
      <button type="button" class="modblo-ann__x" data-modblo-ann-close aria-label="Dismiss announcement">×</button>
    {%- endif -%}
  </div>
</aside>

<style>
  .modblo-ann {
    background: var(--modblo-ann-bg, #0b0b0c); color: var(--modblo-ann-fg, #fff);
    font-size: 13px; position: relative;
  }
  .modblo-ann.is-dismissed { display: none; }
  .modblo-ann__inner {
    display: flex; align-items: center;
    max-width: 1280px; margin: 0 auto; padding: 10px 24px;
    min-height: 38px;
  }
  .modblo-ann__rail {
    flex: 1; position: relative; height: 22px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .modblo-ann__msg {
    position: absolute; left: 0; right: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
    text-align: center;
  }
  .modblo-ann__msg.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .modblo-ann__msg a { color: var(--modblo-ann-link, currentColor); text-decoration: underline; text-underline-offset: 2px; }
  .modblo-ann__icon { font-size: 14px; }
  .modblo-ann__x {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    padding: 4px 10px; font-size: 18px; line-height: 1; opacity: .7;
    transition: opacity .2s;
  }
  .modblo-ann__x:hover { opacity: 1; }
  @media (max-width: 640px) {
    .modblo-ann__inner { padding: 8px 14px; }
    .modblo-ann { font-size: 12px; }
  }
</style>

<script>
  (function () {
    var bar = document.querySelector('[data-modblo-ann][data-section-id="{{ section.id }}"]');
    if (!bar) return;

    var STORAGE_KEY = 'cbAnnDismissed-{{ section.id }}';
    if (bar.dataset.dismissible === 'true' && localStorage.getItem(STORAGE_KEY) === '1') {
      bar.classList.add('is-dismissed');
      return;
    }

    var msgs = bar.querySelectorAll('[data-modblo-ann-msg]');
    if (msgs.length === 0) return;

    // Rotation
    var idx = 0;
    msgs[0].classList.add('is-active');
    if (msgs.length > 1) {
      var interval = (parseInt(bar.dataset.interval, 10) || 5) * 1000;
      setInterval(function () {
        msgs[idx].classList.remove('is-active');
        idx = (idx + 1) % msgs.length;
        msgs[idx].classList.add('is-active');
      }, interval);
    }

    // Dismiss
    var closeBtn = bar.querySelector('[data-modblo-ann-close]');
    if (closeBtn) {
      closeBtn.addEventListener('click', function () {
        bar.classList.add('is-dismissed');
        localStorage.setItem(STORAGE_KEY, '1');
      });
    }

    // Free-shipping live update
    var shipMsg = bar.querySelector('[data-modblo-ann-ship]');
    var threshold = parseInt(bar.dataset.threshold, 10);
    if (shipMsg && threshold > 0) {
      function fmt(cents) {
        return '$' + (cents / 100).toFixed(2);
      }
      function update() {
        fetch('/cart.js').then(function (r) { return r.json(); }).then(function (cart) {
          var remaining = threshold - cart.total_price;
          var textEl = shipMsg.querySelector('[data-modblo-ann-ship-text]');
          if (remaining > 0) {
            textEl.innerHTML = 'Add <strong>' + fmt(remaining) + '</strong> for free shipping';
          } else {
            textEl.innerHTML = '🎉 You unlocked free shipping';
          }
        });
      }
      update();
      document.addEventListener('cart:updated', update);
    }

    // Countdown
    var cdMsg = bar.querySelector('[data-modblo-ann-cd]');
    var deadline = bar.dataset.deadline;
    if (cdMsg && deadline) {
      var target = new Date(deadline).getTime();
      var textEl = cdMsg.querySelector('[data-modblo-ann-cd-text]');
      function tick() {
        var diff = target - Date.now();
        if (diff <= 0) { textEl.textContent = 'Now'; return; }
        var d = Math.floor(diff / 86400000);
        var h = Math.floor((diff % 86400000) / 3600000);
        var m = Math.floor((diff % 3600000) / 60000);
        var s = Math.floor((diff % 60000) / 1000);
        textEl.textContent = (d > 0 ? d + 'd ' : '') +
          String(h).padStart(2, '0') + ':' +
          String(m).padStart(2, '0') + ':' +
          String(s).padStart(2, '0');
      }
      tick();
      setInterval(tick, 1000);
    }
  })();
</script>

{% schema %}
{
  "name": "Announcement Bar Pro",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Rotation" },
    { "type": "range", "id": "interval", "label": "Rotation interval (seconds)", "min": 3, "max": 15, "step": 1, "default": 5 },
    { "type": "checkbox", "id": "dismissible", "label": "Allow dismiss", "default": false },
    { "type": "header", "content": "Free shipping" },
    { "type": "checkbox", "id": "show_ship", "label": "Show free-shipping progress message", "default": true },
    { "type": "number", "id": "free_ship_threshold", "label": "Free shipping threshold ($)", "default": 75 },
    { "type": "header", "content": "Countdown" },
    { "type": "text", "id": "deadline", "label": "Deadline (ISO date)",
      "info": "e.g. 2026-12-25T00:00:00, leave blank to hide countdown" },
    { "type": "text", "id": "deadline_label", "label": "Countdown label", "default": "Sale ends in" },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#0b0b0c" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#ffffff" },
    { "type": "color", "id": "link_color", "label": "Link color", "default": "#a5b4fc" }
  ],
  "blocks": [
    {
      "type": "message",
      "name": "Message",
      "settings": [
        { "type": "text", "id": "text", "label": "Text", "default": "Free shipping on orders over $75" },
        { "type": "text", "id": "icon", "label": "Icon (emoji or text)", "default": "✨" },
        { "type": "url", "id": "url", "label": "Link (optional)" }
      ]
    }
  ],
  "presets": [{
    "name": "Announcement Bar Pro",
    "blocks": [
      { "type": "message", "settings": { "text": "Free worldwide shipping on orders over $75", "icon": "🚚" } },
      { "type": "message", "settings": { "text": "30-day returns, no questions asked", "icon": "↩️" } },
      { "type": "message", "settings": { "text": "New: Spring 2026 collection, shop now", "icon": "✨" } }
    ]
  }]
}
{% endschema %}