<div class="mb-5 lg:mb-0">
    @if (!empty($testimonials))
        <article x-data="{
            current: 0,
            total: {{ count($testimonials) }},
            timer: null,
            start() {
                this.timer = setInterval(() => this.next(), 6000);
            },
            stop() {
                clearInterval(this.timer);
            },
            next() {
                this.current = (this.current + 1) % this.total;
                this.stop();
                this.start();
            },
            prev() {
                this.current = (this.current - 1 + this.total) % this.total;
                this.stop();
                this.start();
            },
            getClass(index) {
                const isCurrent = this.current === index;
                let isBefore = index < this.current;
        
                if (this.current === 0 && index === this.total - 1) isBefore = true;
                if (this.current === this.total - 1 && index === 0) isBefore = false;
        
                return {
                    'opacity-100 z-10 translate-x-0': isCurrent,
                    'opacity-0 z-0': !isCurrent,
                    '-translate-x-full': !isCurrent && isBefore,
                    'translate-x-full': !isCurrent && !isBefore
                };
            }
        }" x-init="start()"
            class="relative w-full mt-auto h-[300px] lg:h-[250px] bg-home-background/40 backdrop-blur-md border border-home-secondary rounded-2xl z-30 shadow-sm overflow-hidden transition-all duration-300">

            <div class="relative w-full h-full py-0 px-6">
                @foreach ($testimonials as $index => $testimonial)
                    <div class="testimonial-slide absolute inset-0 py-0 px-6 flex flex-col justify-center transition-all duration-500 ease-in-out {{ $index === 0 ? 'opacity-100 z-10 translate-x-0' : 'opacity-0 z-0 translate-x-full' }}"
                        :class="getClass({{ $index }})">
                        <div class="flex items-center gap-4 mb-3">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($testimonial['user']['customer']['name'] ?? 'User') }}&background=random&color=fff"
                                alt="{{ $testimonial['user']['customer']['name'] ?? 'User' }}"
                                class="w-12 h-12 rounded-full object-cover ring-2 ring-home-background">
                            <div>
                                <h4 class="font-bold text-home-foreground text-sm lg:text-base">
                                    {{ $testimonial['user']['customer']['name'] ?? 'User' }}</h4>
                                <div class="flex text-home-primary text-xs">
                                    @for ($i = 0; $i < $testimonial['rating']; $i++)
                                        ★
                                    @endfor
                                </div>
                            </div>
                        </div>
                        <p class="text-home-neutral text-base lg:text-lg italic leading-relaxed">
                            &quot;{{ $testimonial['content'] }}&quot;
                        </p>
                    </div>
                @endforeach
            </div>

            <div class="absolute bottom-4 right-4 flex items-center gap-2 z-30">
                <button @click="prev()"
                    class="w-10 h-10 rounded-full bg-home-background/80 backdrop-blur border border-home-background shadow-sm hover:bg-home-background flex justify-center items-center transition-colors group">
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="w-4 h-4 text-home-primary group-hover:scale-110 transition-transform" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button @click="next()"
                    class="w-10 h-10 rounded-full bg-home-primary shadow-md hover:bg-home-primary/80 flex justify-center items-center transition-colors group">
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="w-4 h-4 text-home-background group-hover:scale-110 transition-transform" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </article>
    @endif
</div>
