{{-- 
    Publishing Block: Carousel/Slider
    Image slider with text overlay and navigation
    
    Block Data Structure:
    {
        "type": "carousel",
        "title": "Featured Content",
        "autoplay": true,
        "autoplay_speed": 5000,
        "show_indicators": true,
        "show_arrows": true,
        "height": "medium",
        "slides": [
            {
                "image": "path/to/image.jpg",
                "title": "Slide Title",
                "description": "Slide description",
                "button": {"label": "Learn More", "url": "/path"},
                "overlay": true,
                "text_position": "center" // left, center, right
            }
        ]
    }
--}}
@php
    $autoplay = $block['autoplay'] ?? true;
    $autoplaySpeed = $block['autoplay_speed'] ?? 5000;
    $showIndicators = $block['show_indicators'] ?? true;
    $showArrows = $block['show_arrows'] ?? true;
    $height = $block['height'] ?? 'medium';
    $slides = $block['slides'] ?? [];
    
    $heightClasses = [
        'small' => 'h-64 md:h-80',
        'medium' => 'h-80 md:h-96',
        'large' => 'h-96 md:h-[500px]',
        'full' => 'h-[500px] md:h-[600px]',
    ];
@endphp

<section class="relative {{ $heightClasses[$height] ?? 'h-96' }} overflow-hidden"
         x-data="{
             current: 0,
             total: {{ count($slides) }},
             autoplay: {{ $autoplay ? 'true' : 'false' }},
             autoplaySpeed: {{ $autoplaySpeed }},
             init() {
                 if (this.autoplay && this.total > 1) {
                     setInterval(() => {
                         this.next();
                     }, this.autoplaySpeed);
                 }
             },
             next() {
                 this.current = (this.current + 1) % this.total;
             },
             prev() {
                 this.current = (this.current - 1 + this.total) % this.total;
             },
             goTo(index) {
                 this.current = index;
             }
         }">
    
    @if(!empty($slides))
        {{-- Slides Container --}}
        <div class="relative w-full h-full">
            @foreach($slides as $index => $slide)
                @php
                    $textPosition = $slide['text_position'] ?? 'center';
                    $positionClasses = [
                        'left' => 'items-start text-left',
                        'center' => 'items-center text-center',
                        'right' => 'items-end text-right',
                    ];
                @endphp
                
                <div class="absolute inset-0 w-full h-full transition-opacity duration-700"
                     :class="current === {{ $index }} ? 'opacity-100 z-10' : 'opacity-0 z-0'">
                    
                    {{-- Background Image --}}
                    <div class="absolute inset-0">
                        @if(!empty($slide['image']))
                            <img src="{{ asset('storage/' . $slide['image']) }}" 
                                 alt="{{ $slide['title'] ?? '' }}"
                                 class="w-full h-full object-cover">
                        @endif
                    </div>
                    
                    {{-- Overlay --}}
                    @if($slide['overlay'] ?? true)
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-black/20"></div>
                    @endif
                    
                    {{-- Content --}}
                    <div class="relative h-full flex {{ $positionClasses[$textPosition] ?? 'items-center text-center' }} px-8 md:px-16">
                        <div class="max-w-5xl {{ $textPosition === 'center' ? 'mx-auto' : '' }}">
                            @if(!empty($slide['title']))
                                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">
                                    {{ $slide['title'] }}
                                </h2>
                            @endif
                            
                            @if(!empty($slide['description']))
                                <p class="text-lg md:text-xl text-white/90 mb-6">
                                    {{ $slide['description'] }}
                                </p>
                            @endif
                            
                            @if(!empty($slide['button']))
                                <a href="{{ $slide['button']['url'] ?? '#' }}" 
                                   class="inline-flex items-center px-8 py-4 bg-white text-green-700 font-semibold rounded-lg hover:bg-green-50 transition shadow-lg">
                                    @if(!empty($slide['button']['icon']))
                                        <i class="fas fa-{{ $slide['button']['icon'] }} mr-2"></i>
                                    @endif
                                    {{ $slide['button']['label'] ?? 'Learn More' }}
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        {{-- Navigation Arrows --}}
        @if($showArrows && count($slides) > 1)
            <button @click="prev()"
                    class="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/90 hover:bg-white rounded-full flex items-center justify-center shadow-lg transition">
                <i class="fas fa-chevron-left text-gray-800"></i>
            </button>
            <button @click="next()"
                    class="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/90 hover:bg-white rounded-full flex items-center justify-center shadow-lg transition">
                <i class="fas fa-chevron-right text-gray-800"></i>
            </button>
        @endif
        
        {{-- Indicators --}}
        @if($showIndicators && count($slides) > 1)
            <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex gap-2">
                @foreach($slides as $index => $slide)
                    <button @click="goTo({{ $index }})"
                            class="w-3 h-3 rounded-full transition-all duration-300"
                            :class="current === {{ $index }} ? 'bg-white w-8' : 'bg-white/50 hover:bg-white/70'">
                    </button>
                @endforeach
            </div>
        @endif
    @endif
</section>
