@props(['banners'])

@if($banners && count($banners) > 0)
<section class="relative w-full overflow-hidden bg-gray-100 select-none group" x-data="bannerSlider()">
    <!-- Contenedor de slides -->
    <div class="relative w-full h-[750px]"
         x-ref="container"
         @mousedown="startDrag($event)"
         @mousemove="drag($event)"
         @mouseup="endDrag()"
         @mouseleave="endDrag()"
         @touchstart="startDrag($event)"
         @touchmove="drag($event)"
         @touchend="endDrag()"
         :class="isDragging ? 'cursor-grabbing' : 'cursor-grab'">
        @foreach($banners as $index => $banner)
        <div 
            x-show="currentSlide === {{ $index }}"
            x-transition:enter="transition ease-out duration-700"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-700"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="absolute inset-0 w-full h-full"
            @if($index === 0) style="" @else style="display: none;" @endif
        >
            <!-- Imagen de fondo -->
            <div class="absolute inset-0">
                <img 
                    src="{{ $banner->imagen_url }}" 
                    alt="Banner {{ $banner->orden }}"
                    class="w-full h-full object-cover"
                >
            </div>
            
            <!-- Enlace completo si existe boton_link pero NO hay boton_texto -->
            @if($banner->boton_link && !$banner->boton_texto)
            <a href="{{ $banner->boton_link }}" class="absolute inset-0 z-20 cursor-pointer" aria-label="Ver más sobre {{ $banner->titulo ?? 'este banner' }}"></a>
            @endif
            
            <!-- Contenido sobre la imagen -->
            @if($banner->titulo || $banner->texto || $banner->boton_texto)
            <div class="absolute inset-0 flex items-center px-4 sm:px-8 md:px-12 lg:px-16 pointer-events-none">
                <div class="w-full flex
                    @if($banner->posicion_texto === 'izquierda') 
                        justify-start
                    @elseif($banner->posicion_texto === 'derecha') 
                        justify-end
                    @else 
                        justify-center
                    @endif
                ">
                    <div 
                        class="w-full sm:w-5/6 md:w-2/3 lg:w-1/2 xl:w-5/12 2xl:w-1/3 text-white {{ $banner->posicion_texto === 'centro' ? 'text-center' : '' }}"
                        x-data="{ visible: false }"
                        x-show="visible"
                        x-init="setTimeout(() => visible = currentSlide === {{ $index }}, 300)"
                        x-effect="visible = currentSlide === {{ $index }}"
                        x-transition:enter="transition ease-out duration-700 delay-300"
                        x-transition:enter-start="opacity-0 transform translate-y-8"
                        x-transition:enter-end="opacity-100 transform translate-y-0"
                        x-transition:leave="transition ease-in duration-300"
                        x-transition:leave-start="opacity-100"
                        x-transition:leave-end="opacity-0"
                    >
                        @if($banner->titulo)
                            <h2 class="font-black mb-4 leading-tight {{ $banner->titulo_size }}"
                                style="color: {{ $banner->titulo_color }};">
                                {{ $banner->titulo }}
                            </h2>
                        @endif
                        
                        @if($banner->texto)
                            <p class="mb-6 leading-relaxed {{ $banner->texto_size }}"
                               style="color: {{ $banner->texto_color }};">
                                {{ $banner->texto }}
                            </p>
                        @endif
                        
                        @if($banner->boton_texto && $banner->boton_link)
                            <a href="{{ $banner->boton_link }}" 
                               class="inline-block px-8 py-3 rounded-lg font-semibold text-white shadow-2xl pointer-events-auto transition-transform hover:scale-105"
                               style="background-color: {{ $banner->boton_color }};">
                                {{ $banner->boton_texto }}
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>
        @endforeach
    </div>


    <!-- Flechas de navegación -->
    @if(count($banners) > 1)
    <button 
        @click="prevSlide()"
        class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/20 hover:bg-black/40 text-white rounded-full p-2 transition-all duration-300 focus:outline-none opacity-0 group-hover:opacity-100"
        aria-label="Anterior"
    >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
        </svg>
    </button>

    <button 
        @click="nextSlide()"
        class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/20 hover:bg-black/40 text-white rounded-full p-2 transition-all duration-300 focus:outline-none opacity-0 group-hover:opacity-100"
        aria-label="Siguiente"
    >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
    </button>

    <!-- Dots de navegación -->
    <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex gap-2">
        @foreach($banners as $index => $banner)
        <button 
            @click="goToSlide({{ $index }})"
            class="w-3 h-3 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white"
            :class="currentSlide === {{ $index }} ? 'bg-white w-8' : 'bg-white/50 hover:bg-white/75'"
            aria-label="Ir al banner {{ $index + 1 }}"
        ></button>
        @endforeach
    </div>
    @endif
