<x-website.layout>

    <!-- start banner -->
    @foreach ($sections as $section)
        @if ($section->key == 'products')
            @include('Website.partials._banner', ['page_title' => $section->title])
        @endif
    @endforeach
    <!-- end banner -->
    <!--==========================Products==========================-->
   <!--==========================Products==========================-->
<section class="products-section animate-section py-5">
    <div class="container">
      

        <!-- Products Grid -->
        <div class="row g-4">
            @foreach ($products as $product)
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="product-card">
                        <a href="{{ $product->link }}" class="product-link">
                            <div class="product-image-wrapper">
                                <div class="product-image" style="background-image: url({{ $product->image_path }});">
                                    <div class="product-overlay"></div>
                                    <div class="product-content">
                                        <h3 class="product-title">{{ $product->name }}</h3>
                                        @if($product->short_desc)
                                            <p class="product-description">{!! $product->short_desc !!}</p>
                                        @endif
                                        <div class="product-action">
                                            <span class="product-link-text">{{ __('website.more') }}</span>
                                            <i class="fa-solid fa-arrow-right ms-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- View More Button -->
        @if($products->count() > 0)
            <div class="text-center mt-5">
                <a href="{{ Path::AppUrl('/products') }}" class="btn-send">
                    <span class="btn-content">
                        <span class="btn-text" data-text="{{ __('website.view_all_products') }}">{{ __('website.view_all_products') }}</span>
                        <span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
                    </span>
                </a>
            </div>
        @endif
    </div>
</section>
<!--==========================Products==========================-->

    <!--==========================Products==========================-->




</x-website.layout>