@php
    $sliders = app(\App\Services\CampaignBannerService::class)->getHomepageSliders();
@endphp

@if($sliders && $sliders->count() > 0)
    <section class="sf-home-slider" aria-label="Ana Sayfa Sürgüsü">
        <div class="sf-home-slider-container">
            @foreach($sliders as $slider)
                <div class="sf-home-slider-item" id="slider-item-{{ $slider->id }}">
                    <picture class="sf-home-slider-picture">
                        @if($slider->image_mobile)
                            <source media="(max-width: 768px)" srcset="{{ $slider->mobile_image_url }}">
                        @endif
                        <img src="{{ $slider->desktop_image_url }}" alt="{{ $slider->title }}" class="sf-home-slider-image" loading="eager">
                    </picture>
                    <div class="sf-home-slider-overlay"></div>
                    <div class="sf-home-slider-content">
                        @if($slider->subtitle)
                            <span class="sf-home-slider-eyebrow">{{ $slider->subtitle }}</span>
                        @endif
                        <h2 class="sf-home-slider-title">{{ $slider->title }}</h2>
                        @if($slider->description)
                            <p class="sf-home-slider-desc">{{ $slider->description }}</p>
                        @endif
                        @if($slider->button_text && $slider->resolved_url)
                            <div class="sf-home-slider-actions">
                                <a 
                                    href="{{ $slider->resolved_url }}" 
                                    class="btn btn-primary btn-lg sf-home-slider-btn"
                                    @if($slider->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                                >
                                    {{ $slider->button_text }}
                                </a>
                            </div>
                        @endif

                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endif