@extends('front.layout.layout')
@section('content')
    <div class="home_landing">
    
    
        <x-home-banner :categories="$categories" :countries="$countries" />
        {{--
    <!-- All Categories Section -->
    <section class="all-categories pt-5">
        <div class="container">
            <h1>All Categories</h1>
            <div class="row">
                @forelse ($categories as $item)
                <div class="col-md-2 mb-4">
                    <a href="{{ route('category-business', ['slug' => $item->slug]) }}">
                        <div class="card">
                            <div class="card-body">
                                <div class=" text-center text-bold">{{ ucfirst($item->name) }}</div>
                            </div>
                        </div>
                    </a>
                </div>
                @empty
                <p>No categories available</p>
                @endforelse
            </div>
        </div>
    </section> --}}

        <!-- All Premium Businesses Section -->
        @if ($premiumBussiness->isNotEmpty())
            <section class="all-businesses mt-5 pb-5">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>Premium Businesses</h2>
                        <a href="{{ route('category-business') }}" class="see-more">See More</a>
                    </div>
                    <div class="swiper premiumSwiper my-5">
                        <div class="swiper-wrapper">
                            @foreach ($premiumBussiness as $biz)
                                <div class="swiper-slide">
                                    <x-vertical-card :biz="$biz" />
                                </div>
                            @endforeach
                        </div>
                        <!-- Navigation Buttons -->
                        <div class="swiper-button-next premium-next"></div>
                        <div class="swiper-button-prev premium-prev"></div>
                    </div>
                </div>
            </section>
        @endif

        <!-- All Feature Businesses Section -->
        @if ($featureBussiness->isNotEmpty())
            <section class="all-businesses mt-5 pb-5">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>Feature Businesses</h2>
                        <a href="{{ route('category-business') }}" class="see-more">See More</a>
                    </div>
                    <div class="swiper featureSwiper my-5">
                        <div class="swiper-wrapper">
                            @foreach ($featureBussiness as $biz)
                                <div class="swiper-slide">
                                    <x-vertical-card :biz="$biz" />
                                </div>
                            @endforeach
                        </div>
                        <!-- Navigation Buttons -->
                        <div class="swiper-button-next feature-next"></div>
                        <div class="swiper-button-prev feature-prev"></div>
                    </div>
                </div>
            </section>
        @endif

        <!-- All Popular Businesses Section -->
        @if ($popularBussiness->isNotEmpty())
            <section class="all-businesses mt-5 pb-5">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>Popular Businesses</h2>
                        <a href="{{ route('category-business') }}" class="see-more">See More</a>
                    </div>
                    <div class="swiper popularSwiper my-5">
                        <div class="swiper-wrapper">
                            @foreach ($popularBussiness as $biz)
                                <div class="swiper-slide">
                                    <x-vertical-card :biz="$biz" />
                                </div>
                            @endforeach
                        </div>
                        <!-- Navigation Buttons -->
                        <div class="swiper-button-next popular-next"></div>
                        <div class="swiper-button-prev popular-prev"></div>
                    </div>
                </div>
            </section>
        @endif



    </div>
@endsection