@php
    $heroShow = App\Models\HomepageSetting::get('hero_show', true);
    $heroGoldGlow = App\Models\HomepageSetting::get('hero_gold_glow', true);
    $heroDotGrid = App\Models\HomepageSetting::get('hero_dot_grid', true);
    $heroDotGridOpacity = App\Models\HomepageSetting::get('hero_dot_grid_opacity', 10);
    $heroSlides = App\Models\HomepageSetting::get('hero_slides_json', []);
    $heroStatsShow = App\Models\HomepageSetting::get('hero_stats_show', true);
    $heroStats = App\Models\HomepageSetting::get('hero_stats_json', []);
@endphp

@if($heroShow)
<div id="section-hero" class="relative overflow-hidden bg-slate-900 {{ isset($activeEditingSection) && $activeEditingSection === 'hero' ? 'ring-4 ring-amber-500' : '' }}"
     x-data="{ 
         activeSlide: 0, 
         slidesCount: {{ count($heroSlides) }},
         autoPlay: true,
         interval: null,
         start() { 
             this.interval = setInterval(() => { 
                 this.activeSlide = (this.activeSlide + 1) % this.slidesCount; 
             }, 8000); 
         },
         stop() { 
             clearInterval(this.interval); 
         } 
     }"
     x-init="start()"
     @mouseenter="stop()"
     @mouseleave="start()">
    
    <!-- Editing Badge -->
    @if(isset($activeEditingSection) && $activeEditingSection === 'hero')
        <div class="absolute top-4 left-4 z-50 bg-amber-500 text-white font-bold text-xs uppercase px-3 py-1 rounded-full shadow-lg" style="z-index: 100;">Editing: Hero Section</div>
    @endif

    <!-- Sliding Background Images -->
    <div class="absolute inset-0 z-0 overflow-hidden">
        @foreach($heroSlides as $idx => $slide)
            <div x-show="activeSlide === {{ $idx }}"
                 x-transition:enter="transition-all ease-out duration-1000"
                 x-transition:enter-start="opacity-0 scale-105"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition-all ease-in duration-700 absolute inset-0"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
                 class="absolute inset-0 w-full h-full bg-cover bg-center"
                 style="background-image: linear-gradient(rgba(11, 20, 55, 0.75), rgba(11, 20, 55, 0.85)), url('{{ $slide['bg_image_path'] }}'); display: none;">
            </div>
        @endforeach
    </div>

    <!-- Overlays -->
    @if($heroDotGrid)
        <div class="absolute inset-0 bg-grid-white/[0.02] bg-[size:32px_32px] pointer-events-none" style="opacity: {{ $heroDotGridOpacity / 100 }}; z-index: 1;"></div>
    @endif
    
    @if($heroGoldGlow)
        <div class="absolute top-1/4 left-10 w-72 h-72 rounded-full blur-3xl pointer-events-none" style="background-color: rgba(201, 151, 26, 0.06); z-index: 1;"></div>
        <div class="absolute bottom-1/4 right-10 w-96 h-96 rounded-full blur-3xl pointer-events-none" style="background-color: rgba(11, 20, 55, 0.25); z-index: 1;"></div>
    @endif

    <!-- Content Container -->
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex flex-col justify-center z-10 pt-28 pb-20 min-h-[580px] sm:min-h-[640px]">
        
        <!-- Sliding Content Wrapper -->
        <div class="relative min-h-[300px] sm:min-h-[260px] flex items-center">
            @foreach($heroSlides as $idx => $slide)
                <div x-show="activeSlide === {{ $idx }}"
                     x-transition:enter="transition-all ease-out duration-700 delay-300"
                     x-transition:enter-start="opacity-0 translate-y-6"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition-all ease-in duration-300 absolute inset-x-0"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 -translate-y-6"
                     class="space-y-6 max-w-3xl text-left"
                     style="display: none;">
                     
                     @if(!empty($slide['badge_text']))
                         <span class="inline-flex items-center px-3.5 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider text-accent bg-accent/10 border border-accent/20" style="color: var(--accent); border-color: rgba(201, 151, 26, 0.3); background-color: rgba(201, 151, 26, 0.1);">
                             <span class="mr-1.5">{{ $slide['badge_icon'] ?? '✦' }}</span> {{ $slide['badge_text'] }}
                         </span>
                     @endif
                     
                     <h1 class="font-display font-extrabold text-white tracking-tight leading-tight text-3xl sm:text-4xl md:text-5xl lg:text-6xl">
                         {{ $slide['heading_line1'] ?? '' }} <br>
                         <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-amber-300" style="background-image: linear-gradient(to right, var(--accent), #fcd34d);">{{ $slide['heading_line2'] ?? '' }}</span>
                     </h1>
                     
                     <p class="text-sm sm:text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-2xl">
                         {{ $slide['subtext'] ?? '' }}
                     </p>
                     
                     <!-- CTAs -->
                     <div class="flex flex-wrap gap-4 pt-2">
                         @if(!empty($slide['btn1_label']))
                             <a href="{{ $slide['btn1_url'] ?? '#' }}" class="inline-flex items-center px-6 sm:px-8 py-3.5 rounded-full text-xs sm:text-sm font-semibold text-white shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5 focus:outline-none" style="background-color: var(--accent);">
                                 {{ $slide['btn1_label'] }}
                             </a>
                         @endif
                         @if(!empty($slide['btn2_label']))
                             <a href="{{ $slide['btn2_url'] ?? '#' }}" class="inline-flex items-center px-6 sm:px-8 py-3.5 rounded-full text-xs sm:text-sm font-semibold text-white bg-white/10 hover:bg-white/15 border border-white/15 backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5">
                                 {{ $slide['btn2_label'] }}
                             </a>
                         @endif
                     </div>
                </div>
            @endforeach
        </div>

        <!-- Floating Fixed Search Bar under sliding contents -->
        <div class="max-w-xl w-full mt-10 z-20">
            @livewire('public.search-bar')
        </div>

    </div>

    <!-- Arrow Controls (only show on hover if multiple slides exist) -->
    @if(count($heroSlides) > 1)
        <button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 rounded-full bg-black/25 hover:bg-black/50 border border-white/10 flex items-center justify-center text-white hover:text-accent transition-all duration-300 focus:outline-none">
            <svg class="h-5 w-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"></path></svg>
        </button>
        <button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 rounded-full bg-black/25 hover:bg-black/50 border border-white/10 flex items-center justify-center text-white hover:text-accent transition-all duration-300 focus:outline-none">
            <svg class="h-5 w-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"></path></svg>
        </button>

        <!-- Dot Indicators -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex space-x-2">
            @foreach($heroSlides as $idx => $slide)
                <button @click="activeSlide = {{ $idx }}" 
                        class="h-1.5 rounded-full transition-all duration-300 focus:outline-none"
                        :class="activeSlide === {{ $idx }} ? 'w-5 bg-accent' : 'w-1.5 bg-white/40 hover:bg-white/70'"
                        style="background-color: activeSlide === {{ $idx }} ? 'var(--accent)' : 'rgba(255,255,255,0.4)';"></button>
            @endforeach
        </div>
    @endif

</div>

<!-- Stats Counter -->
@if($heroStatsShow && !empty($heroStats))
<div class="bg-white py-12 border-b border-gray-100 relative z-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            @foreach($heroStats as $stat)
                <div>
                    <p class="text-3xl sm:text-4xl font-extrabold text-primary" style="color: var(--primary);">{{ $stat['number'] ?? '' }}</p>
                    <p class="text-sm text-gray-500 mt-1 font-medium">{{ $stat['label'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif

@endif