<style>
.announcement-marquee-wrapper {
  background: linear-gradient(to right, {{ section.settings.bg_color_from }}, {{ section.settings.bg_color_to }});
  overflow: hidden;
  white-space: nowrap;
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

.announcement-marquee-track {
  display: inline-block;
  animation: scroll-left 15s linear infinite;
  white-space: nowrap;
}

.marquee-item {
  display: inline-block;
  margin-right: 50px;
  font-size: {{ section.settings.text_size }}px;
  font-weight: 600;
  color: {{ section.settings.text_color }};
  font-family: 'Helvetica Neue', sans-serif;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>

<div class="announcement-marquee-wrapper">
  <div class="announcement-marquee-track">
    {% assign messages = section.settings.message | split: '|' %}
    {% for m in messages %}
      <span class="marquee-item">{{ m }}</span>
    {% endfor %}
    {% for m in messages %}
      <span class="marquee-item">{{ m }}</span>
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "Announcement Marquee",
  "settings": [
    {
      "type": "textarea",
      "id": "message",
      "label": "Marquee Messages (use | to separate items)",
      "default": "🔥 Best Prices on Gear! | 🚚 Free Shipping over AED 250! | 📞 24/7 Support Available! | 🟢 Tabby Pay Available"
    },
    {
      "type": "color",
      "id": "bg_color_from",
      "label": "Background Gradient Start",
      "default": "#00bcd4"
    },
    {
      "type": "color",
      "id": "bg_color_to",
      "label": "Background Gradient End",
      "default": "#4caf50"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text Size (px)",
      "min": 10,
      "max": 30,
      "step": 1,
      "default": 16
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top Padding (px)",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 10
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom Padding (px)",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 10
    }
  ],
  "presets": [
    {
      "name": "Scrolling Announcement Bar"
    }
  ]
}
{% endschema %}