{{-- resources/views/customer/agency/sections/testimonials.blade.php --}}
<section class="testimonials-section"
         style="background: linear-gradient(135deg, var(--secondary), var(--primary)); color: white; position: relative; overflow: hidden;">
    <div
        style="position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(60px);"></div>
    <div
        style="position: absolute; bottom: -150px; left: -150px; width: 500px; height: 500px; background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(80px);"></div>

    <div class="container" style="position: relative; z-index: 1;">
        @if($section->title || $section->subtitle)
            <div style="text-align: center; margin-bottom: 4rem;">
                @if($section->subtitle)
                    <p style="color: rgba(255,255,255,0.9); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em;">
                        {{ $section->subtitle }}
                    </p>
                @endif

                @if($section->title)
                    <h2 style="font-size: 2.75rem; font-weight: 800; color: white; line-height: 1.2;">
                        {{ $section->title }}
                    </h2>
                @endif
            </div>
        @endif

        @php
            $testimonials = $section->getConfig('testimonials', [
                ['name' => 'Ayşe Yılmaz', 'location' => 'İstanbul', 'rating' => 5, 'comment' => 'Harika bir tatil deneyimi yaşadık. Organizasyon mükemmeldi, rehberimiz çok bilgiliydi. Kesinlikle tekrar tercih edeceğiz.', 'avatar' => null],
                ['name' => 'Mehmet Demir', 'location' => 'Ankara', 'rating' => 5, 'comment' => 'Ailecek gittiğimiz turda herkes çok mutluydu. Fiyat performans açısından harika. Teşekkürler!', 'avatar' => null],
                ['name' => 'Zeynep Kaya', 'location' => 'İzmir', 'rating' => 5, 'comment' => 'Profesyonel hizmet, güler yüzlü ekip. Balayımızı unutulmaz kıldınız. Herkese tavsiye ediyorum.', 'avatar' => null]
            ]);
        @endphp

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem;">
            @foreach($testimonials as $testimonial)
                <div
                    style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 20px; padding: 2.5rem; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s;">
                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
                        <div
                            style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; border: 2px solid rgba(255,255,255,0.3);">
                            {{ strtoupper(substr($testimonial['name'], 0, 1)) }}
                        </div>
                        <div>
                            <h4 style="font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem;">
                                {{ $testimonial['name'] }}
                            </h4>
                            <p style="opacity: 0.9; font-size: 0.875rem;">
                                <i class="fas fa-map-marker-alt"></i> {{ $testimonial['location'] }}
                            </p>
                        </div>
                    </div>

                    <div style="margin-bottom: 1rem;">
                        @for($i = 0; $i < $testimonial['rating']; $i++)
                            <i class="fas fa-star" style="color: #FCD34D;"></i>
                        @endfor
                    </div>

                    <p style="line-height: 1.8; font-size: 1.063rem; opacity: 0.95;">
                        "{{ $testimonial['comment'] }}"
                    </p>

                    <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.2);">
                        <i class="fas fa-quote-right" style="font-size: 2rem; opacity: 0.3;"></i>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<style>
    .testimonials-section > .container > div:last-child > div:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.25);
    }
</style>
