@if($heroSlides->isNotEmpty())
<section class="relative h-screen overflow-hidden bg-[#06458F]"
         x-data="sobreHero({{ json_encode($heroSlides->map(fn($s) => [
             'id'        => $s->id,
             'titulo'    => $s->titulo,
             'subtitulo' => $s->subtitulo,
             'imagem'    => asset('storage/' . $s->imagem),
         ])->values()) }})"
         x-init="init()">

    {{--- Slides como background cover ---}}
    <template x-for="(slide, index) in slides" :key="slide.id">
        <div class="absolute inset-0"
             x-show="current === index"
             x-transition:enter="transition-all duration-1000 ease-out"
             x-transition:enter-start="opacity-0 scale-105"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition-all duration-700 ease-in"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95">
            <img :src="slide.imagem"
                 :alt="slide.titulo"
                 class="w-full h-full object-cover">
        </div>
    </template>

    {{--- Overlay escuro ---}}
    <div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent pointer-events-none z-[1]"></div>

    {{--- Seta esquerda ---}}
    <button @click="prev()"
            class="absolute left-2 sm:left-8 top-1/2 -translate-y-1/2 z-20 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-all duration-300 group"
            aria-label="Slide anterior">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 group-hover:-translate-x-0.5 transition-transform" 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>

    {{--- Seta direita ---}}
    <button @click="next()"
            class="absolute right-2 sm:right-8 top-1/2 -translate-y-1/2 z-20 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-all duration-300 group"
            aria-label="Próximo slide">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-0.5 transition-transform" 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>

    {{--- Indicadores inferiores ---}}
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex items-center gap-3">
        <template x-for="(slide, index) in slides" :key="'dot-'+index">
            <button @click="goTo(index)"
                    class="rounded-full transition-all duration-500"
                    :class="current === index ? 'w-8 h-2 bg-white' : 'w-2 h-2 bg-white/40 hover:bg-white/60'"></button>
        </template>
    </div>

    {{--- Texto central ---}}
    <template x-for="(slide, index) in slides" :key="'text-'+slide.id">
        <div class="absolute inset-0 z-10 flex items-center justify-center pointer-events-none px-4 sm:px-6"
             x-show="current === index">
            <div class="text-center w-full max-w-4xl mx-auto pointer-events-auto"
                 x-transition:enter="transition-all duration-700 delay-300 ease-out"
                 x-transition:enter-start="opacity-0 translate-y-8"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition-all duration-300 ease-in"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-4">
                <h1 class="text-3xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-tight"
                    x-text="slide.titulo"></h1>
                <p x-show="slide.subtitulo"
                   x-text="slide.subtitulo"
                   class="text-white/80 text-sm sm:text-base md:text-lg mt-3 sm:mt-4 font-light max-w-2xl mx-auto"></p>
            </div>
        </div>
    </template>

    {{--- Barra de progresso inferior ---}}
    <div class="absolute bottom-0 left-0 right-0 z-20 h-1 bg-white/10">
        <div class="h-full bg-white/60 transition-all duration-200 ease-linear rounded-full"
             :style="'width: ' + progress + '%'"></div>
    </div>
</section>

<script>
function sobreHero(slidesData) {
    return {
        current: 0,
        slides: slidesData,
        progress: 0,
        interval: null,
        tickInterval: null,
        init() {
            if (this.slides.length > 1) this.startAutoplay();
        },
        startAutoplay() {
            this.progress = 0;
            const total = 6000, tick = 50, step = (tick / total) * 100;
            this.tickInterval = setInterval(() => {
                this.progress = Math.min(this.progress + step, 100);
            }, tick);
            this.interval = setInterval(() => this.next(), total);
        },
        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(i) {
            this.stopAutoplay();
            this.current = i;
            this.startAutoplay();
        }
    }
}
</script>
@else
<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#06458F]">
    <div class="text-center px-6 max-w-4xl mx-auto">
        <h1 class="text-3xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-tight">
            {{ __('sobre.hero_title') }}
        </h1>
        <p class="text-white/60 text-xs sm:text-sm mt-4 font-light tracking-widest uppercase flex items-center justify-center gap-2">
            <a href="{{ route('welcome') }}" class="hover:text-white transition duration-200">{{ __('app.navbar.home') }}</a>
            <span>/</span>
            <span class="text-white/50">{{ __('app.navbar.about') }}</span>
        </p>
    </div>
</section>
@endif