@once
<style>
    /* Testimonial Carousel Container */
    .testimonial-carousel-wrapper {
        width: 100%;
        position: relative;
        padding: 1.5rem 0;
    }

    .testimonial-carousel-container {
        overflow: hidden;
        width: 100%;
        border-radius: 1rem;
        position: relative;
    }

    .testimonial-carousel-track {
        display: flex;
        gap: 1.5rem;
        will-change: transform;
        padding: 0.5rem 0;
    }

    .testimonial-carousel-track.animating {
        transform: translateX(0);
    }

    /* Pause animation on hover */
    .testimonial-carousel-container:hover .testimonial-carousel-track {
        transform: translateX(0);
    }

    /* Infinite scroll animation - smooth horizontal slide */
    /* Animates through one full set of cards, then resets seamlessly */
    /* With 4 card sets total, -25% animates exactly one set */
    /* Removed animation in favor of RAF-based smooth transform */

    /* Responsive animation speed */
    @media (max-width: 768px) {
        .testimonial-carousel-track {
            gap: 1rem;
        }
    }

    @media (max-width: 640px) {
        .testimonial-carousel-track {
            gap: 0.75rem;
        }
        .testimonial-carousel-wrapper {
            padding: 1rem 0;
        }
    }

    /* Testimonial Card Styles */
    .testimonial-card {
        flex: 0 0 320px;
        min-width: 320px;
        background: linear-gradient(135deg, #F9EDDE 0%, #FEF5EF 100%);
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 4px 15px rgba(90, 31, 24, 0.08);
        border: 1px solid rgba(90, 31, 24, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* Background accent */
    .testimonial-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(239, 68, 68, 0.05) 0%, transparent 70%);
        border-radius: 50%;
        z-index: 0;
    }

    .testimonial-card-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Header dengan nama dan rating */
    .testimonial-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        gap: 0.75rem;
    }

    .testimonial-card-name {
        font-weight: 700;
        font-size: 0.875rem;
        color: #3a2a1a;
        line-height: 1.2;
        flex: 1;
    }

    .testimonial-card-rating {
        color: #f59e0b;
        font-size: 0.875rem;
        font-weight: 600;
        white-space: nowrap;
        letter-spacing: 0.05em;
    }

    /* Review text dengan clamping */
    .testimonial-card-text {
        font-size: 0.875rem;
        color: #5c4637;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        flex-grow: 1;
        margin-bottom: 1rem;
    }

    /* Footer dengan badge */
    .testimonial-card-footer {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(90, 31, 24, 0.08);
    }

    .testimonial-card-date {
        font-size: 0.75rem;
        color: #8b7355;
        font-weight: 500;
    }

    .testimonial-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        background: rgba(220, 38, 38, 0.1);
        color: #b91c1c;
        padding: 0.25rem 0.625rem;
        border-radius: 0.375rem;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .testimonial-card-badge i {
        font-size: 0.65rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .testimonial-card {
            flex: 0 0 280px;
            min-width: 280px;
            padding: 1.25rem;
        }

        .testimonial-card-text {
            -webkit-line-clamp: 2;
            font-size: 0.8125rem;
        }

        .testimonial-card-name {
            font-size: 0.8125rem;
        }
    }

    @media (max-width: 640px) {
        .testimonial-card {
            flex: 0 0 240px;
            min-width: 240px;
            padding: 1rem;
            border-radius: 0.75rem;
        }

        .testimonial-card-text {
            -webkit-line-clamp: 2;
            font-size: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .testimonial-card-name {
            font-size: 0.75rem;
        }

        .testimonial-card-header {
            margin-bottom: 0.75rem;
            gap: 0.5rem;
        }

        .testimonial-card-footer {
            padding-top: 0.5rem;
        }

        .testimonial-card-rating {
            font-size: 0.75rem;
        }
    }

    /* Smooth transition for added elements */
    .testimonial-card:nth-child(n) {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Empty state */
    .testimonial-empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: #5c4637;
    }

    .testimonial-empty-state-icon {
        font-size: 3rem;
        color: #d1d5db;
        margin-bottom: 1rem;
        display: block;
    }

    .testimonial-empty-state-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #3a2a1a;
        margin-bottom: 0.5rem;
    }

    .testimonial-empty-state-text {
        font-size: 0.875rem;
        color: #8b7355;
    }
</style>

