Flash Sale Banner

<section class="sl-flash-sale" style="padding:clamp(20px,3vw,32px) 1rem;color:{{ section.settings.text_color | default: '#fff' }};background:{{ section.settings.bg_color | default: 'var(--sl-accent,#0a5cff)' }};font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:center;text-align:center;">
    <div style="display:flex;flex-direction:column;gap:.25rem;align-items:center;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;opacity:.85;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:0;font-size:clamp(1.3rem,3.5vw,2rem);line-height:1.1;font-weight:800;letter-spacing:-.01em;">{{ section.settings.heading }}</h2>
    </div>
    {%- assign hours = section.settings.hours_ahead | default: 24 -%}
    {%- assign secs = hours | times: 3600 -%}
    {%- assign end_ts = 'now' | date: '%s' | plus: secs -%}
    <div aria-label="Sale ends" style="display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(0,0,0,.2);border-radius:.5rem;font-variant-numeric:tabular-nums;font-weight:700;">
      <span aria-hidden="true" style="font-size:1rem;">⏰</span>
      <span style="font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85;">Ends</span>
      <time datetime="{{ end_ts | date: '%Y-%m-%dT%H:%M:%S' }}" style="font-size:.95rem;">{{ end_ts | date: '%a %b %e, %l:%M %p' }}</time>
    </div>
    {%- if section.settings.promo_code != blank -%}
      <span style="display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;background:rgba(255,255,255,.15);border:1px dashed currentColor;border-radius:.375rem;font-weight:700;letter-spacing:.1em;font-size:.85rem;">
        <span style="opacity:.8;font-size:.7rem;text-transform:uppercase;">Code</span>
        <code style="font-family:ui-monospace,Menlo,Consolas,monospace;">{{ section.settings.promo_code }}</code>
      </span>
    {%- endif -%}
    {%- if section.settings.cta_text != blank -%}
      <a href="{{ section.settings.cta_link | default: '#' }}" style="padding:.75rem 1.5rem;background:#fff;color:#111;border-radius:.375rem;text-decoration:none;font-weight:800;font-size:.95rem;">{{ section.settings.cta_text }} &rarr;</a>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Flash Sale Banner",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Limited time" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Flash Sale — 30% off everything" },
    { "type": "range", "id": "hours_ahead", "label": "Hours until sale ends", "min": 1, "max": 168, "step": 1, "default": 24 },
    { "type": "text", "id": "promo_code", "label": "Promo code", "default": "FLASH30" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Shop the sale" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "color", "id": "bg_color", "label": "Background color" },
    { "type": "color", "id": "text_color", "label": "Text color" }
  ],
  "presets": [{ "name": "Flash Sale Banner" }]
}
{% endschema %}