{% set c = module.content %}
{% set s = module.style %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Build CSS classes #}
{% set module_classes = "logo-cloud" %}
{% set module_classes = module_classes ~ " logo-cloud--" ~ c.layout_type %}
{% set module_classes = module_classes ~ " logo-cloud--align-" ~ s.layout.alignment %}
{% if s.logo_style.grayscale %}
  {% set module_classes = module_classes ~ " logo-cloud--grayscale" %}
{% endif %}
{% if s.logo_style.color_on_hover and s.logo_style.grayscale %}
  {% set module_classes = module_classes ~ " logo-cloud--color-hover" %}
{% endif %}
{% if c.layout_type == "carousel" and s.carousel.pause_on_hover %}
  {% set module_classes = module_classes ~ " logo-cloud--pause-hover" %}
{% endif %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

{# Calculate carousel animation duration based on number of logos and speed #}
{% set logo_count = c.logos|length %}
{% set logo_width = 160 %}
{% set total_width = logo_count * (logo_width + 48) %}
{% set animation_duration = total_width / s.carousel.speed %}

<section class="{{ module_classes }}"
         {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
         style="
           --lc-gap: {{ s.layout.gap }};
           --lc-logo-height: {{ s.logo_style.max_height }};
           --lc-opacity: {{ s.logo_style.opacity / 100 }};
           --lc-cols-mobile: {{ s.layout.cols_mobile }};
           --lc-cols-tablet: {{ s.layout.cols_tablet }};
           --lc-cols-desktop: {{ s.layout.cols_desktop }};
           --lc-pt: {{ spacing.padding_top }};
           --lc-pb: {{ spacing.padding_bottom }};
           --lc-animation-duration: {{ animation_duration }}s;
           --lc-direction: {% if s.carousel.direction == 'right' %}reverse{% else %}normal{% endif %};
         ">

  {% if c.heading %}
    <p class="logo-cloud__heading">{{ c.heading|escape }}</p>
  {% endif %}

  {% if c.layout_type == "carousel" %}
    {# Carousel layout with infinite scroll #}
    <div class="logo-cloud__carousel" aria-label="Partner logos">
      <div class="logo-cloud__track {% if s.carousel.autoplay %}logo-cloud__track--animate{% endif %}">
        {# First set of logos #}
        {% for logo in c.logos %}
          {% set logo_alt = logo.alt_text|default(logo.image.alt, true)|default("Partner logo", true) %}
          {% if logo.link.url.href %}
            <a href="{{ logo.link.url.href }}"
               class="logo-cloud__item"
               {% if logo.link.open_in_new_tab %}target="_blank" rel="noopener"{% endif %}>
          {% else %}
            <span class="logo-cloud__item">
          {% endif %}
            {% if logo.image.src %}
              <img src="{{ logo.image.src }}"
                   alt="{{ logo_alt }}"
                   width="{{ logo.image.width|default(160) }}"
                   height="{{ logo.image.height|default(48) }}"
                   loading="lazy"
                   decoding="async"
                   class="logo-cloud__logo">
            {% else %}
              <span class="logo-cloud__placeholder">{{ logo_alt }}</span>
            {% endif %}
          {% if logo.link.url.href %}
            </a>
          {% else %}
            </span>
          {% endif %}
        {% endfor %}
        {# Duplicate set for seamless loop #}
        {% for logo in c.logos %}
          {% set logo_alt = logo.alt_text|default(logo.image.alt, true)|default("Partner logo", true) %}
          <span class="logo-cloud__item" aria-hidden="true">
            {% if logo.image.src %}
              <img src="{{ logo.image.src }}"
                   alt=""
                   width="{{ logo.image.width|default(160) }}"
                   height="{{ logo.image.height|default(48) }}"
                   loading="lazy"
                   decoding="async"
                   class="logo-cloud__logo">
            {% else %}
              <span class="logo-cloud__placeholder">{{ logo_alt }}</span>
            {% endif %}
          </span>
        {% endfor %}
      </div>
    </div>
  {% else %}
    {# Row or Grid layout #}
    <div class="logo-cloud__container" role="list" aria-label="Partner logos">
      {% for logo in c.logos %}
        {% set logo_alt = logo.alt_text|default(logo.image.alt, true)|default("Partner logo", true) %}
        {% if logo.link.url.href %}
          <a href="{{ logo.link.url.href }}"
             class="logo-cloud__item"
             role="listitem"
             {% if logo.link.open_in_new_tab %}target="_blank" rel="noopener"{% endif %}>
        {% else %}
          <span class="logo-cloud__item" role="listitem">
        {% endif %}
          {% if logo.image.src %}
            <img src="{{ logo.image.src }}"
                 alt="{{ logo_alt }}"
                 width="{{ logo.image.width|default(160) }}"
                 height="{{ logo.image.height|default(48) }}"
                 loading="lazy"
                 decoding="async"
                 class="logo-cloud__logo">
          {% else %}
            <span class="logo-cloud__placeholder">{{ logo_alt }}</span>
          {% endif %}
        {% if logo.link.url.href %}
          </a>
        {% else %}
          </span>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</section>

{% require_css %}
<style>
  .logo-cloud {
    padding: var(--lc-pt, 48px) 0 var(--lc-pb, 48px);
  }

  /* Heading */
  .logo-cloud__heading {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted, #6b7280);
    margin: 0 0 2rem;
  }

  .logo-cloud--align-center .logo-cloud__heading {
    text-align: center;
  }

  .logo-cloud--align-left .logo-cloud__heading {
    text-align: left;
  }

  /* Container - Row and Grid layouts */
  .logo-cloud__container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-gap, 48px);
    align-items: center;
  }

  .logo-cloud--align-center .logo-cloud__container {
    justify-content: center;
  }

  .logo-cloud--align-left .logo-cloud__container {
    justify-content: flex-start;
  }

  /* Grid layout */
  .logo-cloud--grid .logo-cloud__container {
    display: grid;
    grid-template-columns: repeat(var(--lc-cols-mobile, 2), 1fr);
  }

  /* Tablet tier kept below the canonical desktop breakpoint */
  @media (min-width: 768px) {
    .logo-cloud--grid .logo-cloud__container {
      grid-template-columns: repeat(var(--lc-cols-tablet, 4), 1fr);
    }
  }

  @media (min-width: 993px) {
    .logo-cloud--grid .logo-cloud__container {
      grid-template-columns: repeat(var(--lc-cols-desktop, 6), 1fr);
    }
  }

  /* Logo item */
  .logo-cloud__item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
  }

  .logo-cloud__logo {
    max-height: var(--lc-logo-height, 40px);
    width: auto;
    object-fit: contain;
    opacity: var(--lc-opacity, 0.6);
    transition: opacity 0.2s ease, filter 0.2s ease;
  }

  /* Grayscale filter */
  .logo-cloud--grayscale .logo-cloud__logo {
    filter: grayscale(100%);
  }

  /* Hover effects */
  .logo-cloud__item:hover .logo-cloud__logo {
    opacity: 1;
  }

  .logo-cloud--color-hover .logo-cloud__item:hover .logo-cloud__logo {
    filter: grayscale(0%);
  }

  a.logo-cloud__item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Placeholder (when no image) */
  .logo-cloud__placeholder {
    font-size: 0.75rem;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    border: 1px dashed var(--color-border, #d1d5db);
    border-radius: 4px;
    opacity: var(--lc-opacity, 0.6);
  }

  /* Carousel layout */
  .logo-cloud__carousel {
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black 10%,
      black 90%,
      transparent
    );
  }

  .logo-cloud__track {
    display: flex;
    gap: var(--lc-gap, 48px);
    width: max-content;
  }

  .logo-cloud__track--animate {
    animation: logo-scroll var(--lc-animation-duration, 30s) linear infinite;
    animation-direction: var(--lc-direction, normal);
  }

  .logo-cloud--pause-hover .logo-cloud__carousel:hover .logo-cloud__track--animate {
    animation-play-state: paused;
  }

  @keyframes logo-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      /* -50% lands half a gap short of the duplicate set's start (flex gap isn't
         added after the last item); subtract half a gap for a seamless loop. */
      transform: translateX(calc(-50% - var(--lc-gap, 48px) / 2));
    }
  }

  /* Carousel items */
  .logo-cloud--carousel .logo-cloud__item {
    flex-shrink: 0;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .logo-cloud__track--animate {
      animation: none;
    }

    .logo-cloud__logo,
    .logo-cloud__item {
      transition: none;
    }
  }

  /* Dark mode */
  {% if theme.dark_mode.enabled %}
  @media (prefers-color-scheme: dark) {
    .logo-cloud__heading {
      color: var(--color-text-muted);
    }

    .logo-cloud__placeholder {
      color: var(--color-text-muted);
      border-color: var(--color-border);
    }

    /* Invert dark logos for visibility */
    .logo-cloud--grayscale .logo-cloud__logo {
      filter: grayscale(100%) invert(1);
    }

    .logo-cloud--color-hover .logo-cloud__item:hover .logo-cloud__logo {
      filter: grayscale(0%) invert(0);
    }
  }
  {% endif %}

  /* Print */
  @media print {
    .logo-cloud__track--animate {
      animation: none;
    }

    .logo-cloud__carousel {
      mask-image: none;
      -webkit-mask-image: none;
    }

    .logo-cloud__logo {
      opacity: 1;
      filter: grayscale(100%);
    }
  }
</style>
{% end_require_css %}