{%- comment -%}
  Spin Message — rotating social-proof lines.

  Each line is a block you write yourself. It does NOT fabricate live
  order counts or viewer numbers — those are invented data and a real
  trust risk. Write claims you can stand behind.
{%- endcomment -%}

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

{% style %}
  .sp-{{ uid }} {
    padding: {{ s.padding_y }}px 0;
    background: {{ s.bg_color }}; color: {{ s.text_color }};
  }
  .sp-{{ uid }}__stage {
    position: relative; overflow: hidden;
    height: {{ s.height }}px;
    max-width: {{ s.max_width }}px; margin: 0 auto;
  }
  .sp-{{ uid }}__item {
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: 10px;
    justify-content: {% if s.align == 'center' %}center{% elsif s.align == 'right' %}flex-end{% else %}flex-start{% endif %};
    font-size: {{ s.text_size }}px;
    opacity: 0; transform: translateY(100%);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2,.6,.2,1);
  }
  .sp-{{ uid }}__item.is-active { opacity: 1; transform: translateY(0); }
  .sp-{{ uid }}__item.is-out { opacity: 0; transform: translateY(-100%); }
  .sp-{{ uid }}__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: {{ s.accent }};
  }
  .sp-{{ uid }}__item img { height: {{ s.text_size | times: 1.6 | round }}px; width: auto; border-radius: 50%; }
  @media (prefers-reduced-motion: reduce) {
    .sp-{{ uid }}__item { transition: none; }
  }
{% endstyle %}

<div class="sp-{{ uid }}">
  <div class="page-width">
    <div class="sp-{{ uid }}__stage" data-spin="{{ uid }}" data-interval="{{ s.interval }}">
      {%- for block in section.blocks -%}
        <div class="sp-{{ uid }}__item{% if forloop.first %} is-active{% endif %}" {{ block.shopify_attributes }}>
          {%- if block.settings.avatar != blank -%}
            {{ block.settings.avatar | image_url: width: 80 | image_tag: loading: "lazy", alt: "" }}
          {%- elsif s.show_dot -%}
            <span class="sp-{{ uid }}__dot"></span>
          {%- endif -%}
          <span>{{ block.settings.text }}</span>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

<script>
  (() => {
    const stage = document.querySelector('[data-spin="{{ uid }}"]');
    if (!stage) return;
    const items = [...stage.children];
    if (items.length < 2) return;
    const wait = Math.max(1200, parseInt(stage.dataset.interval, 10) * 1000 || 4000);
    let i = 0;
    const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
    setInterval(() => {
      const cur = items[i];
      i = (i + 1) % items.length;
      const next = items[i];
      cur.classList.remove('is-active');
      cur.classList.add('is-out');
      next.classList.remove('is-out');
      next.classList.add('is-active');
      setTimeout(() => cur.classList.remove('is-out'), reduce ? 0 : 500);
    }, wait);
  })();
</script>

{% schema %}
{
  "name": "Spin Message",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "paragraph", "content": "Write lines you can stand behind. This does not generate fake live order or viewer counts." },
    { "type": "range", "id": "interval", "min": 2, "max": 15, "step": 1, "unit": "s", "label": "Seconds per message", "default": 4 },
    { "type": "select", "id": "align", "label": "Alignment", "default": "center",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"}, {"value":"right","label":"Right"} ] },
    { "type": "checkbox", "id": "show_dot", "label": "Show dot when no avatar", "default": true },
    { "type": "range", "id": "height", "min": 20, "max": 80, "step": 2, "unit": "px", "label": "Height", "default": 28 },
    { "type": "range", "id": "max_width", "min": 280, "max": 1200, "step": 20, "unit": "px", "label": "Max width", "default": 700 },
    { "type": "range", "id": "text_size", "min": 11, "max": 24, "step": 1, "unit": "px", "label": "Text size", "default": 14 },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#f7f5f2" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#111111" },
    { "type": "color", "id": "accent", "label": "Dot colour", "default": "#1e8f4e" },
    { "type": "range", "id": "padding_y", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Vertical padding", "default": 12 }
  ],
  "blocks": [
    {
      "type": "message",
      "name": "Message",
      "settings": [
        { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Over 4,000 happy customers across Bangladesh</p>" },
        { "type": "image_picker", "id": "avatar", "label": "Avatar" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Spin Message",
      "blocks": [
        { "type": "message", "settings": { "text": "<p>Over 4,000 happy customers across Bangladesh</p>" } },
        { "type": "message", "settings": { "text": "<p>Cash on delivery — inspect before you pay</p>" } },
        { "type": "message", "settings": { "text": "<p>1–3 day delivery inside Dhaka</p>" } }
      ]
    }
  ]
}
{% endschema %}
