@extends('frontend.layouts.app')
@section('title', 'Special Offers')
@section('content')
<section style="padding-top:40px;">
    <div class="container">
        <div class="section-title"><h2>Special <span>Offers</span></h2><p>Grab these deals before they're gone</p></div>
        <div class="grid grid-3">
            @forelse($offers as $o)
                <div class="card hover-lift" style="overflow:hidden;">
                    @if($o->banner_image)<img src="{{ asset('storage/'.$o->banner_image) }}" style="height:170px; width:100%; object-fit:cover;">@endif
                    <div style="padding:22px;">
                        <h3>{{ $o->title }}</h3>
                        <p style="opacity:0.65; font-size:0.88rem; margin:10px 0;">{{ $o->description }}</p>
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <span class="price-new" style="font-size:1.3rem;">{{ $o->discount_percentage ? $o->discount_percentage.'% OFF' : $siteSettings['currency'].$o->fixed_discount.' OFF' }}</span>
                            <span style="font-size:0.78rem; opacity:0.55;">Until {{ $o->end_date->format('M d') }}</span>
                        </div>
                    </div>
                </div>
            @empty
                <p style="opacity:0.6; grid-column:1/-1; text-align:center; padding:60px 0;">No active offers right now — check back soon!</p>
            @endforelse
        </div>
    </div>
</section>
@endsection