@extends('store.themes.modern-coffee-shop.layouts.app')

@section('title', __('Special Offers'))

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">{{ __('Special Offers') }}</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        @forelse($offers as $offer)
        <div class="bg-gradient-to-br from-red-600 to-orange-600 rounded-lg shadow-lg overflow-hidden text-white">
            <div class="p-6">
                <div class="flex items-start justify-between mb-4">
                    <span class="bg-white text-red-600 px-4 py-2 rounded-full text-lg font-bold">
                        {{ $offer->discount_percentage }}% {{ __('OFF') }}
                    </span>
                    <span class="text-sm opacity-90">
                        {{ __('Valid until') }} {{ $offer->end_date->format('M d, Y') }}
                    </span>
                </div>
                <h2 class="text-2xl font-bold mb-3">{{ $offer->title }}</h2>
                <p class="mb-6 opacity-90">{{ $offer->description }}</p>
                <a href="{{ route('store.offer-details', $offer->slug) }}" 
                   class="inline-block bg-white text-red-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
                    {{ __('View Products') }}
                </a>
            </div>
        </div>
        @empty
        <div class="col-span-2 text-center py-12">
            <p class="text-gray-500">{{ __('No active offers at the moment') }}</p>
        </div>
        @endforelse
    </div>
</div>
@endsection