@extends('layouts.app')
@section('title', __('nav.catalogue'))

@section('content')
    <div class="shell py-stack-lg">
        @foreach ($categories as $category)
            <section id="{{ $category->slug }}" class="mb-stack-lg">
                <x-section-heading :title="$category->name" :eyebrow="$category->tagline"
                                   :href="route('category', $category)" />
                <div class="grid grid-cols-2 gap-4 md:gap-gutter lg:grid-cols-4">
                    @foreach ($category->products->take(4) as $product)
                        <x-product-card :product="$product" />
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>
@endsection