{%- comment -%}
  Section Schema: Defines settings for the Theme Customizer
{%- endcomment -%}
{% schema %}
{
  "name": "Logo Scroller",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Companies We've Worked With"
    },
    {
      "type": "select",
      "id": "heading_position",
      "label": "Heading Position",
      "options": [
        { "value": "above", "label": "Above Scroller" },
        { "value": "below", "label": "Below Scroller" }
      ],
      "default": "above"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Animation Settings"
    },
    {
      "type": "checkbox",
      "id": "enable_scroll",
      "label": "Enable Scroll Animation",
      "default": true
    },
    {
      "type": "select",
      "id": "scroll_direction",
      "label": "Scroll Direction",
      "options": [
        { "value": "left", "label": "Scroll Left (Standard)" },
        { "value": "right", "label": "Scroll Right" }
      ],
      "default": "left",
      "info": "Only applies if scroll animation is enabled."
    },
    {
      "type": "range",
      "id": "animation_duration",
      "label": "Scroll Duration (seconds)",
      "min": 5,
      "max": 60,
      "step": 1,
      "unit": "s",
      "default": 15,
      "info": "Longer duration means slower scroll. Only applies if scroll animation is enabled."
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause Animation on Hover",
      "default": true,
      "info": "Only applies if scroll animation is enabled."
    },
    {
      "type": "header",
      "content": "Logo Image Size"
    },
    {
      "type": "range",
      "id": "logo_max_height",
      "label": "Logo Max Height",
      "min": 20,
      "max": 150,
      "step": 5,
      "unit": "px",
      "default": 70
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "label": "Logo Max Width",
      "min": 40,
      "max": 250,
      "step": 5,
      "unit": "px",
      "default": 160
    },
    {
      "type": "header",
      "content": "Color Settings"
    },
    {
      "type": "color",
      "id": "section_bg_color",
      "label": "Section Background Color",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color"
    },
    {
      "type": "color",
      "id": "logo_text_color",
      "label": "Logo Text Color (if no image)"
    }
  ],
  "blocks": [
    {
      "type": "logo_item",
      "name": "Logo",
      "limit": 40,
      "settings": [
        {
          "type": "image_picker",
          "id": "logo_image",
          "label": "Logo Image"
        },
        {
          "type": "text",
          "id": "logo_text",
          "label": "Company Name (Shown if no image or as alt text)"
        },
        {
          "type": "url",
          "id": "logo_link",
          "label": "Link (Optional)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Logo Scroller",
      "blocks": [
        { "type": "logo_item" }, { "type": "logo_item" }, { "type": "logo_item" },
        { "type": "logo_item" }, { "type": "logo_item" }, { "type": "logo_item" }
      ]
    }
  ]
}
{% endschema %}

{%- comment -%}
  Section HTML and Liquid Logic
{%- endcomment -%}
<div class="logo-scroller-section"
     data-section-id="{{ section.id }}"
     style="--section-bg-color: {{ section.settings.section_bg_color }};
            --heading-color: {{ section.settings.heading_color | default: 'inherit' }};
            --logo-text-color: {{ section.settings.logo_text_color | default: 'inherit' }};
            --logo-max-height: {{ section.settings.logo_max_height }}px;
            --logo-max-width: {{ section.settings.logo_max_width }}px;">

  <div class="page-width">
    {%- assign heading_alignment_class = 'text-align-' | append: section.settings.heading_alignment -%}

    {% if section.settings.title != blank and section.settings.heading_position == 'above' %}
      <h2 class="section__title heading h2 {{ heading_alignment_class }}">{{ section.settings.title | escape }}</h2>
    {% endif %}

    {% if section.blocks.size > 0 %}
      <div class="logo-marquee-container{% if section.settings.pause_on_hover and section.settings.enable_scroll %} pause-on-hover{% endif %}">
        <div class="logo-marquee-track
                    {% if section.settings.enable_scroll %}logo-marquee-track--animated{% else %}logo-marquee-track--static{% endif %}"
             {% if section.settings.enable_scroll %}
               style="--animation-duration: {{ section.settings.animation_duration }}s;
                      {% if section.settings.scroll_direction == 'right' %}animation-direction: reverse;{% endif %}"
             {% endif %}>

          {% comment %} Original Set of Logos (Set A) {% endcomment %}
          {% for block in section.blocks %}
            <div class="logo-marquee-item" {{ block.shopify_attributes }}>
              {%- assign link = block.settings.logo_link -%}
              {%- assign image = block.settings.logo_image -%}
              {%- assign _intermediate_alt = image.alt | default: "Partner logo" -%}
              {%- assign text = block.settings.logo_text | default: _intermediate_alt -%}
              {% if link != blank %}<a href="{{ link }}" target="_blank" rel="noopener" aria-label="{{ text | escape }}">{% endif %}
                {% if image != blank %}
                  {{ image | image_url: height: section.settings.logo_max_height | image_tag: loading: 'lazy', widths: '80, 120, 160, 200, 240', sizes: 'auto', alt: text | escape }}
                {% elsif text != blank %}
                  <span class="logo-marquee-item__text">{{ text | escape }}</span>
                {% else %}
                  {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                {% endif %}
              {% if link != blank %}</a>{% endif %}
            </div>
          {% endfor %}

          {% comment %} First Duplicated Set of Logos (Set B) {% endcomment %}
          {% if section.settings.enable_scroll and section.blocks.size > 0 %}
            {% for block in section.blocks %}
              <div class="logo-marquee-item" {{ block.shopify_attributes }} aria-hidden="true">
                {%- assign link = block.settings.logo_link -%}
                {%- assign image = block.settings.logo_image -%}
                {%- assign _intermediate_alt = image.alt | default: "Partner logo" -%}
                {%- assign text = block.settings.logo_text | default: _intermediate_alt -%}
                {% if link != blank %}<a href="{{ link }}" target="_blank" rel="noopener" aria-label="{{ text | escape }}">{% endif %}
                  {% if image != blank %}
                    {{ image | image_url: height: section.settings.logo_max_height | image_tag: loading: 'lazy', widths: '80, 120, 160, 200, 240', sizes: 'auto', alt: text | escape }}
                  {% elsif text != blank %}
                    <span class="logo-marquee-item__text">{{ text | escape }}</span>
                  {% else %}
                    {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% if link != blank %}</a>{% endif %}
              </div>
            {% endfor %}
          {% endif %}

          {% comment %} Second Duplicated Set of Logos (Set C) {% endcomment %}
          {% if section.settings.enable_scroll and section.blocks.size > 0 %}
            {% for block in section.blocks %}
              <div class="logo-marquee-item" {{ block.shopify_attributes }} aria-hidden="true">
                {%- assign link = block.settings.logo_link -%}
                {%- assign image = block.settings.logo_image -%}
                {%- assign _intermediate_alt = image.alt | default: "Partner logo" -%}
                {%- assign text = block.settings.logo_text | default: _intermediate_alt -%}
                {% if link != blank %}<a href="{{ link }}" target="_blank" rel="noopener" aria-label="{{ text | escape }}">{% endif %}
                  {% if image != blank %}
                    {{ image | image_url: height: section.settings.logo_max_height | image_tag: loading: 'lazy', widths: '80, 120, 160, 200, 240', sizes: 'auto', alt: text | escape }}
                  {% elsif text != blank %}
                    <span class="logo-marquee-item__text">{{ text | escape }}</span>
                  {% else %}
                    {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% if link != blank %}</a>{% endif %}
              </div>
            {% endfor %}
          {% endif %}

          {% comment %} Third Duplicated Set of Logos (Set D) - ADDED FOR 4 TOTAL SETS {% endcomment %}
          {% if section.settings.enable_scroll and section.blocks.size > 0 %}
            {% for block in section.blocks %}
              <div class="logo-marquee-item" {{ block.shopify_attributes }} aria-hidden="true">
                {%- assign link = block.settings.logo_link -%}
                {%- assign image = block.settings.logo_image -%}
                {%- assign _intermediate_alt = image.alt | default: "Partner logo" -%}
                {%- assign text = block.settings.logo_text | default: _intermediate_alt -%}
                {% if link != blank %}<a href="{{ link }}" target="_blank" rel="noopener" aria-label="{{ text | escape }}">{% endif %}
                  {% if image != blank %}
                    {{ image | image_url: height: section.settings.logo_max_height | image_tag: loading: 'lazy', widths: '80, 120, 160, 200, 240', sizes: 'auto', alt: text | escape }}
                  {% elsif text != blank %}
                    <span class="logo-marquee-item__text">{{ text | escape }}</span>
                  {% else %}
                    {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
                  {% endif %}
                {% if link != blank %}</a>{% endif %}
              </div>
            {% endfor %}
          {% endif %}

        </div>
      </div>
    {% else %}
      <p>Add logo blocks to this section.</p>
    {% endif %}

    {% if section.settings.title != blank and section.settings.heading_position == 'below' %}
      <h2 class="section__title heading h2 {{ heading_alignment_class }} section__title--below">{{ section.settings.title | escape }}</h2>
    {% endif %}
  </div>
</div>

{%- comment -%}
  Section Styles
{%- endcomment -%}
<style>
.logo-scroller-section {
  background-color: var(--section-bg-color);
  padding-top: 30px;
  padding-bottom: 30px;
}

.logo-scroller-section .section__title {
  /* Default alignment is center, will be overridden by specific classes if not center */
  text-align: center;
  margin-bottom: 40px; /* Default for 'above' position */
  color: var(--heading-color);
}
.logo-scroller-section .section__title.text-align-left {
  text-align: left;
}
.logo-scroller-section .section__title.text-align-right {
  text-align: right;
}
.logo-scroller-section .section__title--below {
  margin-bottom: 0;
  margin-top: 40px;
}

.logo-marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}

.logo-marquee-track {
  display: flex;
  backface-visibility: hidden;
}

.logo-marquee-track--animated {
  width: fit-content;
  animation: marquee-scroll var(--animation-duration) linear infinite;
  white-space: nowrap;
  will-change: transform;
}

.logo-marquee-track--static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.logo-marquee-container.pause-on-hover:hover .logo-marquee-track--animated {
  animation-play-state: paused;
}

.logo-marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  box-sizing: content-box;
  backface-visibility: hidden;
}

.logo-marquee-track--static .logo-marquee-item {
  padding: 10px 20px;
}

.logo-marquee-item img {
  max-height: var(--logo-max-height, 70px);
  max-width: var(--logo-max-width, 160px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.logo-marquee-item__text {
  display: block;
  max-width: var(--logo-max-width, 160px);
  font-size: 0.9em;
  color: var(--logo-text-color);
  text-align: center;
}

.logo-marquee-item .placeholder-svg {
  fill: var(--logo-text-color);
  width: var(--logo-max-width, 100px);
  height: var(--logo-max-height, 50px);
  object-fit: contain;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    /*
      With 4 sets of logos (Original, Dup1, Dup2, Dup3), track is 4x width of one set.
      To make three sets scroll by before repeating, we translate by 3/4 of total track width.
    */
    transform: translateX(-75%);
  }
}
</style>