@php
    /** @var \V2\Services\Storage\StorageService $storageService */
    $storageService = app(\V2\Services\Storage\StorageService::class);
@endphp
@if(!empty($data['slides']))
<section class="hero-section-1" aria-label="Destaques">
    <div class="dot-shape-1">
        <img src="{{ asset('assets/sucesu/img/hero/dot-shape-1.png') }}" alt="" width="150" height="150" loading="eager" decoding="async" aria-hidden="true" role="presentation">
    </div>
    <div class="dot-shape-2">
        <img src="{{ asset('assets/sucesu/img/hero/dot-shape-2.png') }}" alt="" width="120" height="120" loading="eager" decoding="async" aria-hidden="true" role="presentation">
    </div>
    <div class="swiper-dot">
        <div class="dot"></div>
    </div>
    <div class="swiper hero-slider">
        <div class="swiper-wrapper">
            @foreach($data['slides'] as $slide)
            <div class="swiper-slide">
                @if($loop->first)
                    @php
                        $firstImg = $slide['image'] ?? '';
                        $firstVariants = $slide['image_variants'] ?? [];
                        $firstUrl = $firstVariants ? $storageService->url(max($firstVariants)) : $storageService->url($firstImg);
                    @endphp
                    <link rel="preload" as="image" href="{{ $firstUrl }}" fetchpriority="high">
                @endif
                <div class="hero-1" style="position:relative; overflow:hidden;">
                    {{-- Imagem de fundo com picture + object-fit para WebP responsivo --}}
                    @include('v2-service-media::components.picture', [
                        'originalPath' => $slide['image'] ?? '',
                        'variants'     => $slide['image_variants'] ?? [],
                        'alt'          => $slide['title'] ?? '',
                        'class'        => '',
                        'lazy'         => !$loop->first,
                        'style'        => 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;',
                    ])
                    <div class="container" style="position:relative;">
                        <div class="row g-4 align-items-center justify-content-between">
                            <div class="col-xl-8">
                                <div class="hero-content"><!-- CSS .hero-1 .hero-content z-index:99 mantém o texto acima do ::before overlay -->
                                    @if($loop->first)
                                    <h1 data-animation="fadeInUp" data-delay="1.1s">{{ $slide['title'] ?? '' }}</h1>
                                    @else
                                    <h2 data-animation="fadeInUp" data-delay="1.1s">{{ $slide['title'] ?? '' }}</h2>
                                    @endif
                                    <p data-animation="wow fadeInUp" data-wow-delay="1.3s">{{ $slide['subtitle'] ?? '' }}</p>
                                    @if(!empty($slide['cta_text']))
                                    <div class="hero-button wow fadeInUp" data-animation="wow fadeInUp" data-wow-delay="1.5s">
                                        <a href="{{ $slide['cta_url'] ?? '#' }}" class="theme-btn link-btn">
                                            <span>{{ $slide['cta_text'] }}</span> <i class="bi bi-arrow-right"></i>
                                        </a>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif