@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 py-8 lg:grid-cols-[1.25fr_.75fr] lg:py-12">
        <div class="rounded-lg bg-pantry-leaf p-8 text-white md:p-12">
            <p class="text-sm font-bold uppercase text-pantry-sunshine">Weekly grocery drop</p>
            <h1 class="mt-3 max-w-2xl text-4xl font-black leading-tight md:text-6xl">Fresh deals for your whole pantry.</h1>
            <p class="mt-4 max-w-xl text-lg text-green-50">Shop essentials, specials, household care, baby items and local delivery in one bright supermarket basket.</p>
            <a class="mt-6 btn-primary bg-pantry-sunshine text-pantry-ink hover:bg-yellow-300" href="{{ route('shop.index', ['specials' => 1]) }}">Shop Specials</a>
        </div>
        <div class="grid gap-4">
            <div class="panel p-5">
                <div class="text-sm font-bold uppercase text-pantry-tomato">Today only</div>
                <div class="mt-2 text-2xl font-black">Tastic Boiled Rice (Parboiled) 2 kg</div>
            </div>
            <div class="panel p-5">
                <div class="text-sm font-bold uppercase text-pantry-leaf">Delivery</div>
                <div class="mt-2 text-2xl font-black">Choose a local slot that suits your day</div>
            </div>
        </div>
    </div>
</section>

<section id="categories" class="mx-auto max-w-7xl px-4 py-10">
    <div class="flex items-center justify-between">
        <h2 class="text-2xl font-black">Shop by Category</h2>
        <a href="{{ route('shop.index') }}" class="font-semibold text-pantry-leaf">View all</a>
    </div>
    <div class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-6">
        @foreach ($categories as $category)
            <a class="panel p-4 text-center font-bold hover:border-pantry-leaf" href="{{ route('shop.index', ['category' => $category->slug]) }}">{{ $category->name }}</a>
        @endforeach
    </div>
</section>

@foreach ([['Weekly Specials', $specials], ['Popular Products', $popular], ['New Arrivals', $newArrivals]] as [$heading, $products])
    <section class="mx-auto max-w-7xl px-4 py-8">
        <h2 class="text-2xl font-black">{{ $heading }}</h2>
        <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($products as $product)
                <x-product-card :product="$product" />
            @endforeach
        </div>
    </section>
@endforeach

<section class="bg-white px-4 py-12">
    <div class="mx-auto grid max-w-7xl gap-4 md:grid-cols-5">
        @foreach (['Secure online payments', 'Convenient grocery delivery', 'Great prices', 'Fresh products', 'Easy ordering'] as $reason)
            <div class="rounded-lg border border-green-100 p-5 text-center font-bold">{{ $reason }}</div>
        @endforeach
    </div>
</section>
@endsection