@if($heroSlides->isNotEmpty())
<section class="relative bg-[#06458F] overflow-hidden min-h-[87vh] lg:h-[87vh] flex flex-col" x-data="djiHero({{ json_encode($heroSlides->map(function($s) {
    return [
        'id'        => $s->id,
        'subtitulo' => $s->subtitulo,
        'titulo'    => $s->titulo,
        'descricao' => $s->descricao,
        'imagem'    => asset('storage/' . $s->imagem),
        'btn1_texto'=> $s->texto_botao_1,
        'btn1_url'  => $s->url_botao_1 ? url($s->url_botao_1) : '#',
        'btn2_texto'=> $s->texto_botao_2,
        'btn2_url'  => $s->url_botao_2 ? url($s->url_botao_2) : '#',
    ];
})->values()) }})" x-init="init()">

    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#06458F] to-transparent z-10 pointer-events-none"></div>

    {{-- LEFT ARROW --}}
    <button @click="prev()"
            class="absolute left-2 sm:left-6 top-1/2 -translate-y-1/2 z-30 w-9 h-9 sm:w-11 sm:h-11 rounded-full bg-white/5 backdrop-blur-md border border-white/10 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/15 hover:border-white/25 transition-all duration-300 group"
            aria-label="Slide anterior">
        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
    </button>

    {{-- RIGHT ARROW --}}
    <button @click="next()"
            class="absolute right-2 sm:right-6 top-1/2 -translate-y-1/2 z-30 w-9 h-9 sm:w-11 sm:h-11 rounded-full bg-white/5 backdrop-blur-md border border-white/10 flex items-center justify-center text-white/60 hover:text-white hover:bg-white/15 hover:border-white/25 transition-all duration-300 group"
            aria-label="Próximo slide">
        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
    </button>


    <div class="relative z-10 max-w-[1440px] mx-auto px-4 sm:px-6 md:px-12 pt-24 pb-10 sm:pt-28 sm:pb-12 lg:pt-32 lg:pb-16 flex items-center flex-1 w-full">

        <template x-for="(slide, index) in slides" :key="slide.id">
            <div class="w-full grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-12 items-center"
                 :class="current === index ? 'relative z-[1]' : 'absolute inset-0 pointer-events-none z-0'"
                 x-cloak>

                {{-- TEXT COLUMN — Staggered Cascade Fade-Up --}}
                <div class="lg:col-span-6 lg:col-start-2 order-2 lg:order-1 space-y-4 sm:space-y-6 text-left max-w-2xl">

                    {{-- 1. Subtítulo — delay-100 --}}
                    <span x-show="current === index && slide.subtitulo"
                          x-transition:enter="transition-all duration-700 delay-100 ease-dji"
                          x-transition:enter-start="opacity-0 translate-y-6"
                          x-transition:enter-end="opacity-100 translate-y-0"
                          x-text="slide.subtitulo"
                          class="inline-block text-[10px] sm:text-[11px] font-bold uppercase tracking-[0.3em] text-[#A2DE68]/80"></span>

                    {{-- 2. Título Principal — delay-200 --}}
                    <h1 x-show="current === index"
                        x-transition:enter="transition-all duration-700 delay-200 ease-dji"
                        x-transition:enter-start="opacity-0 translate-y-8"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        class="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-medium lg:font-semibold text-white/95 tracking-tight leading-[1.15] antialiased uppercase"
                        x-text="slide.titulo"></h1>

                    {{-- 3. Descrição — delay-300 --}}
                    <p x-show="current === index && slide.descricao"
                       x-transition:enter="transition-all duration-700 delay-300 ease-dji"
                       x-transition:enter-start="opacity-0 translate-y-8"
                       x-transition:enter-end="opacity-100 translate-y-0"
                       x-text="slide.descricao"
                       class="text-slate-300 text-sm sm:text-base font-light leading-relaxed max-w-lg"></p>

                    {{-- 4. Botões CTA — delay-400 --}}
                    <div x-show="current === index"
                         x-transition:enter="transition-all duration-700 delay-400 ease-dji"
                         x-transition:enter-start="opacity-0 translate-y-8"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         class="flex flex-wrap gap-3 sm:gap-4 pt-2 sm:pt-4">
                        <a :href="slide.btn1_url"
                           class="inline-flex items-center gap-2 px-5 sm:px-8 py-3 sm:py-4 bg-white text-[#0c1015] font-bold text-xs uppercase tracking-widest rounded-full hover:bg-slate-100 transition-all duration-300 shadow-lg hover:scale-[1.02] active:scale-95">
                            <span x-text="slide.btn1_texto"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
                        </a>
                        <a :href="slide.btn2_url"
                           class="inline-flex items-center gap-2.5 px-5 sm:px-8 py-3 sm:py-4 bg-white/10 hover:bg-white/15 border border-white/20 hover:border-white/30 text-white font-bold text-xs uppercase tracking-widest rounded-full transition-all duration-300 backdrop-blur-sm">
                            <span x-text="slide.btn2_texto"></span>
                        </a>
                    </div>
                </div>

                {{-- IMAGE COLUMN — Scale-In Crossfade --}}
                <div class="lg:col-span-5 lg:col-start-8 order-1 lg:order-2 flex justify-center items-center">
                    <div x-show="current === index"
                         x-transition:enter="transition-all duration-1000 ease-dji"
                         x-transition:enter-start="opacity-0 scale-110"
                         x-transition:enter-end="opacity-100 scale-100"
                         x-transition:leave="transition-all duration-150 ease-in"
                         x-transition:leave-start="opacity-100 scale-100"
                         x-transition:leave-end="opacity-0 scale-100"
                         class="relative w-full max-w-[300px] sm:max-w-[400px] lg:max-w-[500px]">
                        <img :src="slide.imagem"
                             :alt="slide.titulo"
                             class="relative w-full h-auto object-contain drop-shadow-[0_20px_35px_rgba(0,0,0,0.3)] hover:scale-105 transition-transform duration-500">
                    </div>
                </div>

            </div>
        </template>{{-- END slide template --}}

        {{-- Slide dots — canto inferior direito --}}
        <div class="absolute right-4 sm:right-8 bottom-20 sm:bottom-24 z-20 flex items-center gap-2">
            <template x-for="(slide, index) in slides" :key="'dot-'+index">
                <button @click="goTo(index)"
                        class="rounded-full transition-all duration-300"
                        :class="current === index ? 'w-2.5 h-2.5 bg-white' : 'w-2 h-2 bg-white/30 hover:bg-white/60'">
                </button>
            </template>
        </div>

        {{-- Bottom progress bar --}}
        <div class="absolute bottom-0 left-0 right-0 z-20">
            <div class="h-0.5 bg-white/5 w-full">
                <div class="h-full bg-white/50 transition-all duration-200 ease-linear rounded-full"
                     :style="'width: ' + progress + '%'"></div>
            </div>
        </div>

    </div>
