@extends('layout.app')
@section('content')
    <!-- ========== Hero Section Start ========== -->
    <section class="pt-6">
        <div class="container">
            <div class="relative">
                <div
                    class="home-four-hero-slider rounded-3xl relative md:bg-transparent bg-[#FFEB69] sellzy-slider"
                    data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "loop": true, "arrows": true, "infinite": true, "dots": true, "appendArrows": ".home-four-hero-slider-nav", "autoplay": true, "autoplaySpeed": 7000, "fade": true, "responsive": [{"breakpoint": 1025, "settings": {"arrows": false}}]}'
                >

                    {{-- ── Slide 1 ── --}}
                    <div
                        class="lg:p-0 p-8 pb-15 md:bg-[url(../images/home-4/hero-1.png)] bg-center bg-no-repeat bg-cover rounded-3xl xl:pl-[177px] lg:pl-[100px] single-hero-slider-item flex! items-center md:h-[600px]! h-[500px]!"
                        data-wow-delay=".2s"
                    >
                        <div class="single-hero-slider-content max-w-[520px]">
                            <div class="flex items-center gap-x-2 mb-2">
                            <span
                                class="inline-block bg-primary/10 text-primary font-semibold text-sm leading-[22px] px-3 py-1 rounded-full">
                                🔥 New Season, New You
                            </span>
                            </div>
                            <h2 class="py-3 text-black font-bold leading-tight">
                                Discover the <br class="hidden lg:block"/>
                                Season's Hottest <br class="hidden lg:block"/>
                                Styles
                            </h2>
                            <p class="text-black/70 mb-6 text-base leading-relaxed">
                                Curated trends, bold colors & fresh silhouettes —<br class="hidden lg:block"/>
                                crafted to elevate your everyday look.
                            </p>
                            <div class="flex items-center gap-x-4">
                                <a class="btn btn-primary text-white btn-large rounded-[60px] group py-2 pl-5 pr-3"
                                   href="{{ route('front.shop') }}">
                                    Shop Now
                                    <span
                                        class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                </span>
                                </a>
                                <a href="{{ route('front.shop') }}"
                                   class="text-black font-semibold text-sm underline underline-offset-4 hover:text-primary transition-colors duration-200">
                                    View All Collections
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- ── Slide 2 ── --}}
                    <div
                        class="lg:p-0 p-8 pb-15 md:bg-[url(../images/home-4/hero-2.png)] bg-center bg-no-repeat bg-cover rounded-3xl xl:pl-[177px] lg:pl-[100px] single-hero-slider-item flex! items-center md:h-[600px]! h-[500px]!"
                        data-wow-delay=".2s"
                    >
                        <div class="single-hero-slider-content max-w-[520px]">
                            <div class="flex items-center gap-x-2 mb-2">
                            <span
                                class="inline-block bg-primary/10 text-primary font-semibold text-sm leading-[22px] px-3 py-1 rounded-full">
                                ❄️ Winter Collection
                            </span>
                            </div>
                            <h2 class="py-3 text-black font-bold leading-tight">
                                Stay Warm,<br class="hidden lg:block"/>
                                Stay Stylish
                            </h2>
                            <p class="text-black/70 mb-6 text-base leading-relaxed">
                                Premium sweaters, hoodies &amp; coats —<br class="hidden lg:block"/>
                                built for the cold, designed for the streets.
                            </p>
                            <div class="flex items-center gap-x-4">
                                <a class="btn btn-primary text-white btn-large rounded-[60px] group py-2 pl-5 pr-3"
                                   href="{{ route('front.shop') }}">
                                    Shop Now
                                    <span
                                        class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                </span>
                                </a>
                                <a href="{{ route('front.shop') }}"
                                   class="text-black font-semibold text-sm underline underline-offset-4 hover:text-primary transition-colors duration-200">
                                    Explore Winter Wear
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- ── Slide 3 ── --}}
                    <div
                        class="lg:p-0 p-8 pb-15 md:bg-[url(../images/home-4/hero-3.png)] bg-center bg-no-repeat bg-cover rounded-3xl xl:pl-[177px] lg:pl-[100px] single-hero-slider-item flex! items-center md:h-[600px]! h-[500px]!"
                        data-wow-delay=".2s"
                    >
                        <div class="single-hero-slider-content max-w-[520px]">
                            <div class="flex items-center gap-x-2 mb-2">
                            <span
                                class="inline-block bg-primary/10 text-primary font-semibold text-sm leading-[22px] px-3 py-1 rounded-full">
                                👑 Luxury Essentials
                            </span>
                            </div>
                            <h2 class="py-3 text-black font-bold leading-tight">
                                Fashion for the<br class="hidden lg:block"/>
                                Modern Elite
                            </h2>
                            <p class="text-black/70 mb-6 text-base leading-relaxed">
                                Timeless silhouettes &amp; high-quality fabrics —<br class="hidden lg:block"/>
                                dressed for those who demand the best.
                            </p>
                            <div class="flex items-center gap-x-4">
                                <a class="btn btn-primary text-white btn-large rounded-[60px] group py-2 pl-5 pr-3"
                                   href="{{ route('front.shop') }}">
                                    Shop Now
                                    <span
                                        class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                </span>
                                </a>
                                <a href="{{ route('front.shop') }}"
                                   class="text-black font-semibold text-sm underline underline-offset-4 hover:text-primary transition-colors duration-200">
                                    Browse Luxury Picks
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- ── Slide 4 ── --}}
                    <div
                        class="lg:p-0 p-8 pb-15 md:bg-[url(../images/home-4/hero-4.png)] bg-center bg-no-repeat bg-cover rounded-3xl xl:pl-[177px] lg:pl-[100px] single-hero-slider-item flex! items-center md:h-[600px]! h-[500px]!"
                        data-wow-delay=".2s"
                    >
                        <div class="single-hero-slider-content max-w-[520px]">
                            <div class="flex items-center gap-x-2 mb-2">
                            <span
                                class="inline-block bg-primary/10 text-primary font-semibold text-sm leading-[22px] px-3 py-1 rounded-full">
                                ✨ Handcrafted Elegance
                            </span>
                            </div>
                            <h2 class="py-3 text-black font-bold leading-tight">
                                Wrap Yourself<br class="hidden lg:block"/>
                                in Winter Elegance
                            </h2>
                            <p class="text-black/70 mb-6 text-base leading-relaxed">
                                Premium fabrics &amp; artisan craftsmanship —<br class="hidden lg:block"/>
                                because your wardrobe deserves the finest.
                            </p>
                            <div class="flex items-center gap-x-4">
                                <a class="btn btn-primary text-white btn-large rounded-[60px] group py-2 pl-5 pr-3"
                                   href="{{ route('front.shop') }}">
                                    Shop Now
                                    <span
                                        class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                </span>
                                </a>
                                <a href="{{ route('front.shop') }}"
                                   class="text-black font-semibold text-sm underline underline-offset-4 hover:text-primary transition-colors duration-200">
                                    Shop the Collection
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- ── Slide 5 ── --}}
                    <div
                        class="lg:p-0 p-8 pb-15 md:bg-[url(../images/home-4/hero-5.png)] bg-center bg-no-repeat bg-cover rounded-3xl xl:pl-[177px] lg:pl-[100px] single-hero-slider-item flex! items-center md:h-[600px]! h-[500px]!"
                        data-wow-delay=".2s"
                    >
                        <div class="single-hero-slider-content max-w-[520px]">
                            <div class="flex items-center gap-x-2 mb-2">
                            <span
                                class="inline-block bg-primary/10 text-primary font-semibold text-sm leading-[22px] px-3 py-1 rounded-full">
                                💥 Limited Stock
                            </span>
                            </div>
                            <h2 class="py-3 text-black font-bold leading-tight">
                                Big Style,<br class="hidden lg:block"/>
                                Unbeatable Prices
                            </h2>
                            <p class="text-black/70 mb-6 text-base leading-relaxed">
                                Bestselling designs at prices you'll love —<br class="hidden lg:block"/>
                                grab yours before it's gone.
                            </p>
                            <div class="flex items-center gap-x-4">
                                <a class="btn btn-primary text-white btn-large rounded-[60px] group py-2 pl-5 pr-3"
                                   href="{{ route('front.shop') }}">
                                    Shop Now
                                    <span
                                        class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                    <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                </span>
                                </a>
                                <a href="{{ route('front.shop') }}"
                                   class="text-black font-semibold text-sm underline underline-offset-4 hover:text-primary transition-colors duration-200">
                                    See All Deals
                                </a>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Slider Nav Arrows --}}
                <div
                    class="home-four-hero-slider-nav absolute top-1/2 -translate-y-1/2 right-0 w-full flex items-center justify-between px-6"></div>
            </div>
        </div>
    </section>
    <!-- ========== Hero Section End ========== -->

    <!-- ========== Category Section Start ========== -->
    <div class="py-[70px]">
        <div class="container">
            <div class="flex flex-wrap justify-center gap-y-10">
                @foreach($landingCat as $langC)
                    <div class="w-1/2 md:w-1/3 xl:w-1/5 px-4">
                        <div
                            data-wow-delay="0.2s"
                            class="flex flex-col items-center text-center wow animate__animated animate__fadeInUp"
                        >
                            {!! $langC->svg !!}

                            <a
                                href="{{ route('front.shop', ['category' => $langC->id]) }}"
                                class="hover:text-primary pt-4 pb-2.5 font-semibold text-light-primary-text"
                            > {{ $langC->title }}</a
                            >
                            <p class="text-sm leading-[22px]"> {{ $langC->products_count ?? 0 }} Items</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- ========== Category Section End ========== -->

    <!-- ========== Hot Picks Section Start ========== -->
    @include('front.sections.hot-picks')
    <!-- ========== Hot Picks Section End ========== -->

    <!-- ========== Promo Section Start ========== -->
    <section class="pb-[70px]">
        <div class="container">
            <div class="grid grid-cols-12 gap-6">
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-6 wow animate__animated animate__fadeInUp"
                    data-wow-delay="0.2s"
                >
                    <div
                        class="flex flex-col justify-end text-center min-h-[844px] rounded-2xl bg-[url(../images/home-4/man-woman.png)] bg-[#FFF5FB] bg-top bg-cover bg-no-repeat"
                    >
                        <div class="py-12 bg-[#FFD6EF] rounded-b-2xl">
                            <div>
                  <span
                      class="text-light-primary-text bg-warning-light px-3 py-1 rounded-full text-base font-semibold"
                  >
                    Enjoy 20% savings
                  </span>
                            </div>
                            <h3 class="py-1.5">From Runway to Your Closet</h3>
                            <p class="pb-4 text-light-primary-text">
                                Explore top picks and must-have fashion essentials today.
                            </p>
                            <a class='btn btn-primary text-white font-semibold btn-large rounded-[60px] text-sm leading-6 group py-1.5 pl-4 pr-2'
                               href='{{route('front.shop',['category'=>'53'])}}'>
                                Shop Now
                                <span
                                    class="size-8 ml-0.5 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300"
                                >
                    <i
                        class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"
                    ></i>
                  </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay="0.3s"
                >
                    <div
                        class="flex flex-col text-center rounded-2xl bg-[#FFF9D3] bg-bottom bg-no-repeat"
                    >
                        <div
                            class="py-[33px] lg:px-[66px] px-11 bg-[#FFEB69] rounded-t-2xl"
                        >
                            <div>
                  <span
                      class="text-light-primary-text bg-[#FFD6EF] px-3 py-1 rounded-full text-base font-semibold"
                  >
                    Enjoy 20% savings
                  </span>
                            </div>
                            <h3 class="py-1.5">Women&apos;s Clothing</h3>
                            <p class="pb-4 text-light-primary-text">
                                Shop exclusive collections and express your unique style.
                            </p>
                            <a class='btn btn-primary text-white font-semibold btn-large rounded-[60px] text-sm leading-6 group py-1.5 pl-4 pr-2'
                               href='{{route('front.shop',['category'=>'48'])}}'>
                                Shop Now
                                <span
                                    class="size-8 ml-0.5 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300"
                                >
                    <i
                        class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"
                    ></i>
                  </span>
                            </a>
                        </div>
                        <div
                            class="min-h-[586px] bg-[url('../images/home-4/black-dress-woman.png')] bg-no-repeat bg-center rounded-b-2xl"
                        ></div>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay="0.4s"
                >
                    <div
                        class="flex flex-col justify-end text-center min-h-[844px] rounded-2xl bg-[url(../images/home-4/kid-with-skateboard.jpg)] bg-center bg-cover bg-no-repeat"
                    >
                        <div
                            class="py-[33px] lg:px-11 px-[22px] bg-[#A0E2E0] rounded-b-2xl"
                        >
                            <div>
                  <span
                      class="text-light-primary-text bg-[#FFEB69] px-3 py-1 rounded-full text-base font-semibold"
                  >
                    Enjoy 20% savings
                  </span>
                            </div>
                            <h3 class="py-1.5">Kids & Baby Clothing</h3>
                            <p class="pb-4 text-light-primary-text">
                                Shop exclusive collections and express your unique style.
                            </p>
                            <a class='btn btn-primary text-white font-semibold btn-large rounded-[60px] text-sm leading-6 group py-1.5 pl-4 pr-2'
                               href='{{route('front.shop',['category'=>'49'])}}'>
                                Shop Now
                                <span
                                    class="size-8 ml-0.5 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300"
                                >
                    <i
                        class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"
                    ></i>
                  </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== Promo Section End ========== -->

    <!-- ========== Deal Section Start ========== -->
    @include('front.sections.categorise', [
        'fashionCategories' => $fashionCategories
    ])
    <!-- ========== Deal Section End ========== -->

    <!-- ========== Marquee Text Section Start ========== -->
    <section
        class="pb-12 wow animate__animated animate__fadeInUp"
        data-wow-delay="0.2s"
    >
        <div class="xl:max-w-[1728px] w-full mx-auto px-4 xl:px-0">
            <div
                class="flex items-center overflow-x-hidden bg-primary-lighter py-8"
            >
                <!-- ========== Marquee Text Start ========== -->
                <div
                    class="flex items-center justify-center animate-marquee gap-x-15 pr-[30px]"
                >
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                </div>
                <div
                    class="flex items-center justify-center animate-marquee gap-x-15 pl-[30px]"
                >
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                    <div class="flex items-center gap-x-15 whitespace-nowrap">
                        <svg
                            width="28"
                            height="28"
                            viewBox="0 0 28 28"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M14 0L16.6738 9.36891L26.1244 7L19.3475 14L26.1244 21L16.6738 18.6311L14 28L11.3262 18.6311L1.87564 21L8.65248 14L1.87564 7L11.3262 9.36891L14 0Z"
                                fill="#04535C"
                            />
                        </svg>
                        <h5 class="text-primary-darker">Free shipment</h5>
                    </div>
                </div>
                <!-- ========== Marquee Text End ========== -->
            </div>
        </div>
    </section>
    <!-- ========== Marquee Text Section End ========== -->

    <!-- ========== Logo Section Start ========== -->
    <div class="pb-[70px]">
        <div class="container">
            <div class="flex flex-wrap justify-center xl:justify-between gap-y-8">
                <div class="w-1/2 md:w-1/3 xl:w-auto flex justify-center">
                    <img
                        src="{{asset('assets/images/home-4/cowshed.png')}}"
                        alt="Cowshed"
                        class="wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.2s"
                    />
                </div>
                <div class="w-1/2 md:w-1/3 xl:w-auto flex justify-center">
                    <img
                        src="{{asset('assets/images/home-4/ninoa.png')}}"
                        alt="Ninoa"
                        class="wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.3s"
                    />
                </div>
                <div class="w-1/2 md:w-1/3 xl:w-auto flex justify-center">
                    <img
                        src="{{asset('assets/images/home-4/claudia.png')}}"
                        alt="Claudia"
                        class="wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.4s"
                    />
                </div>
                <div class="w-1/2 md:w-1/3 xl:w-auto flex justify-center">
                    <img
                        src="{{asset('assets/images/home-4/minut.png')}}"
                        alt="Minut"
                        class="wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.5s"
                    />
                </div>
                <div class="w-1/2 md:w-1/3 xl:w-auto flex justify-center">
                    <img
                        src="{{asset('assets/images/home-4/orchard.png')}}"
                        alt="Orchard"
                        class="wow animate__animated animate__fadeInUp"
                        data-wow-delay="0.6s"
                    />
                </div>
            </div>
        </div>
    </div>
    <!-- ========== Logo Section End ========== -->

    <!-- ========== Promo Section Start ========== -->
    <section class="pb-[70px]">
        <div class="container">
            <div class="grid grid-cols-12 gap-6">
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-6 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    <div
                        class="flex flex-col justify-end text-center p-4 lg:p-8 min-h-[532px] rounded-2xl bg-[url(/assets/images/home-4/2-women-red-dress.png)] bg-[#D5FFFC] bg-no-repeat bg-center"
                    >
                        <div class="p-6 bg-[#9EE872] rounded-2xl">
                            <div>
                  <span
                      class="text-light-primary-text bg-warning-light px-3 py-1 rounded-full text-base font-semibold"
                  >
                    Enjoy 50% savings
                  </span>
                            </div>
                            <h3 class="py-3">Style That Speaks You</h3>
                            <p class="pb-4 text-light-primary-text">
                                Discover the latest trends and elevate your wardrobe today.
                            </p>
                            <a class='btn btn-primary text-white font-semibold btn-large rounded-[60px] text-sm leading-6 group py-1.5 pl-4 pr-2'
                               href='{{route('front.shop')}}'>
                                Shop Now
                                <span
                                    class="size-8 ml-0.5 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300"
                                >
                    <i
                        class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"
                    ></i>
                  </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".3s"
                >
                    <div
                        class="flex flex-col justify-end text-center p-4 lg:pb-8 lg:px-6 min-h-[532px] rounded-2xl bg-[url(/assets/images/home-4/promo-card-2.png)] bg-[#FFF0F9] bg-center bg-no-repeat"
                    >
                        <div class="py-4 bg-[#FFD6EF] rounded-2xl">
                            <div>
                  <span
                      class="text-light-primary-text bg-warning-light px-3 py-1 rounded-full text-base font-semibold"
                  >
                    Enjoy 25% savings
                  </span>
                            </div>
                            <h4 class="py-1.5">Fresh Looks, Every Season</h4>
                            <p class="pb-4 text-light-primary-text">
                                Shop curated collections for every occasion and mood.
                            </p>
                            <a class='btn btn-primary text-white font-semibold btn-large rounded-[60px] text-sm leading-6 group py-1.5 pl-4 pr-2'
                               href='{{route('front.shop')}}'>
                                Shop Now
                                <span
                                    class="size-8 ml-0.5 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300"
                                >
                    <i
                        class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"
                    ></i>
                  </span>
                            </a>
                        </div>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".4s"
                >
                    <div
                        class="flex flex-col justify-end text-center p-4 lg:pb-8 lg:px-6 min-h-[532px] rounded-2xl bg-[url(/assets/images/home-4/promo-card-3.png)] bg-[#FFF8CC] bg-center bg-no-repeat"
                    >
                        <div class="py-4 bg-[#FFEB69] rounded-2xl">
                            <div>
                  <span
                      class="text-light-primary-text bg-success-light px-3 py-1 rounded-full text-base font-semibold"
                  >
                    Enjoy 30% savings
                  </span>
                            </div>
                            <h4 class="py-1.5">Fresh Looks, Every Season</h4>
                            <p class="pb-4 text-light-primary-text">
                                Shop curated collections for every occasion and mood.
                            </p>
                            <a class='btn btn-primary text-white font-semibold btn-large rounded-[60px] text-sm leading-6 group py-1.5 pl-4 pr-2'
                               href='{{route('front.shop')}}'>
                                Shop Now
                                <span
                                    class="size-8 ml-0.5 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300"
                                >
                    <i
                        class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"
                    ></i>
                  </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== Promo Section End ========== -->

    <!-- ========== Category Product Section Start ========== -->
    <section class="pb-[70px]">
        <div class="container">
            <div class="mb-10 text-center">
                <div
                    data-wow-delay=".2s"
                    class="flex items-center justify-center gap-x-4 wow animate__animated animate__fadeInUp"
                >
                    <div class="flex gap-x-8 overflow-x-auto home-four-category-filter">
                        <button
                            data-tab="fresh-finds"
                            class="pt-[13px] pb-[22px] text-[32px] leading-[48px] font-bold"
                        >
                            Fresh Finds
                        </button>
                        <button
                            data-tab="top-sellers"
                            class="pt-[13px] pb-[22px] text-[32px] leading-[48px] font-bold"
                        >
                            Top Sellers
                        </button>
                        <button
                            data-tab="most-wanted"
                            class="pt-[13px] pb-[22px] text-[32px] leading-[48px] font-bold"
                        >
                            Most Wanted
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-content" id="category-tab-content">
                <!-- ========== Fresh Finds Tab Start ========== -->
                <div class="tab-pane" id="fresh-finds">
                    <div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-6">
                        @foreach($freshFinds as $product)
                            @include('front.sections.product-card', ['product' => $product])
                        @endforeach
                    </div>
                </div>
                <!-- ========== Fresh Finds Tab End ========== -->
                <!-- ========== Top Seller Tab Start ========== -->
                <div class="tab-pane" id="top-sellers">
                    <div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-6">
                        @foreach($topSellers as $product)
                            @include('front.sections.product-card', ['product' => $product])
                        @endforeach
                    </div>
                </div>
                <!-- ========== Fresh Finds Tab End ========== -->

                <!-- ========== Most Wanted Tab Start ========== -->
                <div class="tab-pane" id="most-wanted">
                    <div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-6">
                        @foreach($mostWanted as $product)
                            @include('front.sections.product-card', ['product' => $product])
                        @endforeach
                    </div>
                </div>
                <!-- ========== Fresh Finds Tab End ========== -->
            </div>

            <div
                class="home-four-category-slider-nav-bottom flex items-center justify-center gap-x-6 mt-7 md:hidden"
            ></div>
        </div>
    </section>
    <!-- ========== Category Product Section End ========== -->

    <!-- ========== CTA Section Start ========== -->
    <section class="pb-[70px]">
        <div class="container">
            <div class="grid grid-cols-12 gap-6">
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".2s"
                >
                    <div
                        class="p-6 border-gray-300 border rounded-2xl text-center bg-[#A0E2E0]"
                    >
              <span
                  class="inline-flex items-center justify-center size-14 bg-white rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-container-truck text-3xl text-light-primary-text"
                ></i>
              </span>
                        <h5 class="pt-3 pb-0.5">Free Shipping</h5>
                        <p>Enjoy the Convenience of Free Shipping on Every Order</p>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".3s"
                >
                    <div
                        class="p-6 border-gray-300 border rounded-2xl text-center bg-[#FFEB69]"
                    >
              <span
                  class="inline-flex items-center justify-center size-14 bg-white rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-customer-support text-3xl text-light-primary-text"
                ></i>
              </span>
                        <h5 class="pt-3 pb-0.5">24x7 Support</h5>
                        <p>Round-the-Clock Assistance, Anytime You Need It</p>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".4s"
                >
                    <div
                        class="p-6 border-gray-300 border rounded-2xl text-center bg-[#FFC091]"
                    >
              <span
                  class="inline-flex items-center justify-center size-14 bg-white rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-delivery-return-02 text-3xl text-light-primary-text"
                ></i>
              </span>
                        <h5 class="pt-3 pb-0.5">30 Days Return</h5>
                        <p>
                            Your Satisfaction is Our Priority: Return Any Product Within 30
                            Days
                        </p>
                    </div>
                </div>
                <div
                    class="md:col-span-6 col-span-12 xl:col-span-3 wow animate__animated animate__fadeInUp"
                    data-wow-delay=".5s"
                >
                    <div
                        class="p-6 border-gray-300 border rounded-2xl text-center bg-[#9EE872]"
                    >
              <span
                  class="inline-flex items-center justify-center size-14 bg-white rounded-full"
              >
                <i
                    class="hgi hgi-stroke hgi-transaction text-3xl text-light-primary-text"
                ></i>
              </span>
                        <h5 class="pt-3 pb-0.5">Secure Payment</h5>
                        <p>Seamless Shopping Backed by Safe and Secure Payment Options</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ========== CTA Section End ========== -->