<div class="testimonial-carousel-wrapper">
    @if(isset($testimonials) && $testimonials->count() > 0)
        <div class="testimonial-carousel-container" id="testimonialCarousel">
            <div class="testimonial-carousel-track" id="testimonialTrack">
                <!-- Cards will be duplicated by JavaScript for seamless loop -->
                @foreach($testimonials as $testimonial)
                    <div class="testimonial-card" data-testimonial-id="{{ $testimonial->id }}">
                        <div class="testimonial-card-content">
                            <div class="testimonial-card-header">
                                <div class="testimonial-card-name">{{ $testimonial->customer_name }}</div>
                                <div class="testimonial-card-rating">
                                    @for($i = 0; $i < 5; $i++)
                                        @if($i < $testimonial->rating)★@else☆@endif
                                    @endfor
                                </div>
                            </div>

                            <p class="testimonial-card-text">{{ $testimonial->content }}</p>

                            <div class="testimonial-card-footer">
                                <div class="testimonial-card-date">
                                    {{ optional($testimonial->created_at)->format('d M Y') ?? 'Terkini' }}
                                </div>
                                <div class="testimonial-card-badge">
                                    <i class="fas fa-check-circle"></i>
                                    Terverifikasi
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @else
        <div class="testimonial-carousel-container">
            <div class="testimonial-empty-state">
                <i class="fas fa-comments testimonial-empty-state-icon"></i>
                <h4 class="testimonial-empty-state-title">Belum Ada Ulasan</h4>
                <p class="testimonial-empty-state-text">Ulasan pelanggan akan ditampilkan di sini setelah ada testimoni masuk.</p>
            </div>
        </div>
    @endif
</div>

<script>
    (function() {
        'use strict';

        function initTestimonialCarousel() {
            const carousel = document.getElementById('testimonialCarousel');
            const track = document.getElementById('testimonialTrack');

            if (!carousel || !track) return;

            // Get original cards (not cloned)
            const originalCards = Array.from(track.querySelectorAll('.testimonial-card:not([data-cloned])'));
            if (originalCards.length === 0) return;

            // Clear existing clones
            track.querySelectorAll('[data-cloned]').forEach(el => el.remove());

            // Clone cards 3 times (total: original + 3 clones = 4 sets)
            // This ensures smooth scrolling when animation loops
            // Even at animation iteration boundary, visual matches original
            for (let cloneSet = 0; cloneSet < 3; cloneSet++) {
                originalCards.forEach(card => {
                    const clone = card.cloneNode(true);
                    clone.setAttribute('data-cloned', 'true');
                    clone.setAttribute('aria-hidden', 'true');
                    track.appendChild(clone);
                });
            }

            // Calculate smooth animation duration based on exact card widths
            const calculateDuration = () => {
                const firstCard = originalCards[0];
                if (!firstCard) return 40;
                
                const cardWidth = firstCard.offsetWidth;
                const gap = 24; // 1.5rem gap from CSS
                const cardWithGap = cardWidth + gap;
                const numCards = originalCards.length;
                const totalContentWidth = cardWithGap * numCards;
                
                // Scroll speed: 60px per second for smooth medium speed
                const pixelsPerSecond = 60;
                const duration = Math.max(30, Math.ceil(totalContentWidth / pixelsPerSecond));
                
                return duration;
            };

            const duration = calculateDuration();

            // Remove any existing animation
            track.style.animation = 'none';
            
            // Force a layout recalculation to reset the animation
            void track.offsetHeight;
            
            // Apply fresh animation - animates through 1 full set of original cards
            // With 4 total sets, this creates seamless infinite loop
            track.classList.add('animating');
            track.style.animation = `slideLeft ${duration}s linear infinite`;

            // Pause on hover only - no other interference
            carousel.addEventListener('mouseenter', () => {
                track.style.animationPlayState = 'paused';
            });

            carousel.addEventListener('mouseleave', () => {
                track.style.animationPlayState = 'running';
            });
        }

        // Initialize on DOMContentLoaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initTestimonialCarousel);
        } else {
            initTestimonialCarousel();
        }

        // Handle window resize with debounce
        let resizeTimeout;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(() => {
                initTestimonialCarousel();
            }, 300);
        });

        // Re-initialize on dynamic content updates
        const mutationObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === 1) {
                        if (node.id === 'testimonialCarousel' || node.querySelector?.('#testimonialCarousel')) {
                            setTimeout(initTestimonialCarousel, 100);
                        }
                    }
                });
            });
        });

        mutationObserver.observe(document.body, { childList: true, subtree: true });
    })();
</script>
@endonce