Countdown Banner

<section class="sl-countdown" style="padding:clamp(24px,5vw,48px) 1rem;background:{{ section.settings.bg_color | default: 'var(--sl-accent,#0a5cff)' }};color:#fff;font-family:inherit;text-align:center;">
  <div style="max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;align-items:center;">
    <h2 style="margin:0;font-size:clamp(1.35rem,3vw,2rem);">{{ section.settings.heading }}</h2>
    <p style="margin:0;opacity:.95;font-size:clamp(.95rem,1.5vw,1.05rem);">{{ section.settings.subheading }}</p>
    {%- assign end_date = section.settings.end_date -%}
    {%- if end_date != blank -%}
      <p style="margin:.25rem 0 0;font-size:clamp(1rem,2vw,1.25rem);font-weight:600;">
        {{ section.settings.ends_label | default: 'Ends' }}
        <time datetime="{{ end_date }}">{{ end_date | date: '%B %-d, %Y at %l:%M %p' }}</time>
      </p>
    {%- endif -%}
    {%- if section.settings.cta_text != blank -%}
      <a href="{{ section.settings.cta_link }}" style="display:inline-block;margin-top:.5rem;padding:.65rem 1.25rem;background:#fff;color:var(--sl-accent,#0a5cff);border-radius:.375rem;text-decoration:none;font-weight:700;">{{ section.settings.cta_text }}</a>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Countdown Banner",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Flash sale ends soon" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Use code FLASH20 at checkout." },
    { "type": "text", "id": "end_date", "label": "End date (YYYY-MM-DD HH:MM)", "default": "2026-12-31 23:59" },
    { "type": "text", "id": "ends_label", "label": "Ends label", "default": "Ends" },
    { "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" }
  ],
  "presets": [{ "name": "Countdown Banner" }]
}
{% endschema %}