{%- comment -%}
  Marquee Banner — infinite scrolling text strip.
  Covers both "Scrolling Announcement" and "Premium Scrolling Banner"
  patterns. Duplicates the track so the loop is seamless; the clone is
  aria-hidden so screen readers hear the message once.
{%- endcomment -%}

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

{% style %}
  .mq-{{ uid }} {
    background: {% if s.use_gradient %}{{ s.gradient }}{% else %}{{ s.bg_color }}{% endif %};
    color: {{ s.text_color }};
    padding: {{ s.padding_y }}px 0;
    overflow: hidden;
    {% if s.border %}border-top: 1px solid {{ s.border_color }}; border-bottom: 1px solid {{ s.border_color }};{% endif %}
  }
  .mq-{{ uid }}__track {
    display: flex; width: max-content; align-items: center;
    animation: mqScroll-{{ uid }} {{ s.speed }}s linear infinite;
    {% if s.direction == 'right' %}animation-direction: reverse;{% endif %}
  }
  {%- if s.pause_on_hover -%}
  .mq-{{ uid }}:hover .mq-{{ uid }}__track { animation-play-state: paused; }
  {%- endif -%}
  .mq-{{ uid }}__item {
    display: inline-flex; align-items: center; gap: {{ s.gap }}px;
    padding-right: {{ s.gap }}px;
    font-size: {{ s.font_size }}px;
    font-weight: {{ s.font_weight }};
    letter-spacing: {{ s.tracking | divided_by: 100.0 }}em;
    {% if s.uppercase %}text-transform: uppercase;{% endif %}
    white-space: nowrap;
  }
  .mq-{{ uid }}__sep { opacity: .5; }
  @keyframes mqScroll-{{ uid }} {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mq-{{ uid }}__track { animation: none; width: 100%; justify-content: center; }
    .mq-{{ uid }}__track > *:nth-child(2) { display: none; }
  }
  @media screen and (max-width: 749px) {
    .mq-{{ uid }}__item { font-size: {{ s.font_size | times: 0.85 | round }}px; }
  }
{% endstyle %}

{%- capture track -%}
  {%- for block in section.blocks -%}
    <span class="mq-{{ uid }}__item" {{ block.shopify_attributes }}>
      {%- if block.settings.icon != blank -%}
        {%- capture icon_style -%}height:{{ s.font_size }}px;width:auto;display:block{%- endcapture -%}
        {{ block.settings.icon | image_url: width: 60 | image_tag:
             loading: "lazy", alt: "", style: icon_style }}
      {%- endif -%}
      {{ block.settings.text | escape }}
      {%- if s.separator != blank -%}<span class="mq-{{ uid }}__sep">{{ s.separator }}</span>{%- endif -%}
    </span>
  {%- endfor -%}
{%- endcapture -%}

<div class="mq-{{ uid }}">
  <div class="mq-{{ uid }}__track">
    {%- comment -%} repeat enough times that short messages still fill the viewport {%- endcomment -%}
    <span style="display:flex;align-items:center">
      {%- for i in (1..3) -%}{{ track }}{%- endfor -%}
    </span>
    <span style="display:flex;align-items:center" aria-hidden="true">
      {%- for i in (1..3) -%}{{ track }}{%- endfor -%}
    </span>
  </div>
</div>

{% schema %}
{
  "name": "Marquee Banner",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "range", "id": "speed", "min": 8, "max": 120, "step": 2, "unit": "s", "label": "Scroll duration", "default": 30,
      "info": "Higher is slower." },
    { "type": "select", "id": "direction", "label": "Direction", "default": "left",
      "options": [ {"value":"left","label":"Right to left"}, {"value":"right","label":"Left to right"} ] },
    { "type": "checkbox", "id": "pause_on_hover", "label": "Pause on hover", "default": true },
    { "type": "text", "id": "separator", "label": "Separator", "default": "✦" },
    { "type": "header", "content": "Type" },
    { "type": "range", "id": "font_size", "min": 11, "max": 48, "step": 1, "unit": "px", "label": "Text size", "default": 15 },
    { "type": "select", "id": "font_weight", "label": "Weight", "default": "600",
      "options": [ {"value":"400","label":"Regular"}, {"value":"600","label":"Semibold"}, {"value":"800","label":"Bold"} ] },
    { "type": "range", "id": "tracking", "min": 0, "max": 30, "step": 1, "label": "Letter spacing", "default": 4, "info": "In hundredths of an em." },
    { "type": "checkbox", "id": "uppercase", "label": "Uppercase", "default": true },
    { "type": "range", "id": "gap", "min": 8, "max": 80, "step": 4, "unit": "px", "label": "Gap", "default": 28 },
    { "type": "header", "content": "Style" },
    { "type": "checkbox", "id": "use_gradient", "label": "Use gradient background", "default": false },
    { "type": "color_background", "id": "gradient", "label": "Gradient" },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#111111" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" },
    { "type": "checkbox", "id": "border", "label": "Show borders", "default": false },
    { "type": "color", "id": "border_color", "label": "Border colour", "default": "#333333" },
    { "type": "range", "id": "padding_y", "min": 4, "max": 60, "step": 2, "unit": "px", "label": "Vertical padding", "default": 12 }
  ],
  "blocks": [
    {
      "type": "message",
      "name": "Message",
      "settings": [
        { "type": "text", "id": "text", "label": "Text", "default": "Free shipping over ৳3000" },
        { "type": "image_picker", "id": "icon", "label": "Icon" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Banner",
      "blocks": [
        { "type": "message", "settings": { "text": "Free shipping over ৳3000" } },
        { "type": "message", "settings": { "text": "Cash on delivery" } },
        { "type": "message", "settings": { "text": "1–3 day Dhaka delivery" } },
        { "type": "message", "settings": { "text": "Inspect before you pay" } }
      ]
    }
  ]
}
{% endschema %}