</section>

<script>
function bannerSlider() {
    return {
        currentSlide: 0,
        totalSlides: {{ count($banners) }},
        autoplayInterval: null,
        isDragging: false,
        startX: 0,
        startY: 0,
        currentX: 0,
        currentY: 0,
        dragThreshold: 50,
        isHorizontalDrag: false,
        
        init() {
            this.startAutoplay();
            
            // Pausar autoplay al pasar el mouse
            this.$el.addEventListener('mouseenter', () => this.stopAutoplay());
            this.$el.addEventListener('mouseleave', () => this.startAutoplay());
        },
        
        startDrag(e) {
            this.isDragging = true;
            this.isHorizontalDrag = false;
            if (e.type.includes('mouse')) {
                this.startX = e.pageX;
                this.startY = e.pageY;
            } else {
                this.startX = e.touches[0].pageX;
                this.startY = e.touches[0].pageY;
            }
            this.currentX = this.startX;
            this.currentY = this.startY;
            this.stopAutoplay();
        },
        
        drag(e) {
            if (!this.isDragging) return;
            
            if (e.type.includes('mouse')) {
                this.currentX = e.pageX;
                this.currentY = e.pageY;
            } else {
                this.currentX = e.touches[0].pageX;
                this.currentY = e.touches[0].pageY;
            }
            
            // Determinar si es arrastre horizontal o vertical
            const diffX = Math.abs(this.currentX - this.startX);
            const diffY = Math.abs(this.currentY - this.startY);
            
            // Si el movimiento horizontal es mayor, es arrastre de banner
            if (diffX > 10 || diffY > 10) {
                if (diffX > diffY * 1.5) {
                    // Es arrastre horizontal
                    this.isHorizontalDrag = true;
                    e.preventDefault();
                } else {
                    // Es scroll vertical, cancelar el drag
                    this.isDragging = false;
                    this.startAutoplay();
                }
            }
        },
        
        endDrag() {
            if (!this.isDragging) return;
            
            // Solo cambiar slide si fue arrastre horizontal
            if (this.isHorizontalDrag) {
                const diff = this.startX - this.currentX;
                
                // Si el arrastre superó el umbral, cambiar de slide
                if (Math.abs(diff) > this.dragThreshold) {
                    if (diff > 0) {
                        // Arrastró hacia la izquierda -> siguiente
                        this.nextSlide();
                    } else {
                        // Arrastró hacia la derecha -> anterior
                        this.prevSlide();
                    }
                    this.resetAutoplay();
                } else {
                    // No superó el umbral, reanudar autoplay
                    this.startAutoplay();
                }
            }
            
            this.isDragging = false;
            this.isHorizontalDrag = false;
            this.startX = 0;
            this.startY = 0;
            this.currentX = 0;
            this.currentY = 0;
        },
        
        nextSlide() {
            this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
        },
        
        prevSlide() {
            this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
            this.resetAutoplay();
        },
        
        goToSlide(index) {
            this.currentSlide = index;
            this.resetAutoplay();
        },
        
        startAutoplay() {
            if (this.autoplayInterval) {
                clearInterval(this.autoplayInterval);
            }
            this.autoplayInterval = setInterval(() => {
                this.nextSlide();
            }, 6000);
        },
        
        stopAutoplay() {
            if (this.autoplayInterval) {
                clearInterval(this.autoplayInterval);
                this.autoplayInterval = null;
            }
        },
        
        resetAutoplay() {
            this.stopAutoplay();
            this.startAutoplay();
        }
    }
}
</script>

<style>
    .banner-content {
        animation: fadeInUp 0.5s ease-out;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endif