@extends('layouts.app')
@section('title', __('messages.home'))
@section('content')

<section class="relative h-[400px] bg-black text-white flex items-center justify-center hero-overlay">
    <div class="text-center">
        <h2 class="text-4xl md:text-6xl font-bold">{{ __('messages.welcome') }}</h2>
        <p class="mt-4 text-lg">{{ __('messages.flash_sale') }}</p>
        <a href="{{ route('products.index') }}" class="btn-primary mt-6 inline-block">{{ __('messages.shop') }}</a>
    </div>
</section>

<section class="py-12 container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">{{ __('messages.featured_products') }}</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        @foreach($products as $product)
            <x-product-card :product="$product" />
        @endforeach
    </div>
</section>

@if(isset($flashEnd))
<section class="py-12 bg-red-500 text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold">{{ __('messages.flash_sale') }} - {{ __('messages.ends_in') }}</h2>
        <div class="mt-4 flex justify-center">
            @include('components.countdown-timer', ['endTimestamp' => $flashEnd])
        </div>
    </div>
</section>
@endif

@endsection