@endsection
@push('scripts')
    <script>
        document.addEventListener('click', function (e) {
            const swatch = e.target.closest('.color-swatch-wrapper');

            if (!swatch) return;

            const productId = swatch.dataset.productId;
            const colorCode = swatch.dataset.colorCode;
            const card = swatch.closest('.product-card-1');
            const mainImg = card ? card.querySelector('.product-main-image') : null;

            // Tick: reset all swatches in this card, then mark selected
            const allSwatches = card ? card.querySelectorAll('.color-swatch-wrapper') : [];
            allSwatches.forEach(function (s) {
                s.classList.remove('border-gray-700');
                s.classList.add('border-transparent');
                const tick = s.querySelector('.color-tick');
                if (tick) tick.classList.add('opacity-0');
            });

            swatch.classList.remove('border-transparent');
            swatch.classList.add('border-gray-700');
            const tick = swatch.querySelector('.color-tick');
            if (tick) tick.classList.remove('opacity-0');

            // AJAX: color ke hisaab se variant ka image lao
            if (!mainImg) return;

            // Loading state
            mainImg.style.opacity = '0.5';
            mainImg.style.transition = 'opacity 0.2s';

            const baseUrl = document.querySelector('meta[name="app-url"]').getAttribute('content');

            fetch(`${baseUrl}/api/products/${productId}/variant-image?color_code=${encodeURIComponent(colorCode)}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    // Agar CSRF chahiye toh:
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            })
                .then(function (res) {
                    return res.json();
                })
                .then(function (data) {
                    if (data.image_url) {
                        const newImg = new Image();
                        newImg.onload = function () {
                            mainImg.src = data.image_url;
                            mainImg.style.opacity = '1';
                        };
                        newImg.onerror = function () {
                            mainImg.style.opacity = '1';
                        };
                        newImg.src = data.image_url;
                    } else {
                        mainImg.style.opacity = '1';
                    }
                })
                .catch(function () {
                    mainImg.style.opacity = '1';
                });
        });
    </script>
@endpush