@props(['deals'])

@php
    $topDiscount = $deals->max(fn ($deal) => $deal->product->discount_percent);
    $endsAt = $deals->pluck('ends_at')->filter()->min();
@endphp

@if ($deals->isNotEmpty())
    <section class="container pt-4" aria-labelledby="flash-sale-heading">
        <ul class="list-unstyled row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3 mb-0">
            <li class="col">
                <div class="sm-flash-panel">
                    <h2 id="flash-sale-heading" class="sm-flash-title">Flash Sale</h2>
                    @if ($topDiscount)
                        <span class="sm-flash-discount">Up to {{ $topDiscount }}% off</span>
                    @endif
                    @if ($endsAt)
                        <div class="small mt-3">Don't miss out</div>
                        <div class="sm-countdown" role="timer" data-saruar-countdown="{{ $endsAt->toIso8601String() }}">
                            <div class="small mb-1" data-countdown-days hidden></div>
                            <span data-countdown-hours>00</span> : <span data-countdown-minutes>00</span> : <span data-countdown-seconds>00</span>
                        </div>
                    @endif
                    <a class="btn sm-btn-primary w-100 mt-3" href="{{ route('storefront.offers') }}">View All <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
                </div>
            </li>

            @foreach ($deals as $deal)
                <li class="col"><x-storefront.product-card :product="$deal->product" /></li>
            @endforeach
        </ul>
    </section>
@endif