div(class="imageslider relative overflow-hidden rounded-xl shadow-lg max-w-6xl mx-auto")
    div(
        class="slides-container relative h-96 md:h-112 flex transition-transform duration-500 ease-in-out"
        :style="{ transform: 'translateX(-' + currentIndex * 100 + '%)' }"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
    )
        div(
            v-for="(slide, index) in slides"
            :key="index"
            class="slide flex-shrink-0 w-full h-full relative"
        )
            img(:src="slide.image" :alt="slide.title || 'Изображение слайда'" class="w-full h-full object-cover")
            div(class="slide-content absolute inset-0 flex items-end")
                div(class="content-wrapper w-full p-8 bg-gradient-to-t from-black via-black/70 to-transparent text-white")
                    h3(class="text-2xl md:text-3xl font-bold mb-2" v-if="slide.title") {{ slide.title }}
                    p(class="text-lg md:text-xl mb-4 opacity-90" v-if="slide.description") {{ slide.description }}
                    button(
                        v-if="slide.cta"
                        @click="$emit('slide-click', slide)"
                        class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors"
                    ) {{ slide.cta }}

    button(
        @click="prevSlide"
        class="nav-btn absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-gray-800/80 text-gray-800 dark:text-white p-3 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all hover:scale-110"
        aria-label="Предыдущий слайд"
    )
        svg(class="w-5 h-5" 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")
    
    button(
        @click="nextSlide"
        class="nav-btn absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-gray-800/80 text-gray-800 dark:text-white p-3 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all hover:scale-110"
        aria-label="Следующий слайд"
    )
        svg(class="w-5 h-5" 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")

    div(class="indicators absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2")
        div(
            v-for="(slide, index) in slides"
            :key="index"
            class="indicator w-3 h-3 rounded-full border border-white cursor-pointer transition-all"
            :class="currentIndex === index ? 'bg-white scale-110' : 'bg-white/50'"
            @click="goToSlide(index)"
            :aria-label="'Перейти к слайду ' + (index + 1)"
        )

    div(class="progress-bar absolute top-0 left-0 w-full h-1 bg-white/30" v-if="autoplay")
        div(class="progress-fill h-full bg-accent transition-all duration-1000" :style="{ width: progress + '%' }")