<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-primary-900 via-primary-800 to-primary-900">
    <!-- Animated Background Particles -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute w-72 h-72 bg-primary-500/10 rounded-full -top-20 -left-20 animate-float"></div>
        <div class="absolute w-96 h-96 bg-accent-500/5 rounded-full -bottom-32 -right-32" style="animation: float 5s ease-in-out infinite;"></div>
        <div class="absolute w-48 h-48 bg-primary-400/10 rounded-full top-1/3 right-1/4" style="animation: float 4s ease-in-out infinite; animation-delay: 1s;"></div>
        <div class="absolute w-24 h-24 bg-accent-500/10 rounded-full bottom-1/4 left-1/3" style="animation: float 3s ease-in-out infinite; animation-delay: 2s;"></div>
        <!-- Grid pattern overlay -->
        <div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 40px 40px;"></div>
    </div>

    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-0">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
            <!-- Left: Hero Cards with Animation -->
            <div class="order-2 lg:order-1" x-data="{ activeCard: 0 }">
                <!-- Hero Heading -->
                <div class="mb-8">
                    <div class="inline-flex items-center space-x-2 bg-primary-500/20 text-primary-200 px-4 py-1.5 rounded-full text-sm font-medium mb-4 animate-fade-in-up">
                        <i class="fas fa-shield-alt text-xs"></i>
                        <span>Accredited &amp; Recognized</span>
                    </div>
                    <h1 class="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-bold text-white leading-tight mb-4 font-display animate-fade-in-up" style="animation-delay: 0.2s;">
                        Professional <span class="gradient-text">Mediation</span> Training
                    </h1>
                    <p class="text-primary-200 text-lg max-w-lg animate-fade-in-up" style="animation-delay: 0.4s;">
                        Join Kenya's leading mediation training centre. Accredited by TVET, recognized by MAC, and internationally affiliated.
                    </p>
                </div>

                <!-- Hero Cards -->
                <div class="space-y-4">
                    <!-- Card 1: TVET Accreditation -->
                    <div class="hero-card group cursor-pointer" @click="activeCard = 0" :class="activeCard === 0 ? 'ring-2 ring-primary-400 shadow-lg shadow-primary-500/20' : ''">
                        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 hover:bg-white/15 transition-all duration-300 hover:-translate-y-1">
                            <div class="flex items-start space-x-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-primary-400 to-primary-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                                    <i class="fas fa-award text-white text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-white font-semibold text-base mb-1">Accredited by TVET</h3>
                                    <p class="text-primary-200 text-sm leading-relaxed">Government-approved courses ensuring practical skills for your career.</p>
                                    <a href="https://www.tveta.go.ke/institution-details/?details=TVETA/PRIVATE/TVC/0064/2023" target="_blank" class="inline-flex items-center space-x-1 text-primary-300 hover:text-white text-xs mt-2 transition-colors duration-200">
                                        <span>View Accreditation</span>
                                        <i class="fas fa-external-link-alt text-xs"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 2: MAC Recognition -->
                    <div class="hero-card group cursor-pointer" @click="activeCard = 1" :class="activeCard === 1 ? 'ring-2 ring-primary-400 shadow-lg shadow-primary-500/20' : ''">
                        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 hover:bg-white/15 transition-all duration-300 hover:-translate-y-1">
                            <div class="flex items-start space-x-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-accent-400 to-accent-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                                    <i class="fas fa-balance-scale text-white text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-white font-semibold text-base mb-1">Recognized by MAC</h3>
                                    <p class="text-primary-200 text-sm leading-relaxed">Accredited by Judiciary of Kenya's Mediation Accreditation Committee.</p>
                                    <a href="https://judiciary.go.ke/list-of-accredited-mediators/" target="_blank" class="inline-flex items-center space-x-1 text-primary-300 hover:text-white text-xs mt-2 transition-colors duration-200">
                                        <span>View MAC Listing</span>
                                        <i class="fas fa-external-link-alt text-xs"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Card 3: International Affiliation -->
                    <div class="hero-card group cursor-pointer" @click="activeCard = 2" :class="activeCard === 2 ? 'ring-2 ring-primary-400 shadow-lg shadow-primary-500/20' : ''">
                        <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 hover:bg-white/15 transition-all duration-300 hover:-translate-y-1">
                            <div class="flex items-start space-x-4">
                                <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                                    <i class="fas fa-globe-africa text-white text-lg"></i>
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-white font-semibold text-base mb-1">Internationally Affiliated</h3>
                                    <p class="text-primary-200 text-sm leading-relaxed">Affiliated with OCU, IKU, AICCS, and RKUC for globally recognized programs.</p>
                                    <a href="https://www.angazainstitute.ac.ke/accreditation-and-affiliation/" target="_blank" class="inline-flex items-center space-x-1 text-primary-300 hover:text-white text-xs mt-2 transition-colors duration-200">
                                        <span>View Affiliations</span>
                                        <i class="fas fa-external-link-alt text-xs"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CTA Buttons -->
                <div class="flex flex-wrap gap-4 mt-8 animate-fade-in-up" style="animation-delay: 1s;">
                    <a href="{{ url('/register/trainee') }}" class="btn-shine bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 text-white px-8 py-3.5 rounded-full font-semibold text-sm transition-all duration-300 hover:shadow-lg hover:shadow-accent-500/30 hover:-translate-y-0.5 inline-flex items-center space-x-2">
                        <span>Enroll Now</span>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                    <a href="#programs" class="bg-white/10 hover:bg-white/20 text-white border border-white/20 px-8 py-3.5 rounded-full font-semibold text-sm transition-all duration-300 hover:-translate-y-0.5 inline-flex items-center space-x-2">
                        <span>View Programs</span>
                        <i class="fas fa-book-open"></i>
                    </a>
                </div>
            </div>

            <!-- Right: Slider -->
            <div class="order-1 lg:order-2" x-data="heroSlider()">
                <div class="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/30">
                    <!-- Slider Container -->
                    <div class="relative aspect-[4/3] lg:aspect-[3/2] overflow-hidden rounded-2xl">
                        @foreach($sliders as $index => $slider)
                            <div
                                class="slider-slide absolute inset-0"
                                :class="currentSlide === {{ $index }} ? 'opacity-100 scale-100' : 'opacity-0 scale-105'"
                                style="transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);"
                            >
                                <img src="{{ $slider->getImageUrl() }}"
                                     alt="{{ $slider->title }}"
                                     class="w-full h-full object-cover"
                                     loading="{{ $index === 0 ? 'eager' : 'lazy' }}">
                                <!-- Overlay -->
                                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                                <!-- Slide Caption -->
                                <div class="absolute bottom-0 left-0 right-0 p-6 lg:p-8"
                                     :class="currentSlide === {{ $index }} ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'"
                                     style="transition: all 0.5s ease 0.3s;">
                                    <h3 class="text-white text-lg lg:text-xl font-bold font-display">{{ $slider->title }}</h3>
                                </div>
                            </div>
                        @endforeach

                        <!-- Ken Burns Effect Overlay -->
                        <div class="absolute inset-0 pointer-events-none"
                             :class="isAnimating ? 'opacity-0' : 'opacity-100'"
                             style="transition: opacity 0.5s ease;">
                        </div>
                    </div>

                    <!-- Slider Controls -->
                    <div class="absolute bottom-4 right-4 flex items-center space-x-2 z-10">
                        <!-- Dots -->
                        <div class="flex space-x-1.5 mr-3">
                            @foreach($sliders as $index => $slider)
                                <button
                                    @click="goToSlide({{ $index }})"
                                    class="w-2.5 h-2.5 rounded-full transition-all duration-300"
                                    :class="currentSlide === {{ $index }} ? 'bg-white w-8' : 'bg-white/50 hover:bg-white/75'"
                                ></button>
                            @endforeach
                        </div>
                        <!-- Prev/Next -->
                        <button @click="prevSlide()" class="w-9 h-9 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-all duration-200">
                            <i class="fas fa-chevron-left text-xs"></i>
                        </button>
                        <button @click="nextSlide()" class="w-9 h-9 bg-white/20 hover:bg-white/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-all duration-200">
                            <i class="fas fa-chevron-right text-xs"></i>
                        </button>
                    </div>

                    <!-- Progress Bar -->
                    <div class="absolute top-0 left-0 right-0 h-1 bg-white/10 z-10">
                        <div class="h-full bg-gradient-to-r from-primary-400 to-accent-400 transition-all duration-100"
                             :style="`width: ${progress}%`"></div>
                    </div>
                </div>

                <!-- Stats Bar Below Slider -->
                <div class="grid grid-cols-3 gap-3 mt-4">
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center border border-white/10">
                        <div class="text-2xl font-bold text-white" data-counter="15">0</div>
                        <div class="text-primary-300 text-xs mt-1">Years Experience</div>
                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center border border-white/10">
                        <div class="text-2xl font-bold text-white" data-counter="500">0</div>
                        <div class="text-primary-300 text-xs mt-1">Graduates</div>
                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 text-center border border-white/10">
                        <div class="text-2xl font-bold text-white" data-counter="50">0</div>
                        <div class="text-primary-300 text-xs mt-1">Training Hours</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce hidden lg:block">
        <a href="#about" class="text-primary-300 hover:text-white transition-colors duration-200">
            <i class="fas fa-chevron-down text-xl"></i>
        </a>
    </div>
</section>

<script>
    function heroSlider() {
        return {
            currentSlide: 0,
            totalSlides: {{ $sliders->count() }},
            progress: 0,
            isAnimating: false,
            interval: null,
            slideDuration: 5000,

            init() {
                this.startAutoplay();
            },

            startAutoplay() {
                this.interval = setInterval(() => {
                    this.progress += 2;
                    if (this.progress >= 100) {
                        this.nextSlide();
                    }
                }, this.slideDuration / 50);
            },

            resetProgress() {
                this.progress = 0;
                clearInterval(this.interval);
                this.startAutoplay();
            },

            nextSlide() {
                this.isAnimating = true;
                this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
                this.resetProgress();
                setTimeout(() => this.isAnimating = false, 700);
            },

            prevSlide() {
                this.isAnimating = true;
                this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
                this.resetProgress();
                setTimeout(() => this.isAnimating = false, 700);
            },

            goToSlide(index) {
                this.isAnimating = true;
                this.currentSlide = index;
                this.resetProgress();
                setTimeout(() => this.isAnimating = false, 700);
            }
        }
    }
</script>
