{{-- 
    Publishing Block: Quote
    Styled quote/testimonial section
    
    Block Data Structure:
    {
        "type": "quote",
        "quote": "The text of the quote...",
        "author": "John Doe",
        "title": "CEO, Company",
        "avatar": "path/to/avatar.jpg",
        "style": "default", // default, boxed, large, centered
        "theme_color": "#10b981",
        "rating": 5
    }
--}}
@php
    $style = $block['style'] ?? 'default';
    $themeColor = $block['theme_color'] ?? '#10b981';
    $rating = $block['rating'] ?? 0;
@endphp

<section class="py-12 lg:py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($style === 'centered')
            <div class="text-center">
                {{-- Quote Icon --}}
                <div class="mb-6">
                    <i class="fas fa-quote-left text-5xl" style="color: {{ $themeColor }}; opacity: 0.3;"></i>
                </div>
                
                {{-- Quote Text --}}
                <blockquote class="text-2xl md:text-3xl lg:text-4xl font-medium text-gray-800 mb-8 leading-relaxed">
                    "{{ $block['quote'] ?? '' }}"
                </blockquote>
                
                {{-- Rating --}}
                @if($rating > 0)
                    <div class="flex justify-center gap-1 mb-4">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="fas fa-star {{ $i <= $rating ? '' : 'text-gray-300' }}" 
                               style="{{ $i <= $rating ? 'color: ' . $themeColor : '' }}"></i>
                        @endfor
                    </div>
                @endif
                
                {{-- Author --}}
                <div class="flex items-center justify-center">
                    @if(!empty($block['avatar']))
                        <img src="{{ asset('storage/' . $block['avatar']) }}" 
                             alt="{{ $block['author'] ?? '' }}"
                             class="w-16 h-16 rounded-full object-cover mr-4">
                    @endif
                    <div class="text-left">
                        @if(!empty($block['author']))
                            <div class="font-semibold text-gray-800">{{ $block['author'] }}</div>
                        @endif
                        @if(!empty($block['title']))
                            <div class="text-gray-500 text-sm">{{ $block['title'] }}</div>
                        @endif
                    </div>
                </div>
            </div>
        @elseif($style === 'boxed')
            <div class="bg-white rounded-2xl shadow-lg p-8 md:p-12 relative overflow-hidden">
                {{-- Decorative Element --}}
                <div class="absolute top-0 right-0 w-32 h-32 rounded-full -translate-y-1/2 translate-x-1/2" 
                     style="background-color: {{ $themeColor }}20;"></div>
                
                <div class="relative">
                    {{-- Quote Icon --}}
                    <i class="fas fa-quote-left text-4xl mb-4" style="color: {{ $themeColor }};"></i>
                    
                    {{-- Quote Text --}}
                    <blockquote class="text-xl md:text-2xl text-gray-700 mb-6 leading-relaxed">
                        {{ $block['quote'] ?? '' }}
                    </blockquote>
                    
                    {{-- Rating --}}
                    @if($rating > 0)
                        <div class="flex gap-1 mb-4">
                            @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star {{ $i <= $rating ? '' : 'text-gray-300' }}" 
                                   style="{{ $i <= $rating ? 'color: ' . $themeColor : '' }}"></i>
                            @endfor
                        </div>
                    @endif
                    
                    {{-- Author --}}
                    <div class="flex items-center">
                        @if(!empty($block['avatar']))
                            <img src="{{ asset('storage/' . $block['avatar']) }}" 
                                 alt="{{ $block['author'] ?? '' }}"
                                 class="w-12 h-12 rounded-full object-cover mr-4">
                        @else
                            <div class="w-12 h-12 rounded-full flex items-center justify-center mr-4" 
                                 style="background-color: {{ $themeColor }}20;">
                                <i class="fas fa-user" style="color: {{ $themeColor }};"></i>
                            </div>
                        @endif
                        <div>
                            @if(!empty($block['author']))
                                <div class="font-semibold text-gray-800">{{ $block['author'] }}</div>
                            @endif
                            @if(!empty($block['title']))
                                <div class="text-gray-500 text-sm">{{ $block['title'] }}</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @elseif($style === 'large')
            <div class="relative py-8">
                {{-- Background Quote Icon --}}
                <i class="fas fa-quote-left absolute -top-4 -left-4 text-[120px] opacity-10" style="color: {{ $themeColor }};"></i>
                
                <div class="relative">
                    <blockquote class="text-2xl md:text-3xl lg:text-4xl font-light text-gray-700 text-center leading-relaxed mb-8">
                        "{{ $block['quote'] ?? '' }}"
                    </blockquote>
                    
                    <div class="flex items-center justify-center">
                        <div class="h-px w-12 mr-4" style="background-color: {{ $themeColor }};"></div>
                        <div class="text-center">
                            @if(!empty($block['author']))
                                <span class="font-semibold text-gray-800">{{ $block['author'] }}</span>
                            @endif
                            @if(!empty($block['title']))
                                <span class="text-gray-500 mx-2">•</span>
                                <span class="text-gray-500">{{ $block['title'] }}</span>
                            @endif
                        </div>
                        <div class="h-px w-12 ml-4" style="background-color: {{ $themeColor }};"></div>
                    </div>
                </div>
            </div>
        @else
            {{-- Default Style --}}
            <div class="border-l-4 pl-8 py-4" style="border-color: {{ $themeColor }};">
                <blockquote class="text-xl md:text-2xl text-gray-700 italic mb-6">
                    "{{ $block['quote'] ?? '' }}"
                </blockquote>
                
                @if($rating > 0)
                    <div class="flex gap-1 mb-4">
                        @for($i = 1; $i <= 5; $i++)
                            <i class="fas fa-star {{ $i <= $rating ? '' : 'text-gray-300' }}" 
                               style="{{ $i <= $rating ? 'color: ' . $themeColor : '' }}"></i>
                        @endfor
                    </div>
                @endif
                
                <footer class="flex items-center">
                    @if(!empty($block['avatar']))
                        <img src="{{ asset('storage/' . $block['avatar']) }}" 
                             alt="{{ $block['author'] ?? '' }}"
                             class="w-10 h-10 rounded-full object-cover mr-3">
                    @endif
                    <div>
                        @if(!empty($block['author']))
                            <cite class="font-semibold text-gray-800 not-italic">{{ $block['author'] }}</cite>
                        @endif
                        @if(!empty($block['title']))
                            <span class="text-gray-500 text-sm ml-2">— {{ $block['title'] }}</span>
                        @endif
                    </div>
                </footer>
            </div>
        @endif
    </div>
</section>
