{% schema %}
{
  "name": "Scrolling Logos(By OnHOW)",
  "tag": "section",
  "class": "scrolling-logos-section",
  "settings": [
    {
      "type": "header",
      "content": "Heading Settings"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Trusted dealer"
    },
    {
      "type": "select",
      "id": "heading_font_weight",
      "label": "Heading Font Weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semibold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "600"
    },
    {
      "type": "select",
      "id": "heading_text_transform",
      "label": "Heading Text Transform",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "uppercase",
          "label": "UPPERCASE"
        },
        {
          "value": "lowercase",
          "label": "lowercase"
        },
        {
          "value": "capitalize",
          "label": "Capitalize"
        }
      ],
      "default": "none"
    },
    {
      "type": "range",
      "id": "heading_font_size",
      "min": 18,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Heading Font Size",
      "default": 32
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#333333"
    },
    {
      "type": "range",
      "id": "heading_letter_spacing",
      "min": 0,
      "max": 5,
      "step": 0.5,
      "unit": "px",
      "label": "Heading Letter Spacing",
      "default": 0
    },
    {
      "type": "range",
      "id": "heading_padding_top",
      "min": 0,
      "max": 40,
      "step": 5,
      "unit": "px",
      "label": "Heading Padding Top",
      "default": 15
    },
    {
      "type": "range",
      "id": "heading_padding_bottom",
      "min": 0,
      "max": 40,
      "step": 5,
      "unit": "px",
      "label": "Heading Padding Bottom",
      "default": 10
    },
    {
      "type": "header",
      "content": "Logo Row Settings"
    },
    {
      "type": "range",
      "id": "row1_scroll_speed",
      "min": 20,
      "max": 200,
      "step": 10,
      "unit": "s",
      "label": "Scroll Speed (lower = faster)",
      "default": 60
    },
    {
      "type": "select",
      "id": "row1_scroll_direction",
      "label": "Scroll Direction",
      "options": [
        {
          "value": "left",
          "label": "Left to Right"
        },
        {
          "value": "right",
          "label": "Right to Left"
        }
      ],
      "default": "right"
    },
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "logos_max_height",
      "min": 30,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Logo Max Height",
      "default": 60
    },
    {
      "type": "range",
      "id": "logos_padding_top",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Logos Section Padding Top",
      "default": 2
    },
    {
      "type": "range",
      "id": "logos_padding_bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Logos Section Padding Bottom",
      "default": 2
    },
    {
      "type": "color",
      "id": "section_background",
      "label": "Section Background Color",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo_image",
          "label": "Logo Image",
          "info": "Make sure logo is transparent"
        },
        {
          "type": "url",
          "id": "logo_link",
          "label": "Logo Link (Optional)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Scrolling Logos",
      "blocks": [
        {
          "type": "logo"
        },
        {
          "type": "logo"
        },
        {
          "type": "logo"
        },
        {
          "type": "logo"
        },
        {
          "type": "logo"
        },
        {
          "type": "logo"
        }
      ]
    }
  ]
}
{% endschema %}

<style>
.scrolling-logos-section {
  width: 100%;
  overflow: hidden;
  background-color: {{ section.settings.section_background }};
  padding-top: {{ section.settings.logos_padding_top }}px;
  padding-bottom: {{ section.settings.logos_padding_bottom }}px;
}

.scrolling-logos-heading {
  text-align: center;
  padding-top: {{ section.settings.heading_padding_top }}px;
  padding-bottom: {{ section.settings.heading_padding_bottom }}px;
  font-size: {{ section.settings.heading_font_size }}px;
  font-weight: {{ section.settings.heading_font_weight }};
  color: {{ section.settings.heading_color }};
  text-transform: {{ section.settings.heading_text_transform }};
  letter-spacing: {{ section.settings.heading_letter_spacing }}px;
  margin: 0;
}

.scrolling-logos-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.scrolling-logos-row {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  padding: 5px 0;
  position: relative;
}

.scrolling-logos-inner {
  display: flex;
  position: absolute;
  width: max-content;
}

.scrolling-logos-inner--1 {
  animation: scroll-row-1 linear infinite;
  animation-duration: {{ section.settings.row1_scroll_speed }}s;
}

