@props(['heading' => null, 'testimonials' => []])

@php
    $WORD_LIMIT = 100;
@endphp

<div 
    x-data="{
        activeSlide: 0,
        totalSlides: {{ count($testimonials) }},
        autoplayInterval: null,
        init() {
            this.startAutoplay();
        },
        startAutoplay() {
            this.autoplayInterval = setInterval(() => {
                this.activeSlide = (this.activeSlide + 1) % this.totalSlides;
            }, 5000);
        },
        stopAutoplay() {
            clearInterval(this.autoplayInterval);
        },
        goToSlide(index) {
            this.activeSlide = index;
            this.stopAutoplay();
            this.startAutoplay();
        }
    }"
    class="bg-white py-24 sm:py-32"
    @mouseover="stopAutoplay()"
    @mouseleave="startAutoplay()"
>
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-xl text-center">
            <h2 class="text-4xl font-bold leading-8 tracking-tight text-primary">{{ $heading ?? 'Testimonials' }}</h2>
        </div>
        
        <div class="relative mx-auto mt-16 max-w-2xl">
            <!-- Carousel Container -->
            <div class="relative overflow-hidden">
                <div 
                    class="flex transition-transform duration-500 ease-in-out"
                    :style="'transform: translateX(-' + (activeSlide * 100) + '%)'"
                >
                    @foreach($testimonials as $testimonial)
                        <div class="w-full flex-none hover:shadow-md">
                            <figure class="rounded-2xl bg-gray-50 p-8 text-sm leading-6 mx-auto max-w-lg">
                                <blockquote class="text-gray-900">
                                    @php
                                        $words = str_word_count(strip_tags($testimonial->content), 1);
                                        $truncated = implode(' ', array_slice($words, 0, $WORD_LIMIT));
                                        $hasMoreWords = count($words) > $WORD_LIMIT;
                                    @endphp
                                    <p id="description-{{ $testimonial->id }}" class="text-center">{{ $truncated }}</p>
                                    @if($hasMoreWords)
                                        <button 
                                            onclick="document.getElementById('modal-{{ $testimonial->id }}').classList.remove('hidden')"
                                            class="text-indigo-600 hover:text-indigo-500 mt-2 block mx-auto">
                                            Read More
                                        </button>
                                    @endif
                                </blockquote>
                                <figcaption class="mt-6 flex items-center gap-x-4 justify-center">
                                    @if($testimonial->image)
                                        <img class="h-10 w-10 rounded-full bg-gray-50" src="{{ $testimonial->image }}" alt="">
                                    @else
                                        <div class="h-10 w-10 rounded-full bg-tertiary flex items-center justify-center">
                                            <span class="text-white font-bold">{{ substr($testimonial->name, 0, 1) }}</span>
                                        </div>
                                    @endif
                                    <div>
                                        <div class="font-semibold text-gray-900">{{ $testimonial->name }}</div>
                                        <div class="text-gray-600">{{ $testimonial->description }}</div>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Dot Indicators -->
            <div class="flex justify-center space-x-2 mt-8">
                @foreach($testimonials as $index => $testimonial)
                    <button 
                        @click="goToSlide({{ $index }})"
                        :class="{'bg-primary': activeSlide === {{ $index }}, 'bg-gray-300': activeSlide !== {{ $index }}}"
                        class="w-3 h-3 rounded-full transition-colors duration-300"
                        aria-label="Go to slide {{ $index + 1 }}"
                    ></button>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Modals -->
    @foreach($testimonials as $testimonial)
        @php
            $words = str_word_count(strip_tags($testimonial->content), 1);
            $hasMoreWords = count($words) > $WORD_LIMIT;
        @endphp
        @if($hasMoreWords)
            <div id="modal-{{ $testimonial->id }}" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
                <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
                    <div class="mt-3">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">{{ $testimonial->name }}'s Testimonial</h3>
                        <div class="mt-2 text-gray-600">
                            {!! $testimonial->content !!}
                        </div>
                        <div class="mt-4">
                            <button 
                                onclick="document.getElementById('modal-{{ $testimonial->id }}').classList.add('hidden')"
                                class="px-4 py-2 bg-primary text-white text-base font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
</div>