@php
    $gray = $block->get('grayscale', true) ? 'grayscale opacity-70 hover:grayscale-0 hover:opacity-100' : '';
    $speed = ['slow' => '45s', 'normal' => '30s', 'fast' => '18s'][$block->get('speed', 'normal')] ?? '30s';
    $dwell = ['slow' => 4200, 'normal' => 3000, 'fast' => 1800][$block->get('speed', 'normal')] ?? 3000;
    $logo = fn ($p) => is_array($p) ? (data_get($p, 'logo') ?: data_get($p, 'logo_path')) : $p;
    $name = fn ($p) => is_array($p) ? (website_text(data_get($p, 'name')) ?: data_get($p, 'name_ar')) : '';
@endphp

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @include('website.blocks._header')

    @if ($variant === 'marquee')
        <div class="ec-marquee overflow-hidden" style="--marquee-duration:{{ $speed }}">
            <div class="ec-marquee-track flex items-center gap-12">
                {{-- Duplicated once so the loop has no visible seam. --}}
                @foreach ($items->concat($items) as $p)
                    <img src="{{ $logo($p) }}" alt="{{ $name($p) }}" loading="lazy"
                         class="h-12 w-auto object-contain shrink-0 transition {{ $gray }}">
                @endforeach
            </div>
        </div>

    @elseif ($variant === 'focus_carousel')
        {{--
            One logo at a time holds focus in the centre; the rest recede.

            Built on native scroll-snap rather than a transform track, so it
            still scrolls by touch, trackpad and keyboard if the timer never
            runs — and a reader who prefers reduced motion simply gets a
            scrollable row with nothing moving on its own.
        --}}
        <div x-data="{
                active: 0,
                total: {{ $items->count() }},
                timer: null,
                reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
                start() {
                    if (this.reduced || this.total < 2) return;
                    this.timer = setInterval(() => this.go((this.active + 1) % this.total), {{ $dwell }});
                },
                stop() { clearInterval(this.timer); this.timer = null; },
                go(i) {
                    this.active = i;
                    const track = this.$refs.track;
                    const el = track?.children[i];
                    if (!el) return;
                    /*
                     * Scroll the track itself, never scrollIntoView(): that walks
                     * up and scrolls every ancestor including the document, so a
                     * timer on this carousel dragged the whole page down to it
                     * every few seconds while the reader was elsewhere.
                     */
                    const target = el.offsetLeft - (track.clientWidth - el.clientWidth) / 2;
                    track.scrollTo({ left: target, behavior: this.reduced ? 'auto' : 'smooth' });
                },
             }"
             x-init="start()"
             x-on:mouseenter="stop()" x-on:mouseleave="start()"
             x-on:focusin="stop()" x-on:focusout="start()">

            <div x-ref="track"
                 class="flex items-center gap-10 overflow-x-auto py-10 [scrollbar-width:none] [&::-webkit-scrollbar]{display:none}"
                 style="scroll-snap-type: x mandatory;">
                @foreach ($items as $idx => $p)
                    @php $url = safe_url(data_get($p, 'url')); @endphp
                    <div class="ec-focus-item shrink-0" style="scroll-snap-align: center;"
                         x-bind:data-active="active === {{ $idx }} ? 'true' : 'false'">
                        <{{ $url ? 'a' : 'div' }}
                            @if ($url) href="{{ $url }}" target="_blank" rel="noopener noreferrer" @endif
                            class="ec-focus-tile flex h-24 w-40 items-center justify-center p-4">
                            <img src="{{ $logo($p) }}" alt="{{ $name($p) }}" loading="lazy"
                                 class="max-h-full max-w-full object-contain">
                        </{{ $url ? 'a' : 'div' }}>
                    </div>
                @endforeach
            </div>

            @if ($items->count() > 1)
                <div class="mt-6 flex items-center justify-center gap-2">
                    @foreach ($items as $idx => $p)
                        <button type="button" x-on:click="stop(); go({{ $idx }}); start()"
                                class="h-1.5 rounded-full transition-all"
                                x-bind:class="active === {{ $idx }} ? 'w-6 bg-[var(--site-accent)]' : 'w-1.5 bg-current opacity-30'"
                                aria-label="{{ $name($p) ?: __('شعار') . ' ' . ($idx + 1) }}"></button>
                    @endforeach
                </div>
            @endif
        </div>

    @else
        <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
            @foreach ($items as $p)
                @php $url = safe_url(data_get($p, 'url')); @endphp
                <{{ $url ? 'a' : 'div' }} @if ($url) href="{{ $url }}" target="_blank" rel="noopener noreferrer" @endif
                    class="ec-stagger-item {{ $variant === 'bordered' ? 'px-8 border-e last:border-e-0' : '' }}">
                    <img src="{{ $logo($p) }}" alt="{{ $name($p) }}" loading="lazy"
                         class="h-12 w-auto object-contain transition {{ $gray }}">
                </{{ $url ? 'a' : 'div' }}>
            @endforeach
        </div>
    @endif
</div>
