@extends('layouts.app')

@section('title', __('Latest Offers | SavEX'))

@section('description', __('Explore the latest SavEX offers, products, services, deals, and digital shopping opportunities available through the app.'))

@section('canonical', route('offers', ['locale' => app()->getLocale()]))

@section('content')
<section id="latest-offers" class="offers-section section-padding animate-section">
    <div class="container">
        <div class="section-head d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-4 mb-5" data-animate="fade-up">
            <div>
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                    <span class="eyebrow-dot"></span>
                    {{ __('Latest Offers') }}
                </div>

                <h2 class="section-title mb-0" data-animate="fade-up">
                    {!! __('Discover the latest <span>SavEX offers</span>') !!}
                </h2>
            </div>

            <div class="offers-controls d-flex gap-2">
                <button class="slider-btn" type="button" data-offers-prev aria-label="{{ __('Previous') }}">
                    ‹
                </button>

                <button class="slider-btn" type="button" data-offers-next aria-label="{{ __('Next') }}">
                    ›
                </button>
            </div>
        </div>

        <div
            class="offers-slider"
            data-offers-slider
            data-ajax-url="{{ route('ajax.offers', ['locale' => app()->getLocale()]) }}"
        >
            @for ($i = 0; $i < 8; $i++)
                <article class="offer-card skeleton-card">
                    <div class="offer-image-wrap skeleton-box"></div>

                    <div class="offer-content">
                        <span class="skeleton-line skeleton-line-sm"></span>
                        <span class="skeleton-line"></span>
                        <span class="skeleton-line skeleton-line-md"></span>
                    </div>
                </article>
            @endfor
        </div>
    </div>
</section>
@endsection