{{-- Animaciones: crossfade,papercut,slotslide-horizontal --}}
{{-- @dd($galleries[0]) --}}

{{-- <div class="rev_slider_wrapper rev_slider_wrapper--p100 tp-overflow-hidden mt-0">
    <div class="hero-topbar">
        <p class="hero-topbar__title">¡Inscripciones abiertas 2026!</p>
        <div class="hero-topbar__actions">
            <a class="hero-topbar__btn hero-topbar__btn--primary" href="/contacto">
                Asegura tu lugar
            </a>
            <a class="hero-topbar__btn hero-topbar__btn--wa"
                href="{{ $primaryWhatsAppUrl }}"
                target="_blank" rel="noopener">
                WhatsApp
            </a>
        </div>
    </div>

    <div class="rev_slider fullwidthabanner js-rev" data-version="5.4.4" style="display:none;" data-rev-layout="auto"
        data-rev-height="600" data-rev-width="100%" Flechas desactivadas por solicitud data-rev-arrows="false"
        data-rev-stylearrow="au-rev-arrow-5" data-rev-bullets="true" data-rev-stylebullet="au-rev-bullet-2"
        data-rev-voffbullet="40">

        <ul>
            @foreach ($galleries as $key => $gallery)
            <li class="rev-item rev-item-{{ $key + 1 }}" data-transition="{{ $gallery->animation }}">
                <img class="rev-slidebg" src="/storage/{{ $gallery->image }}" alt="{{ $gallery->caption }}"
                    data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" />
                <h4 class="tp-caption tp-resizeme rev-text-1 text-shadow"
                    data-frames='[{"delay":0,"speed":1800,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":800,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                    data-x="['left']" data-y="['middle']" data-hoffset="[0, 0, 0, 0, 0]"
                    data-voffset="[-70, -70, -42, -40, -35]" data-paddingleft="[0, 0, 0, 0, 15]"
                    data-paddingright="[0, 0, 0, 0, 15]" data-width="['auto']" data-height="['auto']"
                    data-whitespace="[nowrap, nowrap, nowrap, nowrap, nowrap]" data-color="#fff" data-fontweight="400"
                    data-fontsize="[12, 12, 11, 10, 10]" data-textalign="[left, left, left, left, left]">
                    {{ $gallery->caption }}
                </h4>
                <h2 class="tp-caption tp-resizeme rev-text-2 text-shadow"
                    data-frames='[{"delay":800,"speed":2100,"frame":"0","from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":800,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                    data-x="[left]" data-y="[center]" data-hoffset="[0, 0, 0, 0, 0]" data-voffset="[12, 16, 20, 18, 18]"
                    data-paddingleft="[0, 0, 0, 0, 15]" data-paddingright="[0, 0, 0, 0, 15]"
                    data-width="[520,500,440,360,300]" data-height="['auto']" data-lineheight="[44, 42, 35, 32, 30]"
                    data-whitespace="normal" data-color="#fff" data-fontweight="700"
                    data-fontsize="[40, 38, 31, 27, 24]" data-textalign="[left, left, left, left, left]">
                    {{ $gallery->text }}
                </h2>

                <a class="tp-caption tp-resizeme" target="_self" href="{{ $gallery->url }}"
                    data-frames='[{"delay":0,"speed":1800,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":800,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                    data-x="[left]" data-y="[center]" data-hoffset="[0, 0, 0, 0, 15]"
                    data-voffset="[87, 87, 130, 130, 130]" data-width="['auto']" data-height="['auto']"
                    data-responsive_offset="on" data-responsive="off"
                    data-whitespace="[nowrap, nowrap, nowrap, nowrap, nowrap]">
                    <span class="rev-btn-1"> {{ $gallery->text_btn }}
                        <span class="arrow" data-paddingleft="5">
                            <i class="zmdi zmdi-arrow-right"></i>
                        </span>
                    </span>
                </a>
            </li>
            @endforeach

        </ul>
    </div>
</div> --}}


<div class="hero-container">
    {{-- Top Bar --}}
    <section class="hero-topbar">
        <p class="hero-topbar__title">
            <i class="zmdi zmdi-calendar-check"></i>
            ¡Inscripciones abiertas 2026!
        </p>
        <div class="hero-topbar__actions">
            <p class="hero-topbar__btn hero-topbar__btn--primary">
                <i class="zmdi zmdi-shield-check"></i>
                Asegura tu lugar
            </p>

            <a class="hero-topbar__btn hero-topbar__btn--wa"
                href="{{ $primaryWhatsAppUrl }}"
                target="_blank" rel="noopener noreferrer">
                <i class="zmdi zmdi-whatsapp"></i>
                WhatsApp
            </a>
        </div>
    </section>

    {{-- Slider Principal --}}
    <div class="hero-slider" id="heroSlider">
        <div class="hero-slides">
            @foreach ($galleries as $key => $gallery)
                <div class="hero-slide {{ $key === 0 ? 'hero-slide--active' : '' }}" data-index="{{ $key }}">
                    @if ($key === 0)
                        <img class="hero-slide__bg" src="/storage/{{ $gallery->image }}" alt="{{ $gallery->caption }}"
                            loading="eager" fetchpriority="high" decoding="async" />
                    @else
                        <img class="hero-slide__bg" src="/storage/{{ $gallery->image }}" alt="{{ $gallery->caption }}"
                            loading="lazy" fetchpriority="low" decoding="async" />
                    @endif
                    <div class="hero-slide__overlay">
                        @if ($gallery->caption)
                            <p class="hero-slide__eyebrow">{{ $gallery->caption }}</p>
                        @endif
                        @if ($gallery->text)
                            <h2 class="hero-slide__title">{{ $gallery->text }}</h2>
                        @endif
                        @if ($gallery->text_btn && $gallery->url)
                            <a class="hero-slide__btn" href="{{ $gallery->url }}">
                                {{ $gallery->text_btn }}
                                <span class="arrow">
                                    <i class="zmdi zmdi-arrow-right"></i>
                                </span>
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Controles del Slider (solo si hay más de 1 slide) --}}
        @if(count($galleries) > 1)
            <div class="hero-slider__controls">
                <button class="hero-slider__arrow hero-slider__arrow--prev" id="sliderPrev" type="button"
                    aria-label="Slide anterior">
                    <i class="zmdi zmdi-chevron-left" aria-hidden="true"></i>
                </button>
                <button class="hero-slider__arrow hero-slider__arrow--next" id="sliderNext" type="button"
                    aria-label="Siguiente slide">
                    <i class="zmdi zmdi-chevron-right" aria-hidden="true"></i>
                </button>
            </div>
            <div class="hero-slider__dots">
                @foreach ($galleries as $key => $gallery)
                    <button class="hero-slider__dot {{ $key === 0 ? 'hero-slider__dot--active' : '' }}" data-index="{{ $key }}"
                        type="button" aria-label="Ir al slide {{ $key + 1 }}"
                        aria-current="{{ $key === 0 ? 'true' : 'false' }}"></button>
                @endforeach
            </div>

            {{-- Barra de progreso --}}
            <div class="hero-slider__progress">
                <div class="hero-slider__progress-bar" id="sliderProgress"></div>
            </div>
        @endif
    </div>
</div>

{{-- Script para funcionalidad del slider --}}
@push('scripts')
    <script defer src="/js/hero-slider.js?v={{ file_exists(public_path('js/hero-slider.js')) ? filemtime(public_path('js/hero-slider.js')) : time() }}"></script>
@endpush