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

<style>
@keyframes hero-slide-in {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-text {
    opacity: 0;
    animation: hero-slide-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
</style>

@php
$variants = [
    'brand' => [
        'wrapper' => 'bg-gradient-to-br from-brand via-brand-800 to-brand-900',
        'title' => 'text-white',
        'description' => 'text-brand-100',
        'cta' => 'bg-accent text-brand-900 shadow-accent/25 hover:bg-accent-500 hover:shadow-lg',
        'ctaSecondary' => 'border-white/20 text-white hover:bg-white/10',
    ],
    'brand-dark' => [
        'wrapper' => 'bg-gradient-to-br from-brand-800 via-brand-900 to-black',
        'title' => 'text-white',
        'description' => 'text-gray-300',
        'cta' => 'bg-accent text-brand-900 shadow-accent/25 hover:bg-accent-500 hover:shadow-lg',
        'ctaSecondary' => 'border-white/20 text-white hover:bg-white/10',
    ],
    'accent' => [
        'wrapper' => 'bg-gradient-to-br from-accent via-accent-400 to-accent-300',
        'title' => 'text-brand-900',
        'description' => 'text-brand-800/80',
        'cta' => 'bg-brand text-white shadow-brand/25 hover:bg-brand-700 hover:shadow-lg',
        'ctaSecondary' => 'border-brand/20 text-brand hover:bg-brand/10',
    ],
    'danger' => [
        'wrapper' => 'bg-gradient-to-br from-danger via-danger-600 to-danger-700',
        'title' => 'text-white',
        'description' => 'text-red-100',
        'cta' => 'bg-accent text-brand-900 shadow-accent/25 hover:bg-accent-500 hover:shadow-lg',
        'ctaSecondary' => 'border-white/20 text-white hover:bg-white/10',
    ],
    'white' => [
        'wrapper' => 'bg-white border-b border-gray-100',
        'title' => 'text-gray-900',
        'description' => 'text-gray-500',
        'cta' => 'bg-brand text-white shadow-brand/25 hover:bg-brand-700 hover:shadow-lg',
        'ctaSecondary' => 'border-brand/20 text-brand hover:bg-brand/10',
    ],
];

$hasAnyImage = collect($slides)->contains(fn($s) => !empty($s['image_path']));
@endphp

<div
    x-data="heroCarousel()"
    x-init="init(@js($slides))"
    @keydown.right.window="next"
    @keydown.left.window="prev"
    role="region"
    aria-roledescription="carousel"
    aria-label="Destaques"
    @mouseenter="pause"
    @mouseleave="resume"
    @focusin="pause"
    @focusout="resume"
    @touchstart="touchStart"
    @touchend="touchEnd"
    class="relative select-none"
>
    @foreach ($slides as $index => $slide)
    @php $v = $variants[$slide['background_variant']] ?? $variants['brand']; @endphp
    @php
        $hasImage = !empty($slide['image_path']);
        $tc = !empty($slide['text_color']) ? $slide['text_color'] : null;
        if ($hasImage) {
            $imgPath = $slide['image_path'];
            $imgUrl = file_exists(public_path('storage/' . $imgPath))
                ? asset('storage/' . $imgPath)
                : (file_exists(public_path('images/hero_imagens/' . basename($imgPath)))
                    ? asset('images/hero_imagens/' . basename($imgPath))
                    : Storage::url($imgPath));
        }
    @endphp
    <div
        x-show="current === {{ $index }}"
        x-cloak
        x-transition:enter="transition duration-[400ms] ease-out"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        aria-hidden="{{ $index !== 0 ? 'true' : 'false' }}"
        :aria-hidden="current !== {{ $index }}"
        role="group"
        aria-roledescription="slide"
        aria-label="Slide {{ $index + 1 }} de {{ count($slides) }}"
        class="relative overflow-hidden bg-[image:var(--hero-bg)] bg-cover bg-center bg-no-repeat {{ $hasImage ? 'bg-[#f8f5f0]' : $v['wrapper'] }}"
        @if($hasImage) style="--hero-bg: url('{{ $imgUrl }}');" @endif
    >
        @if($hasImage)
        <div class="absolute inset-0 bg-white/5"></div>
        @endif

        <x-container class="relative flex flex-col justify-center items-center min-h-[70vh] lg:min-h-[90dvh] py-16 lg:py-20">
            <div class="max-w-2xl mx-auto text-center">

                <h1
                    x-show="current === {{ $index }}"
                    x-cloak
                    style="animation-delay: 500ms"
                    class="hero-text text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.1] {{ $tc ?? ($hasImage ? 'text-white' : $v['title']) }}"
                >
                    {{ $slide['title'] }}
                </h1>

                @if ($slide['description'])
                <p
                    x-show="current === {{ $index }}"
                    x-cloak
                    style="animation-delay: 600ms"
                    class="hero-text mt-5 text-base sm:text-lg leading-relaxed max-w-lg mx-auto {{ $tc ?? ($hasImage ? 'text-white/70' : $v['description']) }}"
                >
                    {{ $slide['description'] }}
                </p>
                @endif

                <div
                    x-show="current === {{ $index }}"
                    x-cloak
                    style="animation-delay: 700ms"
                    class="hero-text mt-8 sm:mt-10 flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center"
                >
                    @if ($slide['primary_cta_label'])
                    <a href="{{ $slide['primary_cta_url'] ?: '#' }}" data-track="hero-cta-primary" class="inline-flex items-center justify-center gap-2.5 rounded-xl px-6 sm:px-7 py-3 sm:py-3.5 text-sm sm:text-base font-semibold transition-all duration-200 shadow-lg {{ $hasImage ? 'bg-white text-brand-900 hover:bg-gray-100 hover:shadow-lg' : $v['cta'] }}">
                        {{ $slide['primary_cta_label'] }}
                    </a>
                    @endif

                    @if ($slide['secondary_cta_label'])
                    <a href="{{ $slide['secondary_cta_url'] ?: '#' }}" data-track="hero-cta-secondary" class="inline-flex items-center justify-center gap-2 rounded-xl border-2 px-6 sm:px-7 py-3 sm:py-3.5 text-sm sm:text-base font-medium transition-all duration-200 {{ $hasImage ? 'border-white/30 text-white hover:border-white/50 hover:bg-white/10' : $v['ctaSecondary'] }}">
                        {{ $slide['secondary_cta_label'] }}
                    </a>
                    @endif
                </div>
            </div>
        </x-container>
    </div>
    @endforeach

    @if (count($slides) > 1)
    <button type="button" @click="prev" aria-label="Slide anterior" class="absolute left-3 top-1/2 -translate-y-1/2 z-20 p-3 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand/50 {{ $hasAnyImage ? 'bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm' : 'bg-black/10 text-white hover:bg-black/20' }}">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
    </button>
    <button type="button" @click="next" aria-label="Próximo slide" class="absolute right-3 top-1/2 -translate-y-1/2 z-20 p-3 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand/50 {{ $hasAnyImage ? 'bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm' : 'bg-black/10 text-white hover:bg-black/20' }}">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 19.5 7.5-7.5-7.5-7.5"/></svg>
    </button>
    <div class="absolute bottom-6 left-0 right-0 z-10 pointer-events-none">
        <x-container>
            <div class="flex items-center justify-between pointer-events-auto">
                <div class="flex gap-2" role="tablist" aria-label="Navegação de slides">
                    @foreach ($slides as $index => $slide)
                    <button
                        type="button"
                        role="tab"
                        aria-label="Ir para o slide {{ $index + 1 }}"
                        :aria-selected="current === {{ $index }}"
                        @click="goTo({{ $index }})"
                        class="h-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-brand/50"
                        :class="current === {{ $index }} ? 'w-8 {{ $hasAnyImage ? 'bg-brand' : 'bg-white' }}' : 'w-2.5 {{ $hasAnyImage ? 'bg-gray-400 hover:bg-gray-500' : 'bg-white/40 hover:bg-white/70' }}'"
                    ></button>
                    @endforeach
                </div>
                <div class="flex gap-2">
                    <button type="button" @click="prev" aria-label="Slide anterior" class="p-2 rounded-full transition focus:outline-none focus:ring-2 focus:ring-brand/50 {{ $hasAnyImage ? 'text-gray-600 hover:bg-gray-100' : 'text-white bg-white/10 hover:bg-white/20' }}">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/></svg>
                    </button>
                    <button type="button" @click="next" aria-label="Próximo slide" class="p-2 rounded-full transition focus:outline-none focus:ring-2 focus:ring-brand/50 {{ $hasAnyImage ? 'text-gray-600 hover:bg-gray-100' : 'text-white bg-white/10 hover:bg-white/20' }}">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 19.5 7.5-7.5-7.5-7.5"/></svg>
                    </button>
                </div>
            </div>
        </x-container>
    </div>
    @endif
</div>