{{-- Testimonial Slider Component --}}
@php
    $testimonials = $component['content']['testimonials'] ?? [];
    $sliderId = 'testimonial-' . uniqid();
@endphp

<div id="{{ $sliderId }}" class="carousel slide testimonial-slider" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach($testimonials as $index => $testimonial)
            <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                <div class="testimonial-content text-center px-5">
                    @if(!empty($testimonial['image']))
                        <img src="{{ $testimonial['image'] }}" alt="{{ $testimonial['author'] ?? '' }}"
                             class="testimonial-avatar rounded-circle mb-4">
                    @endif

                    @if(!empty($testimonial['quote']))
                        <blockquote class="testimonial-quote mb-4" style="font-family: var(--body-font);">
                            <i class="bi bi-quote" style="font-size: 48px; color: var(--primary-color); opacity: 0.2;"></i>
                            <p class="fs-5 fst-italic">{{ $testimonial['quote'] }}</p>
                        </blockquote>
                    @endif

                    @if(!empty($testimonial['author']))
                        <div class="testimonial-author" style="font-family: var(--heading-font);">
                            <strong>{{ $testimonial['author'] }}</strong>
                            @if(!empty($testimonial['position']))
                                <div class="text-muted small">{{ $testimonial['position'] }}</div>
                            @endif
                            @if(!empty($testimonial['company']))
                                <div class="text-muted small">{{ $testimonial['company'] }}</div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    @if(count($testimonials) > 1)
        <button class="carousel-control-prev" type="button" data-bs-target="#{{ $sliderId }}" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#{{ $sliderId }}" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

        <div class="carousel-indicators">
            @foreach($testimonials as $index => $testimonial)
                <button type="button" data-bs-target="#{{ $sliderId }}" data-bs-slide-to="{{ $index }}"
                        class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}"
                        aria-label="Slide {{ $index + 1 }}"></button>
            @endforeach
        </div>
    @endif
</div>

<style>
    .testimonial-slider {
        padding: 3rem 0;
    }

    .testimonial-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .testimonial-avatar {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border: 4px solid var(--primary-color);
    }

    .testimonial-quote {
        position: relative;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 50px;
        height: 50px;
        background-color: var(--primary-color);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.8;
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        opacity: 1;
    }

    .carousel-indicators button {
        background-color: var(--primary-color);
    }
</style>