{{-- Лента магазинов: логотип + название, ссылка на витрину продавца.

     Механика та же, что у ленты интеграций на /sell (Alpine: logoMarquee):
     прокрутка нативная, поэтому на телефоне лента листается пальцем с
     инерцией, а скрипт лишь подталкивает её и замыкает в кольцо. Наведение,
     фокус и касание автопрокрутку останавливают.

     Трек — два одинаковых списка: доехав до половины, лента возвращается на
     её длину назад, и стык не виден. Копия для скринридера и клавиатуры
     скрыта, иначе каждый магазин читался бы дважды. --}}
@if ($shopLogos->isNotEmpty())
    <section class="mt-8">
        <div class="mb-3.5 flex items-center justify-between gap-3">
            <h2 class="text-[22px] font-extrabold tracking-[-0.4px] text-[var(--color-ink)]">Магазины на teeu</h2>
        </div>

        {{-- pointerup слушаем на window: палец нередко отпускают уже за краем
             ленты, и локальный обработчик туда бы не долетел — лента залипла бы. --}}
        <div class="group relative" x-data="logoMarquee"
             @mouseenter="hovered = true" @mouseleave="hovered = false"
             @focusin="hovered = true" @focusout="hovered = false"
             @pointerdown="dragging = true"
             @pointerup.window="dragging = false"
             @pointercancel.window="dragging = false">
            <div x-ref="viewport" class="marquee -mx-4 px-4 sm:mx-0 sm:px-0">
                <div class="flex w-max">
                    @for ($copy = 0; $copy < 2; $copy++)
                        <ul class="flex shrink-0 items-stretch gap-3 pr-3" @if ($copy > 0) aria-hidden="true" @endif>
                            @foreach ($shopLogos as $shop)
                                <li class="shrink-0">
                                    <a href="{{ route('seller.card', $shop['slug']) }}" @if ($copy > 0) tabindex="-1" @endif
                                       class="flex h-full w-[43vw] flex-col items-center justify-center gap-2.5 rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white px-3 py-4 transition hover:border-[var(--color-line-strong)] hover:shadow-[var(--shadow-hover)] sm:w-48">
                                        <img src="{{ $shop['logo'] }}" alt="{{ $shop['name'] }}" loading="lazy"
                                             class="h-14 w-full object-contain sm:h-16">
                                        <span class="line-clamp-2 text-center text-[13px] font-semibold leading-snug text-[var(--color-ink)]">{{ $shop['name'] }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endfor
                </div>
            </div>
        </div>
    </section>
@endif