{%- comment -%}
  Selling Fast — urgency pill.
  Optionally gated on REAL inventory so it only appears when stock is
  genuinely low. Ungated it is a static claim: your call, but keep it true.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
  assign p = s.product
  if p == blank and product != blank
    assign p = product
  endif
  assign v = p.selected_or_first_available_variant
  assign show = true
  if s.only_when_low
    assign show = false
    if v.inventory_management != blank and v.inventory_quantity > 0 and v.inventory_quantity <= s.threshold
      assign show = true
    endif
  endif
-%}

{%- if show -%}
{% style %}
  .sf-{{ uid }} { padding: {{ s.padding_y }}px 0; text-align: {{ s.align }}; }
  .sf-{{ uid }}__pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: {{ s.pill_padding }}px {{ s.pill_padding | times: 2 }}px;
    border-radius: 999px;
    background: {{ s.bg_color }}; color: {{ s.text_color }};
    font-size: {{ s.text_size }}px; font-weight: 600;
    {% if s.uppercase %}text-transform: uppercase; letter-spacing: .06em;{% endif %}
  }
  .sf-{{ uid }}__flame { width: {{ s.text_size | plus: 3 }}px; height: {{ s.text_size | plus: 3 }}px; }
  .sf-{{ uid }}__flame svg { width: 100%; height: 100%; display: block; }
  {% if s.pulse %}
  .sf-{{ uid }}__pill { animation: sfPulse-{{ uid }} 2s ease-in-out infinite; }
  @keyframes sfPulse-{{ uid }} { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
  @media (prefers-reduced-motion: reduce) { .sf-{{ uid }}__pill { animation: none; } }
  {% endif %}
{% endstyle %}

<div class="sf-{{ uid }}">
  <div class="page-width">
    <span class="sf-{{ uid }}__pill">
      {%- if s.show_icon -%}
        <span class="sf-{{ uid }}__flame" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 2s5 4.5 5 9a5 5 0 0 1-10 0c0-1.5.5-2.7 1.2-3.7C9 9 12 7 12 2z"/>
          </svg>
        </span>
      {%- endif -%}
      {{ s.message | escape }}
    </span>
  </div>
</div>
{%- endif -%}

{% schema %}
{
  "name": "Selling Fast",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "Product",
      "info": "Leave blank on a product page."
    },
    {
      "type": "text",
      "id": "message",
      "label": "Message",
      "default": "Selling fast"
    },
    {
      "type": "checkbox",
      "id": "only_when_low",
      "label": "Only show when stock is low",
      "default": true,
      "info": "Requires Shopify to be tracking inventory for the variant."
    },
    {
      "type": "range",
      "id": "threshold",
      "min": 1,
      "max": 100,
      "step": 1,
      "label": "Low-stock threshold",
      "default": 15
    },
    {
      "type": "checkbox",
      "id": "show_icon",
      "label": "Show flame icon",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "pulse",
      "label": "Pulse",
      "default": false
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "select",
      "id": "align",
      "label": "Alignment",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 10,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 13
    },
    {
      "type": "range",
      "id": "pill_padding",
      "min": 4,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Pill padding",
      "default": 8
    },
    {
      "type": "checkbox",
      "id": "uppercase",
      "label": "Uppercase",
      "default": true
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background",
      "default": "#fdece8"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#a33418"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Vertical padding",
      "default": 8
    }
  ],
  "presets": [
    {
      "name": "Selling Fast"
    }
  ]
}
{% endschema %}
