@if ($topCategories)
    <section class="section section-top-categories df__pt df__pb secondary-bg position-relative">
        <div class="container">
            <div class="row position-relative">
                <div class="col-12">
                    <div class="heading">
                        <h2 class="subtitle subtitle-h3">Les Catégories</h2>
                        <h3 class=" title title-h2 title-h2-center">Explorez Notre Univers</h3>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="row categories-list">
                        @foreach ($topCategories as $categorie)
                            <div class="col-6 col-md-4 col-lg-3 animated-item">
                                <a class="w-100" href="/produits/#{{ urlencode($categorie['name']) }}" title="{{ $categorie['name'] }}">
                                    <div class="w-100 category-item">
                                        <div class="category-head">
                                            <div class="category-img">
                                                @if (isset($categorie['bankimage']) && $categorie['bankimage'] !== null)
                                                    <x-lazyimage width="175" height="175" :src="env('MIX_BASE_URL') . $categorie['bankimage']['thumbnail_image']"
                                                        :placeholder="env('MIX_BASE_URL') . $categorie['bankimage']['thumbnail_image']" :alt="$categorie['name'] . ' - Atelier Du Sushi'" :class="''" />
                                                @else
                                                    <x-lazyimage width="175" height="175" :src="env('MIX_APP_URL') . env('MIX_DEFAULT_IMAGE')"
                                                        :placeholder="env('MIX_APP_URL') . env('MIX_DEFAULT_IMAGE')" :alt="$categorie['name'] . ' - Atelier Du Sushi'" :class="''" />
                                                @endif
                                            </div>
                                            <div class="category-name">
                                                <h3 class="title title-h3">{{ $categorie['name'] }}</h3>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                    <div class="row">
                        <div class="col-md-12 m-0-auto text-center">
                            <a class="buttons buttons-theme buttons-md  mt_25 mb_0" href="{{ route('produits') }}">
                            Découvrir notre carte
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif