@props([
    'label' => 'موثوق لدى:',
])

@php
    if (!isset($clients)) {
        $clients = collect([
            ['id' => 0, 'name' => 'TechVentures', 'url' => null, 'logo_url' => null],
            ['id' => 1, 'name' => 'AlNoor Group', 'url' => null, 'logo_url' => null],
            ['id' => 2, 'name' => 'DigitalHub KSA', 'url' => null, 'logo_url' => null],
        ]);
    }
@endphp

<div x-data="marqueeSlider(@js($clients))" class="clients border-y border-gray-light/20 bg-dark/40 py-5">
    <div class="container">
        <div class="flex flex-col md:flex-row items-center gap-5 md:gap-8">
            <div class="text-gray-light text-sm font-mono whitespace-nowrap">{{ $label }}</div>
            <div class="relative w-full overflow-hidden">
                {{-- شريط التمرير اللانهائي --}}
                <div x-ref="track" dir="ltr" class="flex gap-5 whitespace-nowrap"></div>
            </div>
        </div>
    </div>

    {{-- مودال عرض الشعار الكبير --}}
    <div x-data="{ open: false, activeClient: null }"
         x-on:open-client-modal.window="activeClient = $event.detail; open = true"
         x-show="open" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
         @click.self="open = false">
        <div class="relative bg-dark border border-gray-light/20 rounded-2xl p-4 shadow-glow max-w-lg w-full mx-4" @click.stop>
            <button @click="open = false" class="absolute top-3 right-3 text-gray-light hover:text-white text-xl leading-none">&times;</button>
            <div class="flex items-center justify-center p-4">
                <template x-if="activeClient && activeClient.logo_url">
                    <div>
                        <template x-if="activeClient.url">
                            <a :href="activeClient.url" target="_blank" rel="noopener">
                                <img :src="activeClient.logo_url" :alt="activeClient.name" class="max-h-[60vh] max-w-full object-contain">
                            </a>
                        </template>
                        <template x-if="!activeClient.url">
                            <img :src="activeClient.logo_url" :alt="activeClient.name" class="max-h-[60vh] max-w-full object-contain">
                        </template>
                    </div>
                </template>
            </div>
            <p class="text-center text-gray-light mt-2" x-text="activeClient?.name"></p>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('marqueeSlider', (clients) => ({
        speed: 2,
        animationId: null,
        init() {
            const track = this.$refs.track;
            if (!track || clients.length === 0) return;

            const createCard = (client) => {
                const div = document.createElement('div');
                div.className = 'client-logo flex-shrink-0 w-48 px-5 py-3 rounded-lg border border-gray-light/20 text-gray-light text-sm font-mono font-semibold hover:text-white hover:border-primary/40 transition-all cursor-pointer select-none flex items-center justify-center';
                div.style.minHeight = '80px';

                if (client.logo_url) {
                    const img = document.createElement('img');
                    img.src = client.logo_url;
                    img.alt = client.name;
                    img.className = 'h-16 w-auto object-contain';
                    div.appendChild(img);
                    div.addEventListener('click', () => {
                        window.dispatchEvent(new CustomEvent('open-client-modal', { detail: client }));
                    });
                } else {
                    div.textContent = client.name;
                    if (client.url) {
                        div.addEventListener('click', () => window.open(client.url, '_blank'));
                    }
                }
                return div;
            };


            clients.forEach(client => track.appendChild(createCard(client)));
            clients.forEach(client => track.appendChild(createCard(client)));


            this.$nextTick(() => {
                this.startAnimation();
            });
        },
        startAnimation() {
            const track = this.$refs.track;
            let position = 0;

            setTimeout(() => {
                const singleWidth = track.scrollWidth / 2;
                const step = () => {
                    position = (position + this.speed) % singleWidth;
                    track.style.transform = `translateX(-${position}px)`;
                    this.animationId = requestAnimationFrame(step);
                };
                this.animationId = requestAnimationFrame(step);
            }, 150);
        },
        destroy() {
            if (this.animationId) cancelAnimationFrame(this.animationId);
        }
    }));
});
</script>
@endpush