.scrolling-logos-inner--2 {
  animation: scroll-row-2 linear infinite;
  animation-duration: {{ section.settings.row1_scroll_speed }}s;
}

.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30px;
}

.logo-item img {
  max-height: {{ section.settings.logos_max_height }}px;
  width: auto;
  object-fit: contain;
}

/* Animation for the row */
{% if section.settings.row1_scroll_direction == 'right' %}
@keyframes scroll-row-1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes scroll-row-2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
{% else %}
@keyframes scroll-row-1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes scroll-row-2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
{% endif %}
</style>

<div class="scrolling-logos-section">
  {% if section.settings.heading != blank %}
    <h2 class="scrolling-logos-heading">{{ section.settings.heading }}</h2>
  {% endif %}
  
  <div class="scrolling-logos-container">
    <!-- Single Logo Row -->
    {% assign logos = section.blocks | where: "type", "logo" %}
    {% if logos.size > 0 %}
      <div class="scrolling-logos-row" style="height: {{ section.settings.logos_max_height | plus: 10 }}px;">
        <div class="scrolling-logos-inner scrolling-logos-inner--1">
          {% for block in logos %}
            {% if block.settings.logo_image != blank %}
              <div class="logo-item" {{ block.shopify_attributes }}>
                {% if block.settings.logo_link != blank %}
                  <a href="{{ block.settings.logo_link }}">
                    <img src="{{ block.settings.logo_image | img_url: 'medium' }}" 
                         alt="{{ block.settings.logo_image.alt | escape }}" 
                         loading="lazy">
                  </a>
                {% else %}
                  <img src="{{ block.settings.logo_image | img_url: 'medium' }}" 
                       alt="{{ block.settings.logo_image.alt | escape }}" 
                       loading="lazy">
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
        
        <div class="scrolling-logos-inner scrolling-logos-inner--2">
          {% for block in logos %}
            {% if block.settings.logo_image != blank %}
              <div class="logo-item">
                {% if block.settings.logo_link != blank %}
                  <a href="{{ block.settings.logo_link }}">
                    <img src="{{ block.settings.logo_image | img_url: 'medium' }}" 
                         alt="{{ block.settings.logo_image.alt | escape }}" 
                         loading="lazy">
                  </a>
                {% else %}
                  <img src="{{ block.settings.logo_image | img_url: 'medium' }}" 
                       alt="{{ block.settings.logo_image.alt | escape }}" 
                       loading="lazy">
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
</div>

{% javascript %}
document.addEventListener('DOMContentLoaded', function() {
  function setupInfiniteScroll() {
    const rows = document.querySelectorAll('.scrolling-logos-row');
    
    rows.forEach(row => {
      const inner1 = row.querySelector('.scrolling-logos-inner:first-child');
      const inner2 = row.querySelector('.scrolling-logos-inner:last-child');
      
      if (!inner1 || !inner2) return;
      
      const items = inner1.querySelectorAll('.logo-item');
      
      if (items.length === 0) return;
      
      // Calculate the total width of all logos
      const totalWidth = Array.from(items).reduce((sum, item) => sum + item.offsetWidth, 0);
      
      // If we don't have enough logos to fill the screen, duplicate them
      if (totalWidth < window.innerWidth) {
        let duplicatesNeeded = Math.ceil(window.innerWidth / totalWidth) - 1;
        
        for (let i = 0; i < duplicatesNeeded; i++) {
          items.forEach(item => {
            const clone1 = item.cloneNode(true);
            const clone2 = item.cloneNode(true);
            inner1.appendChild(clone1);
            inner2.appendChild(clone2);
          });
        }
      }
      
      // Position the second set of logos
      inner2.style.left = totalWidth + 'px';
      
      // Force a browser recalculation to make animations work
      void inner1.offsetWidth;
      void inner2.offsetWidth;
    });
  }
  
  // Initial setup with a small delay to ensure DOM is ready
  setTimeout(setupInfiniteScroll, 100);
  
  // Recalculate on window resize
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(setupInfiniteScroll, 250);
  });
});
{% endjavascript %}