</section>

<script>
function djiHero(slidesData) {
    return {
        current: 0,
        slides: slidesData,
        progress: 0,
        interval: null,
        tickInterval: null,
        init() {
            if (this.slides.length > 0) {
                this.startAutoplay();
            }
        },
        startAutoplay() {
            this.progress = 0;
            const totalTime = 6000;
            const tick = 50;
            const step = (tick / totalTime) * 100;

            this.tickInterval = setInterval(() => {
                this.progress = Math.min(this.progress + step, 100);
            }, tick);

            this.interval = setInterval(() => {
                this.next();
            }, totalTime);
        },
        stopAutoplay() {
            clearInterval(this.interval);
            clearInterval(this.tickInterval);
        },
        next() {
            this.stopAutoplay();
            this.current = (this.current + 1) % this.slides.length;
            this.startAutoplay();
        },
        prev() {
            this.stopAutoplay();
            this.current = (this.current - 1 + this.slides.length) % this.slides.length;
            this.startAutoplay();
        },
        goTo(index) {
            this.stopAutoplay();
            this.current = index;
            this.startAutoplay();
        }
    }
}
</script>

@else
<section class="relative bg-[#06458F] overflow-hidden min-h-[87vh] lg:h-[87vh] flex items-center">

    <div class="relative z-10 max-w-[1440px] mx-auto w-full px-6 md:px-12">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
            <div class="lg:col-span-5 order-2 lg:order-1 flex justify-center items-center">
                <div class="relative w-full max-w-[460px] flex justify-center">
                    <img src="{{ asset('imagem-gps-loja.png') }}" 
                         alt="GPS Geotecnológico Profissional" 
                         class="w-full max-h-[460px] object-contain drop-shadow-[0_20px_35px_rgba(0,0,0,0.3)] hover:scale-105 transition-transform duration-500">
                </div>
            </div>
            <div class="lg:col-span-7 order-1 lg:order-2 space-y-6 text-left flex flex-col items-start">
                <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white tracking-tight leading-[1.1] uppercase">
                    {!! __('loja.hero_title') !!}
                </h1>
                <p class="text-slate-200 text-xs sm:text-sm md:text-base font-light leading-relaxed max-w-xl">
                    {{ __('loja.hero_subtitle') }}
                </p>
                <div class="flex flex-wrap gap-4 pt-2 w-full justify-start">
                    <a href="{{ route('loja.index', ['categoria' => 'gps']) }}"
                       class="inline-flex items-center justify-center gap-3 px-8 py-4 bg-white text-[#06458F] font-bold text-xs uppercase tracking-widest rounded-xl transition-all duration-300 shadow-lg hover:bg-slate-100 hover:scale-[1.02] active:scale-95">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/></svg>
                        <span>{{ __('loja.btn_gps') }}</span>
                    </a>
                    <a href="#catalogo"
                       class="inline-flex items-center justify-center gap-2.5 px-8 py-4 bg-white/10 hover:bg-white/15 border border-white/20 hover:border-white/30 text-white font-bold text-xs uppercase tracking-widest rounded-xl transition-all duration-300 backdrop-blur-sm">
                        <span>{{ __('loja.btn_explore') }}</span>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endif