@props(['slides' => null])

@php
// Build slides from /public/assets/img/slider; fallback to curated defaults
$defaultSlides = [
    [
        'image' => 'slide1.jpg',
        'author' => 'ARUKU R&B',
        'title' => 'REVOLUTIONIZE',
        'topic' => 'FOOTBALL GAMING',
        'description' => 'Join thousands of managers building championship teams, trading NFT players, and earning real rewards in the most advanced football gaming ecosystem ever created.',
        'primaryBtn' => 'Play To Earn',
        'secondaryBtn' => 'Explore Game',
        'primaryRoute' => 'contact',
        'secondaryRoute' => 'contact'
    ],
    [
        'image' => 'slide2.jpg',
        'author' => 'ARUKU R&B',
        'title' => 'OWN YOUR',
        'topic' => 'DIGITAL ASSETS',
        'description' => 'Experience true ownership with blockchain-powered NFT players, stadiums, and achievements. Trade, sell, or transfer your digital assets with complete control.',
        'primaryBtn' => 'Join Waitlist',
        'secondaryBtn' => 'View Marketplace',
        'primaryRoute' => 'contact',
        'secondaryRoute' => 'contact'
    ],
    [
        'image' => 'slide3.jpg',
        'author' => 'ARUKU R&B',
        'title' => 'AI-POWERED',
        'topic' => 'CHAMPIONSHIPS',
        'description' => 'Compete in intelligent tournaments with advanced AI opponents, dynamic match experiences, and real cryptocurrency rewards in our gaming ecosystem.',
        'primaryBtn' => 'Join Our Discord',
        'secondaryBtn' => 'Learn More',
        'primaryRoute' => 'contact',
        'secondaryRoute' => 'contact'
    ],
    [
        'image' => 'slide4.jpg',
        'author' => 'ARUKU R&B',
        'title' => 'GLOBAL',
        'topic' => 'COMMUNITY',
        'description' => 'Connect with football managers worldwide in our thriving blockchain gaming community. Share strategies, trade assets, and compete for glory.',
        'primaryBtn' => 'Join Community',
        'secondaryBtn' => 'Explore Features',
        'primaryRoute' => 'contact',
        'secondaryRoute' => 'contact'
    ]
];

$dir = public_path('assets/img/slider');
$extensions = ['jpg','jpeg','png','webp','gif','avif'];
$found = [];
if (is_dir($dir)) {
    foreach (scandir($dir) as $file) {
        if ($file === '.' || $file === '..') continue;
        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
        if (in_array($ext, $extensions, true)) $found[] = $file;
    }
    natsort($found);
    $found = array_values($found);
}

$mapped = [];
if (!empty($found)) {
    foreach ($found as $i => $file) {
        $meta = $defaultSlides[$i % count($defaultSlides)];
        $meta['image'] = $file; // use actual filename in slider dir
        $mapped[] = $meta;
    }
}

$carouselSlides = $slides ?? (!empty($mapped) ? $mapped : $defaultSlides);
@endphp

<style>
/* Carousel Styles - Exact replication */
.hero-carousel {
    height: 700px;
    width: 100vw;
    overflow: hidden;
    position: relative;
    background-color: #111827;
}

.hero-carousel .list .item {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;
}

