@extends('layouts.app')

@section('title', 'Kampaniyalar')

@section('content')
<section class="campaign-page py-16 md:py-24">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-10">
            <p class="text-[#c77d4a] uppercase tracking-[0.2em] text-xs mb-3">BERNESSO</p>
            <h1 class="text-4xl md:text-5xl font-light text-white">Kampaniyalar</h1>
            <p class="text-white/55 mt-4">Aktiv endirimlər və xüsusi təkliflər.</p>
        </div>

        @if($campaigns->isEmpty())
            <div class="rounded-2xl bg-[#231e1b] p-8 text-white/65">Hazırda aktiv kampaniya yoxdur.</div>
        @else
            <div class="campaign-grid">
                @foreach($campaigns as $campaign)
                    <a href="{{ localized_route('campaigns.show', $campaign->slug) }}" class="campaign-card">
                        @if($campaign->banner)
                            <picture>
                                @if(image_has_webp($campaign->banner))
                                    <source type="image/webp" srcset="{{ image_webp_url($campaign->banner) }}">
                                @endif
                                <img src="{{ asset('images/' . $campaign->banner) }}" alt="{{ $campaign->name }}" loading="lazy" decoding="async">
                            </picture>
                        @else
                            <span class="campaign-card__fallback"></span>
                        @endif
                        <span class="campaign-card__shade"></span>
                        <span class="campaign-card__content">
                            @if((float) $campaign->discount_percent > 0)
                                <em>{{ number_format((float) $campaign->discount_percent, 0) }}% endirim</em>
                            @endif
                            <strong>{{ $campaign->name }}</strong>
                            <small>{{ $campaign->products_count }} məhsul</small>
                        </span>
                    </a>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection