@props(['items', 'title' => 'Destacados'])

@php
    $id = Str::random(8);
@endphp

<div class="relative w-full overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-slate-50 dark:bg-panel-bg shadow-xl group carousel-container" id="carousel-{{ $id }}">
    
    <!-- Título Flotante (Opcional) -->
    <div class="absolute top-4 left-6 z-10 bg-neon-lime/50 dark:bg-black/50 backdrop-blur-sm px-3 py-1 rounded border border-black/30 dark:border-neon-lime/30">
        <span class="text-xs font-bold text-black dark:text-neon-lime uppercase tracking-widest">{{ $title }}</span>
    </div>

    <!-- Contenedor de Slides (Track) -->
    <div class="flex transition-transform duration-500 ease-in-out h-[400px] carousel-track">
        @forelse($items as $item)
            <div class="w-full flex-shrink-0 flex flex-col md:flex-row h-full relative">
                
                <!-- Imagen / Visual (Izquierda o Fondo) -->
                <div class="w-full md:w-1/2 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center relative overflow-hidden">
                    <!-- Decoración de fondo -->
                    <div class="absolute inset-0 bg-grid-pattern opacity-10"></div>
                    
                    <!-- Icono Gigante (Placeholder de Bici) -->
                    <div class="text-neutral-300 dark:text-neutral-700 transform group-hover:scale-110 transition-transform duration-700">
                        @if($item->image_path)
                            <img src="{{ asset('storage/' . $item->image_path) }}" alt="{{ $item->name }}" class="w-full h-full object-cover">
                        @else
                            <!-- Placeholder si no tiene foto -->
                            <div class="w-full h-full flex items-center justify-center bg-neutral-200 dark:bg-neutral-800">
                                <svg class="w-48 h-48" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path></svg>
                            </div>
                        @endif
                    </div>

                    <!-- Precio Flotante -->
                    <div class="absolute bottom-4 left-4 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-black px-4 py-2 rounded-lg text-xl shadow-lg shadow-gray-800/10 dark:shadow-neon-lime/20">
                        ${{ number_format($item->price, 0, ',', '.') }}
                    </div>
                </div>

                <!-- Info (Derecha) -->
                <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center bg-gradient-to-br from-gray-200 dark:from-panel-bg to-neutral-100 dark:to-neutral-900">
                    <h3 class="text-sm font-bold text-gray-600 dark:text-gray-400 uppercase tracking-widest mb-2">{{ $item->sku }}</h3>
                    <h2 class="text-3xl md:text-4xl font-black text-black dark:text-white italic mb-4 leading-tight">
                        {{ $item->name }}
                    </h2>
                    <p class="text-gray-600 dark:text-gray-400 text-sm md:text-base mb-8 line-clamp-3">
                        {{ $item->description ?? 'Una bicicleta diseñada para el máximo rendimiento en todo terreno. Consultar especificaciones técnicas en el catálogo.' }}
                    </p>
                    
                    <div class="flex gap-4">
                        <a href="{{ route('catalogo.show', $item) }}" class="px-6 py-3 bg-black dark:bg-white text-neutral-100 dark:text-neutral-900 font-bold uppercase tracking-wider rounded hover:bg-neutral-800 hover:dark:bg-gray-200 transition-colors">
                            Ver Detalles
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <!-- Slide de Fallback por si no hay datos -->
            <div class="w-full flex-shrink-0 flex items-center justify-center h-full bg-neutral-200 dark:bg-neutral-800 text-gray-500">
                <p>No hay productos destacados disponibles.</p>
            </div>
        @endforelse
    </div>

    <!-- Controles (Flechas) -->
    <button class="prevBtn absolute top-1/2 left-4 -translate-y-1/2 bg-black/30 hover:bg-neon-lime hover:text-neutral-900 text-white p-3 rounded-full backdrop-blur-sm transition-all border border-white/10 z-20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    
    <button class="nextBtn absolute top-1/2 right-4 -translate-y-1/2 bg-black/30 hover:bg-neon-lime hover:text-neutral-900 text-white p-3 rounded-full backdrop-blur-sm transition-all border border-white/10 z-20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </button>

    <!-- Indicadores (Puntos) -->
    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-20">
        @foreach($items as $index => $item)
            <button class="carousel-dot w-3 h-3 rounded-full bg-black/20 dark:bg-white/20 hover:bg-lime-500 hover:dark:bg-neon-lime transition-all" data-index="{{ $index }}"></button>
        @endforeach
    </div>

</div>

<script type="module">
    $(document).ready(function() {
        const $container = $('#carousel-{{ $id }}');
        const $track = $container.find('.carousel-track');
        const $slides = $track.children();
        const slideCount = $slides.length;
        let currentIndex = 0;
        let autoPlayInterval;

        function updateCarousel() {
            const translateX = -(currentIndex * 100);
            $track.css('transform', `translateX(${translateX}%)`);
            
            // Actualizar puntos
            $container.find('.carousel-dot').removeClass('bg-lime-500 dark:bg-neon-lime scale-125').addClass('bg-black/20 dark:bg-white/20');
            $container.find(`.carousel-dot[data-index="${currentIndex}"]`).addClass('bg-lime-500 dark:bg-neon-lime scale-125').removeClass('bg-black/20 dark:bg-white/20');
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % slideCount;
            updateCarousel();
        }

        function prevSlide() {
            currentIndex = (currentIndex - 1 + slideCount) % slideCount;
            updateCarousel();
        }

        // Event Listeners
        $container.find('.nextBtn').click(function() {
            nextSlide();
            resetAutoPlay();
        });

        $container.find('.prevBtn').click(function() {
            prevSlide();
            resetAutoPlay();
        });

        $container.find('.carousel-dot').click(function() {
            currentIndex = $(this).data('index');
            updateCarousel();
            resetAutoPlay();
        });

        // AutoPlay (cada 5 segundos)
        function startAutoPlay() {
            autoPlayInterval = setInterval(nextSlide, 5000);
        }

        function resetAutoPlay() {
            clearInterval(autoPlayInterval);
            startAutoPlay();
        }

        // Iniciar
        if(slideCount > 0) {
            updateCarousel();
            startAutoPlay();
        }
    });
</script>