@props([
    'items' => [],
    'emptyLabel' => 'Logo à fournir',
    'placeholderCount' => 4,
    'label' => 'Logos',
    'speed' => 'normal',
    'direction' => 'left',
    'pauseOnHover' => true,
    'minItemsForScroll' => 6,
])

@php
    $itemCount = count($items);
    $shouldScroll = $itemCount >= $minItemsForScroll;

    $durationMap = ['slow' => '55s', 'normal' => '35s', 'fast' => '20s'];
    $duration = $durationMap[$speed] ?? $durationMap['normal'];
@endphp

@if ($itemCount === 0)
    {{-- État vide : emplacements clairement identifiés, aucun logo inventé --}}
    <div {{ $attributes->merge(['class' => 'grid grid-cols-2 gap-4 sm:grid-cols-4']) }}>
        @for ($i = 0; $i < $placeholderCount; $i++)
            <div class="flex h-20 flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-brand-border bg-brand-surface px-4 text-brand-muted">
                <x-icon name="image-off" class="h-5 w-5" />
                <span class="text-center text-[0.6875rem] font-medium leading-tight">{{ $emptyLabel }}</span>
            </div>
        @endfor
    </div>
@elseif (!$shouldScroll)
    {{-- Peu d'éléments : rangée statique, aucun défilement inutile --}}
    <div {{ $attributes->merge(['class' => 'flex flex-wrap items-center justify-center gap-4']) }}>
        @foreach ($items as $item)
            <x-logo-cloud-item :item="$item" />
        @endforeach
    </div>
@else
    {{-- Défilement horizontal accessible : boucle CSS pure, pas de dépendance externe --}}
    <div
        {{ $attributes->merge(['class' => 'logo-marquee']) }}
        role="region"
        aria-label="{{ $label }}"
        data-pause-hover="{{ $pauseOnHover ? 'true' : 'false' }}"
    >
        <div
            class="logo-marquee__track"
            data-marquee-track
            data-direction="{{ $direction }}"
            style="--marquee-duration: {{ $duration }};"
        >
            <ul role="list" class="logo-marquee__group">
                @foreach ($items as $item)
                    <li><x-logo-cloud-item :item="$item" /></li>
                @endforeach
            </ul>
            {{-- Copie purement visuelle pour boucler sans à-coup : masquée des lecteurs d'écran et non focusable --}}
            <ul role="list" class="logo-marquee__group" aria-hidden="true">
                @foreach ($items as $item)
                    <li><x-logo-cloud-item :item="$item" :interactive="false" /></li>
                @endforeach
            </ul>
        </div>
    </div>
@endif
