{% assign bid = 'ann-bar-' | append: block.id %}

<div
    id="{{ bid }}"
    class="ann-bar"
    data-hours="{{ block.settings.countdown_hours }}"
    data-end="{{ block.settings.sale_end_datetime }}"
    data-daily="{{ block.settings.reset_daily }}"
    style="background: {{ block.settings.background_color }}; color: {{ block.settings.text_color }}; font-family: {{ block.settings.font_family }};"
    {{ block.shopify_attributes }}
>
    <div class="ann-bar__wrap">
            {% if block.settings.show_icon %}
            <span aria-hidden="true">{{ block.settings.icon_emoji }}</span>
            {% endif %}

        <p class="ann-bar__msg">{{ block.settings.message }}</p>

        {% if block.settings.show_countdown %}
        <div class="ann-bar__timer">
            <span class="ann-bar__timer-label">{{ block.settings.countdown_label }}</span>
            <div class="ann-bar__digits">
            <div class="ann-bar__digit">
                <span id="{{ bid }}-h">00</span>
                <small>HRS</small>
            </div>
            <span class="ann-bar__sep">:</span>
            <div class="ann-bar__digit">
                <span id="{{ bid }}-m">00</span>
                <small>MIN</small>
            </div>
            <span class="ann-bar__sep">:</span>
            <div class="ann-bar__digit">
                <span id="{{ bid }}-s">00</span>
                <small>SEC</small>
            </div>
            </div>
        </div>
        {% endif %}

        {% if block.settings.show_cta %}
        <a
            class="ann-bar__btn"
            href="{{ block.settings.cta_url }}"
            {% if block.settings.cta_new_tab %}
            target="_blank" rel="noopener"
            {% endif %}
            style="color: {{ block.settings.cta_text_color }}; background: {{ block.settings.cta_bg_color }}; border-color: {{ block.settings.cta_text_color }};"
        >
            {{- block.settings.cta_text -}}
        </a>
        {% endif %}

        {% if block.settings.show_close %}
        <button class="ann-bar__close" aria-label="Dismiss" style="color: {{ block.settings.text_color }};">
            &#x2715;
        </button>
        {% endif %}
    </div>
    </div>

    <style>
    #{{ bid }} {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 10px 16px;
        box-sizing: border-box;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    #{{ bid }} .ann-bar__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 16px;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }

    #{{ bid }} .ann-bar__msg {
        margin: 0;
        font-size: .95em;
        font-weight: 600;
    }

    #{{ bid }} .ann-bar__timer {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    #{{ bid }} .ann-bar__timer-label {
        font-size: .85em;
        opacity: .85;
        white-space: nowrap;
    }

    #{{ bid }} .ann-bar__digits {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    #{{ bid }} .ann-bar__digit {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(255,255,255,0.15);
        border-radius: 4px;
        padding: 2px 7px;
        min-width: 36px;
    }

    #{{ bid }} .ann-bar__digit span {
        font-size: 1.05em;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
    }

    #{{ bid }} .ann-bar__digit small {
        font-size: .55em;
        opacity: .75;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    #{{ bid }} .ann-bar__sep {
        font-weight: 700;
        opacity: .8;
        margin-bottom: 8px;
    }

    #{{ bid }} .ann-bar__btn {
        display: inline-block;
        padding: 4px 14px;
        border: 1.5px solid;
        border-radius: 3px;
        text-decoration: none;
        font-size: .85em;
        font-weight: 700;
        white-space: nowrap;
        transition: opacity .2s;
    }

    #{{ bid }} .ann-bar__btn:hover { opacity: .75; }

    #{{ bid }} .ann-bar__close {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1em;
        opacity: .7;
        padding: 0 4px;
        line-height: 1;
    }

    #{{ bid }} .ann-bar__close:hover { opacity: 1; }

    #{{ bid }}.is-hidden { display: none !important; }

    @media (max-width: 480px) {
        #{{ bid }} .ann-bar__msg { font-size: .85em; }
        #{{ bid }} .ann-bar__digit { min-width: 28px; padding: 2px 4px; }
    }
    </style>

    <script>
    (function() {
        var bar = document.getElementById('{{ bid }}');
        if (!bar) return;

        // handle dismiss
        var closeBtn = bar.querySelector('.ann-bar__close');
        if (closeBtn) {
        try {
            if (sessionStorage.getItem('{{ bid }}_closed')) {
            bar.classList.add('is-hidden');
            return;
            }
        } catch(e) {}

        closeBtn.addEventListener('click', function() {
            bar.classList.add('is-hidden');
            try { sessionStorage.setItem('{{ bid }}_closed', '1'); } catch(e) {}
        });
        }

        var hEl = document.getElementById('{{ bid }}-h');
        var mEl = document.getElementById('{{ bid }}-m');
        var sEl = document.getElementById('{{ bid }}-s');
        if (!hEl || !mEl || !sEl) return;

        var endTime;
        var key = '{{ bid }}_end';
        var hours = parseInt(bar.dataset.hours, 10) || 24;
        var endRaw = bar.dataset.end;
        var resetDaily = bar.dataset.daily === 'true';

        if (endRaw && endRaw.trim() !== '') {
        endTime = new Date(endRaw).getTime();
        } else if (resetDaily) {
        var now = new Date();
        endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime();
        } else {
        try {
            endTime = parseInt(localStorage.getItem(key), 10);
            if (!endTime || Date.now() >= endTime) {
            endTime = Date.now() + hours * 3600000;
            localStorage.setItem(key, endTime);
            }
        } catch(e) {
            endTime = Date.now() + hours * 3600000;
        }
        }

        function pad(n) { return n < 10 ? '0' + n : n; }

        function tick() {
        var diff = endTime - Date.now();
        if (diff <= 0) {
            hEl.textContent = mEl.textContent = sEl.textContent = '00';
            clearInterval(interval);
            if ({{ block.settings.hide_on_end }}) bar.classList.add('is-hidden');
            return;
        }
        var total = Math.floor(diff / 1000);
        hEl.textContent = pad(Math.floor(total / 3600));
        mEl.textContent = pad(Math.floor((total % 3600) / 60));
        sEl.textContent = pad(total % 60);
        }

        tick();
        var interval = setInterval(tick, 1000);
    })();
    </script>

    {% schema %}
    {
    "name": "Announcement Bar",
    "target": "body",
    "settings": [
        {
        "type": "header",
        "content": "Content"
        },
        {
        "type": "text",
        "id": "message",
        "label": "Announcement message",
        "default": "🔥 Flash Sale — Limited time only!"
        },
        {
        "type": "checkbox",
        "id": "show_icon",
        "label": "Show icon / emoji",
        "default": true
        },
        {
        "type": "text",
        "id": "icon_emoji",
        "label": "Icon or emoji",
        "default": "⚡"
        },
        {
        "type": "header",
        "content": "Countdown Timer"
        },
        {
        "type": "checkbox",
        "id": "show_countdown",
        "label": "Show countdown timer",
        "default": true
        },
        {
        "type": "text",
        "id": "countdown_label",
        "label": "Countdown label",
        "default": "Ends in:"
        },
        {
        "type": "range",
        "id": "countdown_hours",
        "label": "Countdown duration (hours)",
        "min": 1,
        "max": 96,
        "step": 1,
        "default": 24,
        "info": "Ignored if a specific end date is set below."
        },
        {
        "type": "text",
        "id": "sale_end_datetime",
        "label": "Sale end date & time (optional)",
        "info": "ISO format e.g. 2026-03-05T23:59:59 — overrides duration above."
        },
        {
        "type": "checkbox",
        "id": "reset_daily",
        "label": "Reset at midnight each day",
        "default": false
        },
        {
        "type": "checkbox",
        "id": "hide_on_end",
        "label": "Hide bar when countdown reaches zero",
        "default": false
        },
        {
        "type": "header",
        "content": "Button"
        },
        {
        "type": "checkbox",
        "id": "show_cta",
        "label": "Show button",
        "default": true
        },
        {
        "type": "text",
        "id": "cta_text",
        "label": "Button text",
        "default": "Shop Now"
        },
        {
        "type": "url",
        "id": "cta_url",
        "label": "Button URL"
        },
        {
        "type": "checkbox",
        "id": "cta_new_tab",
        "label": "Open in new tab",
        "default": false
        },
        {
        "type": "color",
        "id": "cta_text_color",
        "label": "Button text & border color",
        "default": "#ffffff"
        },
        {
        "type": "color",
        "id": "cta_bg_color",
        "label": "Button background",
        "default": "#00000033"
        },
        {
        "type": "header",
        "content": "Appearance"
        },
        {
        "type": "color",
        "id": "background_color",
        "label": "Background",
        "default": "#c0392b"
        },
        {
        "type": "color",
        "id": "text_color",
        "label": "Text color",
        "default": "#ffffff"
        },
        {
        "type": "select",
        "id": "font_family",
        "label": "Font",
        "default": "inherit",
        "options": [
            { "value": "inherit", "label": "Theme default" },
            { "value": "sans-serif", "label": "Sans-serif" },
            { "value": "serif", "label": "Serif" },
            { "value": "monospace", "label": "Monospace" }
        ]
        },
        {
        "type": "header",
        "content": "Dismiss"
        },
        {
        "type": "checkbox",
        "id": "show_close",
        "label": "Show close (X) button",
        "default": true
        }
    ]
    }
    {% endschema %}