{%- comment -%}
  Press Logos — "As seen in" credibility strip.
  Fashion-brand staple (Vogue / Elle / Harper's). Static grid or an
  infinite marquee. Logos render greyscale by default and colour on
  hover, which is the convention that keeps a mixed logo set tidy.
{%- endcomment -%}

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

{% style %}
  .press-{{ uid }} {
    padding-top: {{ s.padding_top }}px;
    padding-bottom: {{ s.padding_bottom }}px;
  }
  .press-{{ uid }}__label {
    text-align: center; margin: 0 0 {{ s.label_gap }}px;
    font-size: {{ s.label_size }}px; letter-spacing: {{ s.label_tracking | divided_by: 100.0 }}em;
    text-transform: uppercase; opacity: .7;
  }
  .press-{{ uid }}__grid {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: {{ s.gap }}px;
  }
  .press-{{ uid }}__item {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    opacity: {{ s.logo_opacity | divided_by: 100.0 }};
    {% if s.greyscale %}filter: grayscale(1);{% endif %}
    transition: opacity .2s ease, filter .2s ease;
  }
  .press-{{ uid }}__item:hover { opacity: 1; {% if s.greyscale %}filter: grayscale(0);{% endif %} }
  .press-{{ uid }}__item img {
    height: {{ s.logo_height }}px; width: auto; display: block;
    object-fit: contain;
  }
  .press-{{ uid }}__item span {
    font-size: {{ s.logo_height | times: 0.7 }}px; font-weight: 600; letter-spacing: .04em;
  }
  {%- if s.layout == 'marquee' -%}
  .press-{{ uid }}__viewport { overflow: hidden; }
  .press-{{ uid }}__grid {
    flex-wrap: nowrap; justify-content: flex-start; width: max-content;
    animation: pressScroll-{{ uid }} {{ s.speed }}s linear infinite;
  }
  .press-{{ uid }}__viewport:hover .press-{{ uid }}__grid { animation-play-state: paused; }
  @keyframes pressScroll-{{ uid }} {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .press-{{ uid }}__grid { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  }
  {%- endif -%}
  @media screen and (max-width: 749px) {
    .press-{{ uid }}__item img { height: {{ s.logo_height | times: 0.75 | round }}px; }
  }
{% endstyle %}

<div class="press-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="{% if s.layout == 'marquee' %}press-{{ uid }}__viewport{% else %}page-width{% endif %}">
    {%- if s.label != blank and s.layout != 'marquee' -%}
      <p class="press-{{ uid }}__label">{{ s.label | escape }}</p>
    {%- endif -%}

    <div class="press-{{ uid }}__grid">
      {%- liquid
        assign passes = 1
        if s.layout == 'marquee'
          assign passes = 2
        endif
      -%}
      {%- for i in (1..passes) -%}
        {%- for block in section.blocks -%}
          {%- capture inner -%}
            {%- if block.settings.logo != blank -%}
              {{ block.settings.logo | image_url: width: 400 | image_tag:
                   loading: "lazy", alt: block.settings.name | default: "" }}
            {%- else -%}
              <span>{{ block.settings.name | default: 'Publication' | escape }}</span>
            {%- endif -%}
          {%- endcapture -%}
          {%- if block.settings.link != blank -%}
            <a class="press-{{ uid }}__item" href="{{ block.settings.link }}"
               {% if i == 1 %}{{ block.shopify_attributes }}{% endif %}
               {% if i == 2 %}aria-hidden="true" tabindex="-1"{% endif %}>{{ inner }}</a>
          {%- else -%}
            <div class="press-{{ uid }}__item"
               {% if i == 1 %}{{ block.shopify_attributes }}{% endif %}
               {% if i == 2 %}aria-hidden="true"{% endif %}>{{ inner }}</div>
          {%- endif -%}
        {%- endfor -%}
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Press Logos",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "text", "id": "label", "label": "Label", "default": "As seen in" },
    { "type": "select", "id": "layout", "label": "Layout", "default": "grid",
      "options": [ {"value":"grid","label":"Static row"}, {"value":"marquee","label":"Scrolling marquee"} ] },
    { "type": "range", "id": "speed", "min": 10, "max": 90, "step": 5, "unit": "s", "label": "Marquee duration", "default": 30 },
    { "type": "header", "content": "Logos" },
    { "type": "range", "id": "logo_height", "min": 16, "max": 90, "step": 2, "unit": "px", "label": "Logo height", "default": 34 },
    { "type": "range", "id": "gap", "min": 12, "max": 100, "step": 4, "unit": "px", "label": "Gap", "default": 48 },
    { "type": "range", "id": "logo_opacity", "min": 20, "max": 100, "step": 5, "unit": "%", "label": "Logo opacity", "default": 65 },
    { "type": "checkbox", "id": "greyscale", "label": "Greyscale until hover", "default": true },
    { "type": "header", "content": "Label style" },
    { "type": "range", "id": "label_size", "min": 9, "max": 20, "step": 1, "unit": "px", "label": "Label size", "default": 12 },
    { "type": "range", "id": "label_tracking", "min": 0, "max": 40, "step": 1, "label": "Label tracking", "default": 16, "info": "In hundredths of an em." },
    { "type": "range", "id": "label_gap", "min": 0, "max": 48, "step": 2, "unit": "px", "label": "Space below label", "default": 22 },
    { "type": "header", "content": "Section" },
    { "type": "color_scheme", "id": "color_scheme", "label": "Colour scheme", "default": "scheme-1" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 36 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 36 }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        { "type": "image_picker", "id": "logo", "label": "Logo", "info": "SVG or transparent PNG works best." },
        { "type": "text", "id": "name", "label": "Name", "info": "Used as alt text, or as a text fallback with no image." },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Press Logos",
      "blocks": [ {"type":"logo"}, {"type":"logo"}, {"type":"logo"}, {"type":"logo"}, {"type":"logo"} ]
    }
  ]
}
{% endschema %}