.hero-carousel .list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-carousel .list .item .content {
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.hero-carousel .list .item .author {
    font-weight: bold;
    letter-spacing: 10px;
    font-family: 'Exo', sans-serif;
}

.hero-carousel .list .item .title,
.hero-carousel .list .item .topic {
    font-size: 4em;
    font-weight: bold;
    line-height: 1.3em;
    font-family: 'Exo', sans-serif;
}

.hero-carousel .list .item .topic {
    background: linear-gradient(to right, #1976D2, #00BCD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-carousel .list .item .buttons {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    grid-template-rows: 60px;
    gap: 5px;
    margin-top: 20px;
    text-transform: uppercase;
}

/* Thumbnail styles */
.thumbnail {
    position: absolute;
    bottom: 50px;
    right: 40px;
    width: max-content;
    z-index: 100;
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.thumbnail .item {
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.thumbnail .item:hover {
    transform: scale(1.05);
}

.thumbnail .item:active {
    transform: scale(0.95);
}

.thumbnail .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.thumbnail .item .content {
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.thumbnail .item .content .title {
    font-weight: 500;
    font-family: 'Exo', sans-serif;
}

.thumbnail .item .content .description {
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
}

/* Arrows */
.arrows {
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrows button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(238, 238, 238, 0.3);
    border: none;
    color: #fff;
    font-family: monospace;
    font-weight: bold;
    transition: 0.5s;
    cursor: pointer;
}

.arrows button:hover {
    background-color: #fff;
    color: #000;
}

.arrows button:active {
    transform: scale(0.9);
}

/* Animation */
.hero-carousel .list .item:nth-child(1) {
    z-index: 1;
}

.hero-carousel .list .item:nth-child(1) .content .author,
.hero-carousel .list .item:nth-child(1) .content .title,
.hero-carousel .list .item:nth-child(1) .content .topic,
.hero-carousel .list .item:nth-child(1) .content .des,
.hero-carousel .list .item:nth-child(1) .content .buttons {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent 0.5s 1s linear 1 forwards;
}

@keyframes showContent {
    to {
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.hero-carousel .list .item:nth-child(1) .content .title {
    animation-delay: 1.2s !important;
}

.hero-carousel .list .item:nth-child(1) .content .topic {
    animation-delay: 1.4s !important;
}

.hero-carousel .list .item:nth-child(1) .content .des {
    animation-delay: 1.6s !important;
}

.hero-carousel .list .item:nth-child(1) .content .buttons {
    animation-delay: 1.8s !important;
}

/* Next animation */
.hero-carousel.next .list .item:nth-child(1) img {
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    border-radius: 30px;
    animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
    to {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.hero-carousel.next .thumbnail .item:nth-last-child(1) {
    overflow: hidden;
    animation: showThumbnail 0.5s linear 1 forwards;
}

@keyframes showThumbnail {
    from {
        width: 0;
        opacity: 0;
    }
}

.hero-carousel.next .thumbnail {
    animation: effectNext 0.5s linear 1 forwards;
}

@keyframes effectNext {
    from {
        transform: translateX(150px);
    }
}

/* Time bar */
.hero-carousel .time {
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, #1976D2, #00BCD4);
    left: 0;
    top: 0;
}

.hero-carousel.next .time,
.hero-carousel.prev .time {
    animation: runningTime 3s linear 1 forwards;
}

@keyframes runningTime {
    from { width: 100% }
    to { width: 0 }
}

/* Prev animation */
.hero-carousel.prev .list .item:nth-child(2) {
    z-index: 2;
}

.hero-carousel.prev .list .item:nth-child(2) img {
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}

@keyframes outFrame {
    to {
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 50%;
        border-radius: 20px;
    }
}

.hero-carousel.prev .thumbnail .item:nth-child(1) {
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail 0.5s linear 1 forwards;
}

.hero-carousel.next .arrows button,
.hero-carousel.prev .arrows button {
    pointer-events: none;
}

.hero-carousel.prev .list .item:nth-child(2) .content .author,
.hero-carousel.prev .list .item:nth-child(2) .content .title,
.hero-carousel.prev .list .item:nth-child(2) .content .topic,
.hero-carousel.prev .list .item:nth-child(2) .content .des,
.hero-carousel.prev .list .item:nth-child(2) .content .buttons {
    animation: contentOut 1.5s linear 1 forwards !important;
}

@keyframes contentOut {
    to {
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}

/* Responsive */
@media screen and (max-width: 678px) {
    .hero-carousel .list .item .content {
        padding-right: 0;
    }
    .hero-carousel .list .item .content .title {
        font-size: 30px;
    }
}
 </style>

 <section class="hero-carousel"
         x-data="{
             currentSlide: 0,
             slides: @js($carouselSlides),
             timeRunning: 3000,
             timeAutoNext: 7000,
             runTimeOut: null,
             runNextAuto: null,
             init() {
                 this.startAutoplay();
                 this.$nextTick(() => {
                     this.moveFirstThumbnailToEnd();
                 });
             },
             startAutoplay() {
                 this.runNextAuto = setTimeout(() => {
                     this.showSlider('next');
                 }, this.timeAutoNext);
             },
             showSlider(type) {
                 const carousel = this.$el;
                 const sliderDom = carousel.querySelector('.list');
                 const thumbnailDom = carousel.querySelector('.thumbnail');
                 const sliderItems = sliderDom.querySelectorAll('.item');
                 const thumbnailItems = thumbnailDom.querySelectorAll('.item');

                 if (type === 'next') {
                     sliderDom.appendChild(sliderItems[0]);
                     thumbnailDom.appendChild(thumbnailItems[0]);
                     carousel.classList.add('next');
                     this.currentSlide = (this.currentSlide + 1) % this.slides.length;
                 } else {
                     sliderDom.prepend(sliderItems[sliderItems.length - 1]);
                     thumbnailDom.prepend(thumbnailItems[thumbnailItems.length - 1]);
                     carousel.classList.add('prev');
                     this.currentSlide = this.currentSlide === 0 ? this.slides.length - 1 : this.currentSlide - 1;
                 }

                 clearTimeout(this.runTimeOut);
                 this.runTimeOut = setTimeout(() => {
                     carousel.classList.remove('next');
                     carousel.classList.remove('prev');
                 }, this.timeRunning);

                 clearTimeout(this.runNextAuto);
                 this.runNextAuto = setTimeout(() => {
                     this.showSlider('next');
                 }, this.timeAutoNext);
             },
             goToSlide(targetIndex) {
                 const currentIndex = this.currentSlide;
                 if (targetIndex === currentIndex) return;

                 // Calculate the shortest path (forward or backward)
                 const forwardSteps = (targetIndex - currentIndex + this.slides.length) % this.slides.length;
                 const backwardSteps = (currentIndex - targetIndex + this.slides.length) % this.slides.length;

                 const useForward = forwardSteps <= backwardSteps;
                 const steps = useForward ? forwardSteps : backwardSteps;
                 const direction = useForward ? 'next' : 'prev';

                 // Execute the shortest path
                 for (let i = 0; i < steps; i++) {
                     setTimeout(() => {
                         this.showSlider(direction);
                     }, i * 150); // Slightly slower for better visual feedback
                 }
             },
             moveFirstThumbnailToEnd() {
                 const thumbnailDom = this.$el.querySelector('.thumbnail');
                 const thumbnailItems = thumbnailDom.querySelectorAll('.item');
                 if (thumbnailItems.length > 0) {
                     thumbnailDom.appendChild(thumbnailItems[0]);
                 }
             }
         }"
         @mouseenter="clearTimeout(runNextAuto)"
         @mouseleave="startAutoplay()">

    <!-- Main slides -->
    <div class="list">
        @foreach($carouselSlides as $slide)
        <div class="item">
            <img src="{{ asset('assets/img/slider/' . $slide['image']) }}" alt="{{ $slide['title'] }}">
            <div class="content">
                <div class="author">{{ $slide['author'] }}</div>
                <div class="title">{{ $slide['title'] }}</div>
                <div class="topic">{{ $slide['topic'] }}</div>
                <div class="des">{{ $slide['description'] }}</div>
                <div class="buttons">
                    <button onclick="window.location.href='{{ route($slide['primaryRoute']) }}'"
                            class="inline-flex items-center justify-center py-3 px-4 bg-glass-blue-primary text-white uppercase font-exo font-bold text-center rounded-lg shadow-lg shadow-blue-500/30 hover:bg-blue-700 hover:text-white hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        {{ $slide['primaryBtn'] }}
                    </button>
                    <button onclick="window.location.href='{{ route($slide['secondaryRoute']) }}'"
                            class="inline-flex items-center justify-center py-3 px-4 bg-white text-gray-700 uppercase font-exo font-bold text-center rounded-lg shadow-lg hover:bg-blue-50 hover:text-gray-700 hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                        {{ $slide['secondaryBtn'] }}
                    </button>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Thumbnails -->
    <div class="thumbnail">
        @foreach($carouselSlides as $index => $slide)
        <div class="item" @click="goToSlide({{ $index }})" style="cursor: pointer; transition: transform 0.2s ease;">
            <img src="{{ asset('assets/img/slider/' . $slide['image']) }}" alt="{{ $slide['title'] }}">
            <div class="content">
                <div class="title">{{ $slide['title'] }}</div>
                <div class="description">{{ $slide['topic'] }}</div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Navigation arrows -->
    <div class="arrows">
        <button @click="showSlider('prev')">&lt;</button>
        <button @click="showSlider('next')">&gt;</button>
    </div>

    <!-- Progress bar -->
    <div class="time"></div>
</section>