@extends('layouts.app')
@section('title', 'Special Offers - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">Special Offers</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Specials</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        {{-- Countdown Banner --}}
        <div class="bg-brand-dark rounded-lg p-8 mb-8 flex flex-col md:flex-row items-center justify-between">
            <div>
                <span class="bg-brand-red text-white text-xs font-bold px-3 py-1 rounded uppercase tracking-widest">Limited Time</span>
                <h2 class="text-3xl font-extrabold text-white mt-4 mb-2">Mega Sale — Up to 50% Off!</h2>
                <p class="text-gray-400">Don't miss out on our biggest deals this season</p>
            </div>
            <div class="flex space-x-2 mt-6 md:mt-0" id="specials-countdown"></div>
        </div>

        @if($products->count() > 0)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($products as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>
        @if($products->hasPages())
        <div class="mt-12 flex justify-center">{{ $products->links() }}</div>
        @endif
        @else
        <div class="text-center py-12 bg-white rounded-lg border border-gray-100"><p class="text-gray-500">No special offers available at the moment.</p></div>
        @endif
    </div>
</div>

@push('scripts')
<script>
createCountdown('specials-countdown', Date.now() + (3*86400000 + 8*3600000));
</script>
@endpush
@endsection