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

@section('content')
<section class="hero fade-in" style="background-image: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('{{ asset($offersBg) }}'); background-size:cover; background-position:center;">
    <div class="container">
        <h1>SPECIAL OFFERS</h1>
        <p>UP TO 40% OFF • LIMITED TIME SALE</p>
        <a href="#offers" class="btn">SHOP DEALS</a>
    </div>
</section>

<section id="offers" class="section gray-bg fade-in">
    <div class="container">
        <h2 class="section-title">LIMITED TIME DEALS</h2>
        <div class="products-grid">
            @foreach($offers as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>
        <div style="text-align:center; margin-top:3rem;">
            <a href="{{ route('home') }}#products" class="btn">VIEW ALL PRODUCTS</a>
        </div>
    </div>
</section>

<section class="promo fade-in">
    <div class="container">
        <h2>ALREADY CLAIMED BY 2,847+ MEMBERS</h2>
        <p style="font-size:1.5rem; margin-bottom:1rem;">JOIN AVIO CLUB FOR EXCLUSIVE OFFERS</p>
        <form class="offers-newsletter-form">@csrf<input type="email" placeholder="Enter your email" required><button type="submit" class="btn" style="background:#fff; color:#000; border-color:#fff; margin-left:1rem;">JOIN NOW</button></form>
    </div>
</section>
@endsection