{%- style -%}
    .scrolling-logo-bundle-{{ section.id }} {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
      overflow: hidden;
    }
  
    .marquee-{{ section.id }} {
      --space: {{ section.settings.spacing }}px;
      --duration: {{ section.settings.speed }}s;
    }
  
    .marquee-{{ section.id }} .marquee-upper-{{section.id}},
    .marquee-{{ section.id }} .marquee-lower-{{section.id}} {
      --gap: var(--space);
      display: flex;
      user-select: none;
      margin-bottom: {{ section.settings.row_spacing }}px;
      padding: 10px 0px;
      position: relative;
    }
  
    .marquee-{{ section.id }} .marquee-upper-{{section.id}}::before,
    .marquee-{{ section.id }} .marquee-lower-{{section.id}}::before {
      background-color: {{ section.settings.highlight_color }};
      width: 110%;
      height: 100%;
      inset-inline-start: -5%;
      inset-block-start: 0%;
      content: "";
      position: absolute;
    }
  
    .marquee-{{ section.id }} .marquee-upper-{{section.id}} {
      transform: rotate(calc(357deg));
      position: relative;
      z-index: 100;
    }
  
    .marquee-{{ section.id }} .marquee-lower-{{section.id}} {
      transform: rotate(calc(3deg));
      filter: grayscale(1);
      opacity: .25;
    }
  
    .marquee-{{ section.id }} .marquee-upper-content-{{section.id}},
    .marquee-{{ section.id }} .marquee-lower-content-{{section.id}} {
      flex-shrink: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: var(--gap);
      min-width: 100%;
    }
  
    .marquee-{{ section.id }} .marquee-upper-{{section.id}} .marquee-upper-content-{{section.id}} {
      animation: scroll-rtl-{{ section.id }} var(--duration) linear infinite;
    }
  
    .marquee-{{ section.id }} .marquee-lower-{{section.id}} .marquee-lower-content-{{section.id}} {
      animation: scroll-ltr-{{ section.id }} var(--duration) linear infinite;
    }
  
    .marquee-{{ section.id }} .marquee-upper-{{section.id}}:hover .marquee-upper-content-{{section.id}} {
      animation-play-state: paused;
    }
    .marquee-{{ section.id }} .marquee-lower-{{section.id}}:hover .marquee-lower-content-{{section.id}} {
      animation-play-state: paused;
    }
  
    .marquee-{{ section.id }}.reverse .marquee-upper-{{section.id}} .marquee-upper-content-{{section.id}} {
      animation: scroll-ltr-{{ section.id }} var(--duration) linear infinite;
    }
  
    .marquee-{{ section.id }}.reverse .marquee-lower-{{section.id}} .marquee-lower-content-{{section.id}} {
      animation: scroll-rtl-{{ section.id }} var(--duration) linear infinite;
    }
  
    .marquee-{{ section.id }}.speed-up .marquee-upper-{{section.id}} .marquee-upper-content-{{section.id}},
    .marquee-{{ section.id }}.speed-up .marquee-lower-{{section.id}} .marquee-lower-content-{{section.id}} {
      animation-duration: 3s !important;
    }
  
    @media (prefers-reduced-motion: reduce) {
      .marquee-{{ section.id }} .marquee-upper-content-{{section.id}},
      .marquee-{{ section.id }} .marquee-lower-content-{{section.id}} {
        animation-play-state: paused;
      }
    }
  
    .marquee-{{ section.id }} .m-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex: 0 0 auto;
    }
  
    .marquee-{{ section.id }} .m-item img {
      width: auto;
      height: {{ section.settings.logo_size }}px;
      object-fit: contain;
      border-radius: {{ section.settings.image_radius }}px;
    }
    
    .marquee-{{ section.id }} .m-item svg {
      width: auto;
      height: {{ section.settings.logo_size }}px;
      object-fit: contain;
      border-radius: {{ section.settings.image_radius }}px;
    }
  
  
    @keyframes scroll-rtl-{{ section.id }} {
      0% {
      transform: translate3d(calc(-200%), 0, 0);
      visibility: visible;
      }
      100% {
        transform: translate3d(calc(-100%), 0, 0);
      }
    }
  
    @keyframes scroll-ltr-{{ section.id }} {
      0% {
      transform: translate3d(calc(-100%), 0, 0);
      visibility: visible;
      }
      100% {
        transform: translate3d(calc(-200%), 0, 0);
      }
    }
  {%- endstyle -%}
  
  <section class="scrolling-logo-bundle-{{ section.id }}">
    <div class="marquee-{{ section.id }}">
      <!-- First Row (Left to Right) -->
      <div class="marquee-upper-{{ section.id }}">
        {% for i in (1..4) %}
          <div
            class="marquee-upper-content-{{section.id}}"
            {% if i > 1 %}
              aria-hidden="true"
            {% endif %}
          >
            {% for block in section.blocks %}
              {% if block.type == 'logo' %}
                <div
                  class="m-item"
                  {% if i == 1 %}
                    {{- block.shopify_attributes -}}
                  {% endif %}
                >
                  {% if block.settings.logoImg != blank %}
                    <img
                      src="{{ block.settings.logoImg | img_url: '150x150' }}"
                      alt="brand"
                      loading="lazy"
                    >
                  {% else %}
                    {{ 'product-1' | placeholder_svg_tag }}
                  {% endif %}
                </div>
              {% endif %}
            {% endfor %}
          </div>
        {% endfor %}
      </div>
  
      <!-- Second Row (Right to Left) -->
      <div class="marquee-lower-{{ section.id }}">
        {% for i in (1..4) %}
          <div
            class="marquee-lower-content-{{section.id}}"
            {% if i > 1 %}
              aria-hidden="true"
            {% endif %}
          >
            {% for block in section.blocks %} 
              {% if block.type == 'logo' %}
                <div
                  class="m-item"
                  {% if i == 1 %}
                    {{- block.shopify_attributes -}}
                  {% endif %}
                >
                  {% if block.settings.logoImg != blank %}
                    <img
                      src="{{ block.settings.logoImg | img_url: '150x150' }}"
                      alt="brand"
                      loading="lazy"
                    >
                  {% else %}
                    {{ 'product-1' | placeholder_svg_tag }}
                  {% endif %}
                </div>
              {% endif %}
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
  
  <script>
    const marqueeRoot = document.querySelector('.marquee-{{ section.id }}');
    let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
    window.addEventListener('scroll', () => {
      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const direction = currentScrollTop > lastScrollTop ? 'down' : 'up';
      lastScrollTop = currentScrollTop;
  
      if (direction === 'down') {
        marqueeRoot.classList.remove('reverse');
        marqueeRoot.classList.add('speed-up');
      } else {
        marqueeRoot.classList.add('reverse', 'speed-up');
      }
  
      clearTimeout(window.scrollBoostTimeout);
      window.scrollBoostTimeout = setTimeout(() => {
        marqueeRoot.classList.remove('speed-up');
        if(marqueeRoot.classList.contains('reverse')){
        marqueeRoot.classList.remove('reverse');
        }
      }, 100);
    });
  </script>
  
  {% schema %}
  {
    "name": "Scrolling Logo",
    "tag": "section",
    "class": "section",
    "settings": [
      {
        "type": "range",
        "id": "logo_size",
        "label": "Logo Size",
        "min": 20,
        "max": 200,
        "step": 2,
        "default": 80,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "spacing",
        "label": "Spacing Between Items",
        "min": 10,
        "max": 100,
        "step": 5,
        "default": 20,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "row_spacing",
        "label": "Spacing Between Rows",
        "min": 0,
        "max": 100,
        "step": 5,
        "default": 0,
        "unit": "px"
      },
      {
        "type": "color",
        "id": "highlight_color",
        "label": "Highlight Color",
        "default": "#fde68a"
      },
      {
        "type": "range",
        "id": "speed",
        "label": "Animation Speed",
        "min": 10,
        "max": 300,
        "step": 10,
        "default": 20,
        "unit": "s"
      },
      {
        "type": "range",
        "id": "image_radius",
        "label": "Image Border Radius",
        "min": 0,
        "max": 50,
        "step": 1,
        "default": 8,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "padding_top",
        "label": "Padding Top",
        "min": 0,
        "max": 300,
        "step": 4,
        "default": 60,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "label": "Padding Bottom",
        "min": 0,
        "max": 300,
        "step": 4,
        "default": 60,
        "unit": "px"
      }
    ],
    "blocks": [
      {
        "type": "logo",
        "name": "Logo Item",
        "settings": [
          {
            "type": "image_picker",
            "id": "logoImg",
            "label": "Logo Image"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Scrolling Logo",
        "blocks": [
          {
            "type": "logo"
          },
          {
            "type": "logo"
          },
          {
            "type": "logo"
          },
          {
            "type": "logo"
          },
           {
            "type": "logo"
          },
           {
            "type": "logo"
          }
        ]
      }
    ]
  }
  {% endschema %}