@php
    $limit = $limit ?? 4;
    $banners = app(\App\Services\CampaignBannerService::class)->getHomepageBanners($position, $limit);
@endphp

@if($banners && $banners->count() > 0)
    <section class="sf-campaign-section sf-section-spaced" aria-label="Kampanyalar">
        <div class="sf-campaign-grid">
            @foreach($banners as $banner)
                <div class="sf-campaign-card" id="campaign-banner-{{ $banner->id }}">
                    <picture class="sf-campaign-card-picture">
                        @if($banner->image_mobile)
                            <source media="(max-width: 768px)" srcset="{{ $banner->mobile_image_url }}">
                        @endif
                        <img src="{{ $banner->desktop_image_url }}" alt="{{ $banner->title }}" class="sf-campaign-card-image" loading="lazy">
                    </picture>
                    <div class="sf-campaign-card-overlay"></div>
                    <div class="sf-campaign-card-content">
                        @if($banner->subtitle)
                            <span class="sf-campaign-card-eyebrow">{{ $banner->subtitle }}</span>
                        @endif
                        <h3 class="sf-campaign-card-title">{{ $banner->title }}</h3>
                        @if($banner->description)
                            <p class="sf-campaign-card-desc">{{ $banner->description }}</p>
                        @endif
                        @if($banner->button_text && $banner->resolved_url)
                            <div class="sf-campaign-card-actions">
                                <a 
                                    href="{{ $banner->resolved_url }}" 
                                    class="btn btn-secondary sf-campaign-card-btn"
                                    @if($banner->open_in_new_tab) target="_blank" rel="noopener noreferrer" @endif
                                >
                                    {{ $banner->button_text }}
                                </a>
                            </div>
                        @endif

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