@php
    $foodRestaurants = collect($foodRestaurants ?? []);
    $foodCuisines = collect($foodCuisines ?? []);
    $foodProducts = collect($foodProducts ?? []);
    $foodQuery = array_filter(['zone' => $selectedZone?->slug, 'service' => 'food']);
    $foodHeroProduct = $foodProducts->first();
    $foodHeroImage = $foodHeroProduct ? \App\Support\StorefrontPresenter::productImage($foodHeroProduct) : null;
    $foodFallbackCuisines = collect($categories ?? [])->pluck('name')->filter()->values();
    $foodHeroEta = $foodHeroProduct?->preparation_time_minutes ? ((int) $foodHeroProduct->preparation_time_minutes.' mins') : data_get($foodHeroProduct?->store?->meta, 'eta_label');
    $foodCoupons = collect($headerCoupons ?? []);
    $foodPromoCoupons = $foodCoupons->take(2)->values();
@endphp

<div class="sf-food-home">
    <nav class="sf-food-tabs" aria-label="Food categories">
        <a href="{{ route('storefront.home', $foodQuery) }}" class="is-active"><span>&#9832;</span><strong>All</strong></a>
        @forelse($foodCuisines->take(7) as $cuisine)
            @php
                $cuisineImage = \App\Support\StorefrontPresenter::mediaUrl($cuisine->image);
            @endphp
            <a href="{{ route('storefront.search', $foodQuery + ['q' => $cuisine->name]) }}">
                <span>@if($cuisineImage)<img src="{{ $cuisineImage }}" alt="" loading="lazy">@else{{ Str::upper(Str::substr($cuisine->name, 0, 1)) }}@endif</span>
                <strong>{{ $cuisine->name }}</strong>
            </a>
        @empty
            @foreach($foodFallbackCuisines->take(7) as $cuisineName)
                <a href="{{ route('storefront.search', $foodQuery + ['q' => $cuisineName]) }}"><span>{{ Str::upper(Str::substr($cuisineName, 0, 1)) }}</span><strong>{{ $cuisineName }}</strong></a>
            @endforeach
        @endforelse
        <button type="button" id="foodMoreTrigger"><span>&bull;&bull;&bull;</span><strong>More</strong></button>
    </nav>

    <section class="sf-food-hero">
        <a href="{{ route('storefront.search', $foodQuery) }}" class="sf-food-hero__main">
            <div class="sf-food-hero__copy">
                <h1>Delicious food<br><em>delivered fast</em></h1>
                <p>Order from your favorite restaurants and enjoy lightning-fast delivery.</p>
                @if($foodHeroEta)<strong><span>&#9889;</span> {{ $foodHeroEta }}</strong>@endif
                <b>Order Now <span>&rarr;</span></b>
            </div>
            @if($foodHeroImage)
                <img class="sf-food-hero__image" src="{{ $foodHeroImage }}" alt="{{ $foodHeroProduct->name }}" fetchpriority="high" onerror="this.hidden=true;this.nextElementSibling.hidden=false">
            @endif
            <svg class="sf-food-hero__fallback" viewBox="0 0 500 300" aria-hidden="true" @if($foodHeroImage) hidden @endif>
                <ellipse cx="310" cy="262" rx="155" ry="20" fill="#080808" opacity=".55"/>
                <path d="M160 138c12-67 71-100 148-100s137 33 149 100z" fill="#f1a13a"/><path d="M178 119c31-39 74-55 130-55 57 0 101 17 130 55" fill="none" stroke="#ffc875" stroke-width="12"/>
                <path d="M171 151h278l-25 34H195z" fill="#54a83e"/><path d="M184 184h250l-12 30H196z" fill="#f1ca27"/><path d="M192 212h230c-7 54-47 70-115 70-67 0-107-16-115-70" fill="#d77a22"/><path d="M188 198c36-29 72-24 118 0 42-24 81-28 121 0" fill="none" stroke="#8b3c20" stroke-width="28" stroke-linecap="round"/>
                <circle cx="218" cy="93" r="5" fill="#6f3d17"/><circle cx="269" cy="77" r="5" fill="#6f3d17"/><circle cx="333" cy="78" r="5" fill="#6f3d17"/><circle cx="392" cy="102" r="5" fill="#6f3d17"/>
            </svg>
            <i><span></span><span></span><span></span></i>
        </a>
        @if($foodPromoCoupons->isNotEmpty() || ($freeDeliveryThreshold ?? null) !== null)
            <div class="sf-food-hero__promos">
                @foreach($foodPromoCoupons as $coupon)
                    <a href="{{ route('storefront.offers', $foodQuery) }}" class="sf-food-promo is-orange"><div><strong>{{ $coupon->title ?: \App\Support\StorefrontPresenter::couponDiscountLabel($coupon) }}</strong><span>{{ \App\Support\StorefrontPresenter::couponMinimumLabel($coupon) }}</span><b>{{ $coupon->code }} &rarr;</b></div></a>
                @endforeach
                @if(($freeDeliveryThreshold ?? null) !== null)
                    <a href="{{ route('storefront.cart') }}" class="sf-food-promo is-green"><div><strong>Free Delivery</strong><span>on orders above {{ \App\Support\StorefrontPresenter::money($freeDeliveryThreshold) }}</span><b>View Cart &rarr;</b></div></a>
                @endif
            </div>
        @endif
    </section>

    <section class="sf-food-quick-actions" aria-label="Food shortcuts">
        <a href="{{ route('storefront.offers', $foodQuery) }}"><span>%</span><strong>Offers</strong></a>
        <a href="{{ route('storefront.search', $foodQuery) }}"><span>&#9825;</span><strong>Collections</strong></a>
        <a href="{{ route('storefront.stores.index', $foodQuery) }}"><span>&#9889;</span><strong>Fast Delivery</strong></a>
        <a href="{{ route('storefront.stores.index', $foodQuery) }}"><span>&#10024;</span><strong>Newly Opened</strong></a>
    </section>

    <section class="sf-food-section sf-food-restaurants">
        <header><h2>Top Rated Restaurants</h2><a href="{{ route('storefront.stores.index', $foodQuery) }}">See all &rarr;</a></header>
        <div class="sf-food-restaurant-rail">
            @forelse($foodRestaurants as $restaurant)
                @php
                    $restaurantCover = \App\Support\StorefrontPresenter::storeCover($restaurant)
                        ?: ($restaurant->products->first() ? \App\Support\StorefrontPresenter::productImage($restaurant->products->first()) : null);
                    $restaurantEta = data_get($restaurant->meta, 'eta_label');
                    $restaurantTags = collect((array) data_get($restaurant->meta, 'cuisines', []))->filter()->take(2)->join(', ');
                    $restaurantUrl = route('storefront.stores.show', ['store' => $restaurant] + $foodQuery);
                    $restaurantRatingCount = (int) ($restaurant->reviews_count ?? 0);
                    $restaurantRating = ((float) ($restaurant->reviews_avg_rating ?? 0) > 0 && $restaurantRatingCount > 0)
                        ? number_format((float) $restaurant->reviews_avg_rating, 1)
                        : null;
                @endphp
                <article class="sf-food-restaurant-card">
                    <a href="{{ $restaurantUrl }}" class="sf-food-restaurant-card__media">
                        @if($restaurantCover)<img src="{{ $restaurantCover }}" alt="{{ $restaurant->name }}" loading="lazy">@else<span>{{ Str::upper(Str::substr($restaurant->name, 0, 1)) }}</span>@endif
                        @if($restaurant->is_featured)<b>PROMO</b>@endif
                        @if($restaurantRating)<i aria-label="{{ $restaurantRating }} rating from {{ $restaurantRatingCount }} reviews">{{ $restaurantRating }}</i>@endif
                    </a>
                    <div><a href="{{ $restaurantUrl }}"><h3>{{ $restaurant->name }}</h3></a><p>{{ $restaurantTags ?: $restaurant->description }}</p>@if($restaurantEta || $restaurant->delivery_radius_km)<small>@if($restaurantEta){{ $restaurantEta }}@endif @if($restaurant->delivery_radius_km)&bull; {{ number_format((float) $restaurant->delivery_radius_km, 1) }} km radius @endif</small>@endif<strong>{{ $restaurant->minimum_order_amount ? \App\Support\StorefrontPresenter::money($restaurant->minimum_order_amount).' minimum' : 'Order now' }}</strong></div>
                </article>
            @empty
                @foreach($foodProducts->take(5) as $product)
                    @php
                        $productImage = \App\Support\StorefrontPresenter::productImage($product);
                    @endphp
                    <article class="sf-food-restaurant-card"><a href="{{ route('storefront.products.show', ['product' => $product] + $foodQuery) }}" class="sf-food-restaurant-card__media">@if($productImage)<img src="{{ $productImage }}" alt="{{ $product->name }}" loading="lazy">@else<span>{{ Str::upper(Str::substr($product->name, 0, 1)) }}</span>@endif @if(($product->reviews_avg_rating ?? 0) > 0)<i>{{ number_format((float) $product->reviews_avg_rating, 1) }}</i>@endif</a><div><h3>{{ $product->store?->name ?: $product->name }}</h3><p>{{ $product->name }}</p>@if($product->preparation_time_minutes)<small>{{ (int) $product->preparation_time_minutes }} mins</small>@endif<strong>{{ \App\Support\StorefrontPresenter::money($product->base_price) }}</strong></div></article>
                @endforeach
            @endforelse
            @if($foodRestaurants->isNotEmpty() && $foodRestaurants->count() < 5)
                @foreach($foodProducts->take(5 - $foodRestaurants->count()) as $product)
                    @php
                        $productImage = \App\Support\StorefrontPresenter::productImage($product);
                    @endphp
                    <article class="sf-food-restaurant-card"><a href="{{ route('storefront.products.show', ['product' => $product] + $foodQuery) }}" class="sf-food-restaurant-card__media">@if($productImage)<img src="{{ $productImage }}" alt="{{ $product->name }}" loading="lazy">@else<span>{{ Str::upper(Str::substr($product->name, 0, 1)) }}</span>@endif @if(($product->reviews_avg_rating ?? 0) > 0)<i>{{ number_format((float) $product->reviews_avg_rating, 1) }}</i>@endif</a><div><h3>{{ $product->store?->name ?: $product->name }}</h3><p>{{ $product->name }}</p>@if($product->preparation_time_minutes)<small>{{ (int) $product->preparation_time_minutes }} mins</small>@endif<strong>{{ \App\Support\StorefrontPresenter::money($product->base_price) }}</strong></div></article>
                @endforeach
            @endif
        </div>
    </section>

    <section class="sf-food-benefits" aria-label="Food delivery benefits">
        <article><span>&#9889;</span><div><strong>Fast Delivery</strong><small>Store-managed ETA</small></div></article>
        <article><span>%</span><div><strong>Best Offers</strong><small>Great deals & discounts</small></div></article>
        <article><span>&#9733;</span><div><strong>Top Rated</strong><small>Best restaurants</small></div></article>
        <article><span>&#10003;</span><div><strong>Safe & Hygienic</strong><small>Contactless delivery</small></div></article>
        <article><span>&#9646;</span><div><strong>Easy Payment</strong><small>Multiple payment options</small></div></article>
    </section>

    <section class="sf-food-section sf-food-cuisines">
        <header><h2>What's on your mind?</h2><a href="{{ route('storefront.search', $foodQuery) }}">See all &rarr;</a></header>
        <div class="sf-food-cuisine-rail">
            @forelse($foodCuisines as $cuisine)
                @php
                    $cuisineImage = \App\Support\StorefrontPresenter::mediaUrl($cuisine->image);
                @endphp
                <a href="{{ route('storefront.search', $foodQuery + ['q' => $cuisine->name]) }}"><span>@if($cuisineImage)<img src="{{ $cuisineImage }}" alt="" loading="lazy">@else{{ Str::upper(Str::substr($cuisine->name, 0, 1)) }}@endif</span><strong>{{ $cuisine->name }}</strong></a>
            @empty
                @foreach($foodFallbackCuisines as $cuisineName)<a href="{{ route('storefront.search', $foodQuery + ['q' => $cuisineName]) }}"><span>{{ Str::upper(Str::substr($cuisineName, 0, 1)) }}</span><strong>{{ $cuisineName }}</strong></a>@endforeach
            @endforelse
        </div>
    </section>

    <section class="sf-food-section sf-food-deals">
        <header><h2>Today's Deals</h2><a href="{{ route('storefront.offers', $foodQuery) }}">See all &rarr;</a></header>
        <div class="sf-food-deal-rail">
            @forelse($foodProducts->take(8) as $product)
                @php
                    $dealImage = \App\Support\StorefrontPresenter::productImage($product);
                    $dealVariant = $product->variants->firstWhere('is_default', true) ?: $product->variants->first();
                    $dealPrice = $dealVariant?->price ?? $product->base_price;
                @endphp
                @php($dealCompare = $dealVariant?->compare_price ?? $product->compare_price)
                <a href="{{ route('storefront.products.show', ['product' => $product] + $foodQuery) }}" class="sf-food-deal-card"><div>@if($dealCompare && (float) $dealCompare > (float) $dealPrice)<b>{{ (int) round((((float) $dealCompare - (float) $dealPrice) / (float) $dealCompare) * 100) }}% OFF</b>@endif<strong>{{ $product->name }}</strong><span>{{ \App\Support\StorefrontPresenter::money($dealPrice) }}</span><small>Order now &rarr;</small></div>@if($dealImage)<img src="{{ $dealImage }}" alt="" loading="lazy">@else<i>{{ Str::upper(Str::substr($product->name, 0, 1)) }}</i>@endif</a>
            @empty
                @foreach($foodCoupons->take(2) as $coupon)
                    <a href="{{ route('storefront.offers', $foodQuery) }}" class="sf-food-deal-card"><div><b>{{ $coupon->code }}</b><strong>{{ $coupon->title ?: \App\Support\StorefrontPresenter::couponDiscountLabel($coupon) }}</strong><span>{{ \App\Support\StorefrontPresenter::couponMinimumLabel($coupon) }}</span><small>Explore &rarr;</small></div><i>%</i></a>
                @endforeach
            @endforelse
        </div>
    </section>
</div>