{%- comment -%}
  Shipping Badge — trust / notice strip
  Generated from the shared badge/notice skeleton, then tuned. Icon is
  inline SVG so it inherits currentColor and needs no asset.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .shb-{{ uid }} {
    padding: {{ s.padding_y }}px 0;
    background: {{ s.bg_color }};
    color: {{ s.text_color }};
  }
  .shb-{{ uid }}__box {
    display: flex; align-items: {{ s.v_align }}; gap: {{ s.gap }}px;
    justify-content: {% if s.align == 'center' %}center{% elsif s.align == 'right' %}flex-end{% else %}flex-start{% endif %};
    text-align: {{ s.align }};
    max-width: {{ s.max_width }}px;
    margin: 0 auto;
    
  }
  .shb-{{ uid }}__icon {
    flex: 0 0 auto; color: {{ s.accent_color }};
    width: {{ s.icon_size }}px; height: {{ s.icon_size }}px;
  }
  .shb-{{ uid }}__icon svg { width: 100%; height: 100%; display: block; }
  .shb-{{ uid }}__body { min-width: 0; }
  .shb-{{ uid }}__heading {
    margin: 0; font-size: {{ s.heading_size }}px; font-weight: 600;
    {% if s.uppercase %}text-transform: uppercase; letter-spacing: .06em;{% endif %}
  }
  .shb-{{ uid }}__text { margin: 4px 0 0; font-size: {{ s.text_size }}px; opacity: .82; }
  .shb-{{ uid }}__cta {
    display: inline-block; margin-top: 8px; color: inherit;
    font-size: {{ s.text_size }}px; text-decoration: underline; text-underline-offset: 3px;
  }
  .shb-{{ uid }}__pay {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
  }
  .shb-{{ uid }}__pay svg { height: 22px; width: auto; }
  @media screen and (max-width: 749px) {
    .shb-{{ uid }}__box { flex-direction: {% if s.stack_mobile %}column{% else %}row{% endif %}; text-align: {% if s.stack_mobile %}center{% else %}{{ s.align }}{% endif %}; align-items: center; }
  }
{% endstyle %}

<div class="shb-{{ uid }}">
  <div class="page-width">
    <div class="shb-{{ uid }}__box">
      {%- if s.show_icon -%}
        <span class="shb-{{ uid }}__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
               stroke-linecap="round" stroke-linejoin="round"><path d="M1 3h13v10H1z"/><path d="M14 8h4l3 3v2h-7z"/><circle cx="5.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>
        </span>
      {%- endif -%}
      <div class="shb-{{ uid }}__body">
        {%- if s.heading != blank -%}
          <p class="shb-{{ uid }}__heading">{{ s.heading | escape }}</p>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="shb-{{ uid }}__text">{{ s.text }}</div>
        {%- endif -%}
        {%- if s.cta_label != blank -%}
          <a class="shb-{{ uid }}__cta" href="{{ s.cta_link | default: '#' }}">{{ s.cta_label | escape }}</a>
        {%- endif -%}
        {%- if s.show_payments -%}
          <div class="shb-{{ uid }}__pay">
            {%- for type in shop.enabled_payment_types -%}
              {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Shipping Badge",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Fast delivery"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>1\u20133 working days inside Dhaka. Cash on delivery available.</p>"
    },
    {
      "type": "text",
      "id": "cta_label",
      "label": "Link label"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "Link"
    },
    {
      "type": "checkbox",
      "id": "show_icon",
      "label": "Show icon",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payments",
      "label": "Show payment icons",
      "default": false
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "align",
      "label": "Alignment",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "v_align",
      "label": "Vertical alignment",
      "default": "center",
      "options": [
        {
          "value": "flex-start",
          "label": "Top"
        },
        {
          "value": "center",
          "label": "Middle"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "stack_mobile",
      "label": "Stack on mobile",
      "default": true
    },
    {
      "type": "range",
      "id": "gap",
      "min": 4,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap",
      "default": 14
    },
    {
      "type": "range",
      "id": "max_width",
      "min": 300,
      "max": 1200,
      "step": 20,
      "unit": "px",
      "label": "Max width",
      "default": 1000
    },
    {
      "type": "range",
      "id": "icon_size",
      "min": 16,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Icon size",
      "default": 32
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 12,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Heading size",
      "default": 16
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 10,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 14
    },
    {
      "type": "checkbox",
      "id": "uppercase",
      "label": "Uppercase heading",
      "default": false
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Section background",
      "default": "#f7f5f2"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Icon colour",
      "default": "#111111"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 96,
      "step": 2,
      "unit": "px",
      "label": "Vertical padding",
      "default": 26
    }
  ],
  "presets": [
    {
      "name": "Shipping Badge"
    }
  ]
}
{% endschema %}
