@extends('layouts.app')

@section('content')



    <a href="https://api.whatsapp.com/send/?phone={{ $websiteSetting->whatsapp_number }}"
        class="fixed bottom-5 right-5 z-50 animate-bounce-slow group" target="_blank" rel="noopener noreferrer">
        <div class="relative">
            <!-- Glowing background -->
            <span class="absolute inset-0 rounded-full bg-green-500 opacity-50 blur-xl animate-pulse"></span>

            <!-- WhatsApp Icon -->
            <img src="{{ asset('assets/icons/whatsapp.webp') }}" alt="WhatsApp"
                class="w-16 h-16 relative z-10 transition-transform duration-300 transform group-hover:scale-110 group-hover:rotate-6" />
        </div>
    </a>

    <style>
        @keyframes bounce-slow {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .animate-bounce-slow {
            animation: bounce-slow 2s infinite;
        }
    </style>



    <section>
        <div class="container mx-auto px-2 py-6" id="slider-banner-section">
            <div class="flex flex-col lg:flex-row gap-3">
                <div class="w-full ">
                    <div class="relative group rounded-md overflow-hidden shadow-lg">

                        <!-- Slider Container -->
                        <div class="swiper  w-full">
                            <div class="swiper-wrapper ">
                                <!-- Slide 1 -->
                                @foreach ($sliders as $slider)
                                    <div class="swiper-slide">
                                        <a href="" class="block h-full">
                                            <img src="{{ asset($slider->image_url) }}" alt="Admission 2024-25"
                                                class="w-full h-full  max-h-[600px]  aspect-video">
                                        </a>
                                    </div>
                                @endforeach

                            </div>

                            <div class="hidden md:block">
                                <div
                                    class="swiper-button-next bg-secondary/50 !w-9 !h-9 rounded-full shrink-0 hover:bg-secondary duration-300">
                                </div>
                                <div
                                    class="swiper-button-prev bg-secondary/50 !w-9 !h-9 rounded-full shrink-0 hover:bg-secondary duration-300">
                                </div>
                            </div>

                            <div class="swiper-pagination !bottom-3"></div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <div class="relative mx-auto">
        <!-- Background -->
        <img src="{{ asset('assets/images/compress_background.webp') }}" alt="background"
            class="absolute inset-0 w-full h-full object-cover -z-10" />

        <!-- Content wrapper -->

        <div class="container mx-auto px-4 md:px-8 py-12 md:py-20">
            <div class="grid grid-cols-1 md:grid-cols-2 items-center gap-12">

                <!-- Left Content -->
                <div class="text-center md:text-left space-y-6">
                    <h1
                        class="font-extrabold text-3xl sm:text-4xl md:text-5xl leading-snug md:leading-tight text-[#1B2124]">
                           {!! __('menu.platform_title') !!}

                       

                    </h1>

                    <p class="text-base text-[#3D3D3D] max-w-xl mx-auto md:mx-0">
                       {{ __('menu.platform_description', ['name' => $websiteSetting->app_name]) }}
                    </p>

                    <div>
                        <a href="{{ route('course.index') }}" class="btn-primary px-6 py-3 rounded-lg shadow-lg">
                            {{ __('menu.get_started') }}
                        </a>
                    </div>
                </div>

                <!-- Right Image -->
                <div class="flex justify-center md:justify-end ">
                    <img src="https://7497682.fs1.hubspotusercontent-na1.net/hubfs/7497682/AdobeStock_210376269.jpeg"
                        alt="hero-student" class="w-full max-w-md md:max-w-lg h-auto rounded-xl shadow-xl object-cover" />
                </div>
            </div>
        </div>
        </section>



    </div>

    <div class="bg-gradient-to-b from-blue-50/70 to-indigo-50/70 py-12 px-4 md:px-6 relative mt-5">
        <img src="{{ asset('assets/images/bg_image.png') }}" class="w-full h-full absolute left-0 top-0  opacity-50"
            alt="">
        <div class="max-w-6xl mx-auto">
            <!-- Section Card -->
            <div
                class=" bg-white rounded-2xl border border-slate-100 text-center px-6 py-8 md:py-12 shadow-md backdrop-blur-lg overflow-hidden max-w-4xl mx-auto ">




                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2 ">
                    {{ __('text.course_cat') }}


                </h2>

                <!-- Subtitle -->
                <h3 class="text-sm md:text-lg font-medium text-slate-700 mt-2 max-w-md mx-auto leading-relaxed">
                    {{ __('text.course_cat_subtitle') }}
                </h3>

                <!-- Categories Container -->
                <div class="relative">
                    <!-- Classes Scroll -->
                    <div
                        class="flex gap-3 md:gap-5 py-5 overflow-x-auto scrollbar-thin scrollbar-thumb-blue-200 scrollbar-track-blue-50 scrollbar-thumb-rounded-full md:justify-center md:flex-wrap">
                        @foreach ($allCategories as $category)
                            <!-- Class Card -->
                            <a href="{{ route('course.index', ['category_slug' => $category->slug]) }}"
                                class="class-card group flex-shrink-0 w-28 md:w-36 h-28 cursor-pointer flex flex-col items-center justify-center px-6 py-4 transition-all duration-300 rounded-xl bg-white border border-slate-200 shadow-sm hover:shadow-md relative overflow-hidden from-blue-50 to-indigo-50">

                                <!-- Icon container with subtle background -->
                                <div
                                    class="relative mb-3 p-2 rounded-lg bg-blue-50/50 group-hover:bg-white/80 transition-colors duration-300">
                                    <img src="{{ asset($category->icon) }}" alt="{{ $category->name }}"
                                        class="w-8 h-8 md:w-10 md:h-10 object-contain transition-transform duration-300 group-hover:scale-110"
                                        loading="lazy">
                                </div>

                                <!-- Category name -->
                                <h4
                                    class="relative text-xs md:text-sm font-medium text-slate-700 group-hover:text-slate-900 transition-colors duration-300 text-center leading-tight">
                                    {{ $category->name }}
                                </h4>

                            </a>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-6xl mx-auto pt-6">
        <div class="sm:px-4 sm:py-6 px-2.5 py-4 sm:mx-5 xl:mx-0 relative rounded-md bg-white 
              md:flex md:flex-wrap lg:flex-nowrap justify-between grid xl:grid-cols-4 grid-cols-2 gap-y-3 overflow-y-hidden"
            style="box-shadow:0px 1px 8px 0px rgba(0, 0, 0, 0.08)">

            <!-- Item 1 -->
            <div class="flex flex-col text-center w-[154px] sm:w-[330px] lg:w-[240px]">
                <div class="self-center mb-2.5 md:mb-3.5">
                    <div class="sm:w-12 sm:h-12 w-8 h-8 bg-center bg-no-repeat bg-cover"
                        style="background-image:url({{ asset('assets/icons/live.webp') }})">
                    </div>
                </div>
                <div class="text-sm md:text-lg font-semibold text-[#1B2124]">{{ __('text.live') }}

                </div>
                <div class="text-xs font-medium text-gray-500">{{ __('text.interactive_classroom') }}</div>
            </div>

            <!-- Divider -->
            <div class="after:block after:bg-[#D9DCE1] after:w-[1px] after:h-16 my-6 hidden lg:block"></div>

            <!-- Item 2 -->
            <div class="flex flex-col text-center w-[154px] sm:w-[330px] lg:w-[240px]">
                <div class="self-center mb-2.5 md:mb-3.5">
                    <div class="sm:w-12 sm:h-12 w-8 h-8 bg-center bg-no-repeat bg-cover"
                        style="background-image:url({{ asset('assets/icons/tests_paper.webp') }})">
                    </div>
                </div>
                <div class="text-sm md:text-lg font-semibold text-[#1B2124]">{{ __('text.materials') }}

                </div>
                <div class="text-xs font-medium text-gray-500">{{ __('text.class_notes') }}</div>
            </div>

            <!-- Divider -->
            <div class="after:block after:bg-[#D9DCE1] after:w-[1px] after:h-16 my-6 hidden lg:block"></div>

            <!-- Item 3 -->
            <div class="flex flex-col text-center w-[154px] sm:w-[330px] lg:w-[240px]">
                <div class="self-center mb-2.5 md:mb-3.5">
                    <div class="sm:w-12 sm:h-12 w-8 h-8 bg-center bg-no-repeat bg-cover"
                        style="background-image:url({{ asset('assets/icons/24_hours.webp') }})">
                    </div>
                </div>
                <div class="text-sm md:text-lg font-semibold text-[#1B2124]">{{ __('text.assessment') }}</div>
                <div class=" text-xs font-medium text-gray-500">{{ __('text.practice_tests') }}</div>
            </div>


            <div class="after:block after:bg-[#D9DCE1] after:w-[1px] after:h-16 my-6 hidden lg:block"></div>

            <!-- Item 4 -->
            <div class="flex flex-col text-center w-[154px] sm:w-[330px] lg:w-[240px]">
                <div class="self-center mb-2.5 md:mb-3.5">
                    <svg height="25" viewBox="0 0 34 35" class="sm:w-12 sm:h-12 w-8 h-8" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.4362 10.8332C12.1976 10.8332 14.4362 8.59467 14.4362 5.83334C14.4362 3.072 12.1976 0.833496 9.4362 0.833496C6.67477 0.833496 4.4362 3.072 4.4362 5.83334C4.4362 8.59467 6.67477 10.8332 9.4362 10.8332ZM0.269531 15.4466C0.269531 13.8193 1.58868 12.5002 3.21593 12.5002H11.1614C10.5942 13.4807 10.2695 14.6192 10.2695 15.8335C10.2695 17.8247 11.1425 19.6119 12.5265 20.8335H10.7159C8.7379 20.8335 7.05065 22.0785 6.39498 23.8275C3.89713 23.217 2.34899 21.8549 1.43762 20.3379C0.269425 18.3935 0.269516 16.3927 0.269531 16.0455V15.4466ZM23.6031 15.8335C23.6031 14.6192 23.2784 13.4807 22.7112 12.5002H30.6565C32.2837 12.5002 33.6029 13.8193 33.6029 15.4466V16.0455C33.6029 16.3927 33.603 18.3935 32.4348 20.3379C31.5234 21.8549 29.9753 23.217 27.4774 23.8275C26.8217 22.0785 25.1345 20.8335 23.1565 20.8335H21.3461C22.7302 19.6119 23.6031 17.8247 23.6031 15.8335ZM29.4362 5.83334C29.4362 8.59467 27.1976 10.8332 24.4362 10.8332C21.6748 10.8332 19.4362 8.59467 19.4362 5.83334C19.4362 3.072 21.6748 0.833496 24.4362 0.833496C27.1976 0.833496 29.4362 3.072 29.4362 5.83334ZM7.76953 25.4466C7.76953 23.8193 9.08868 22.5002 10.7159 22.5002H23.1565C24.7837 22.5002 26.1029 23.8193 26.1029 25.4466V26.0455C26.1029 26.3927 26.103 28.3935 24.9348 30.3379C23.6991 32.3946 21.2929 34.1668 16.9362 34.1668C12.5795 34.1668 10.1733 32.3946 8.93762 30.3379C7.76942 28.3935 7.76952 26.3927 7.76953 26.0455V25.4466ZM16.9362 20.8332C19.6976 20.8332 21.9362 18.5947 21.9362 15.8333C21.9362 13.072 19.6976 10.8335 16.9362 10.8335C14.1748 10.8335 11.9362 13.072 11.9362 15.8333C11.9362 18.5947 14.1748 20.8332 16.9362 20.8332Z"
                            fill="#8A00CA"></path>
                    </svg>
                </div>
                <div class="text-sm md:text-lg font-semibold text-[#1B2124]">{{ __('text.community') }}</div>
                <div class="text-xs font-medium text-gray-500">{{ __('text.separate_space') }}

                </div>
            </div>


            <!-- Divider -->


        </div>
    </div>

    

    <section class="mt-8"
        style="background: radial-gradient(60.52% 68.24% at 50% 68.24%, rgb(139 91 255 / 30%) 0, rgb(248 244 255 / 30%) 44.14%, rgb(231 219 255 / 30%) 100%)">
        <div class="container py-12 md:py-16 px-4  md:px-6">
            <div class="text-center mb-10">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 line-bar">
                    {{ __('text.course_title') }}
                </h2>
                <p class="text-gray-600 mt-2">{{ __('text.course_subtitle') }}</p>
            </div>



            <div class="grid grid-cols-1 sm:grid-cols-2  md:grid-cols-3   gap-4 ">

                @foreach ($courses as $course)
                    <div
                        class="border border-gray-200 rounded-lg bg-white overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 relative border-b-0 z-0">
                        <!-- Image -->
                        <div class="overflow-hidden p-1.5">
                            <img src="{{ asset($course->thumbnail_url) }}" alt=""
                                class="w-full rounded-lg transition-transform duration-300 hover:scale-105 aspect-video ">
                        </div>

                        <!-- Title -->
                        <a href="{{ route('course.view', $course->slug) }}" class="block px-4 pt-3">
                            <h1
                                class=" text-lg md:text-[21px] line-clamp-2 font-semibold text-gray-900 hover:text-secondary transition-colors duration-200 h-[50px] leading-6 ">
                                {{ $course->title }}
                            </h1>
                        </a>

                        <!-- Price & Discount -->
                        <div class="flex items-center justify-between px-4 py-3 border-b border-dashed border-[#d9dce1]">
                            @if ($course->is_free == 1)
                                <span
                                    class="inline-block px-3 py-1 text-sm font-semibold text-white bg-red-500 rounded-md shadow-sm my-0.5">
                                    {{ __('text.free') }}
                                </span>
                            @else
                                <div class="flex items-center gap-2">
                                    <span
                                        class="text-2xl font-bold text-primary">৳{{ (float) $course->discounted_price }}</span>
                                    <span
                                        class="text-sm text-gray-400 line-through">৳{{ (float) $course->original_price }}</span>
                                </div>
                                <span
                                    class="px-2.5 py-0.5 text-xs font-semibold text-white rounded-full bg-gradient-to-r from-yellow-600 to-yellow-500">
                                    {{ $course->discount_percentage }}%
                                </span>
                            @endif
                        </div>

                        <!-- Stats & Button -->
                        <div class="px-4 pb-3 bg-[#f9fbff]">
                            <div
                                class="flex justify-between items-center mb-3 text-gray-700 border-b border-dashed border-slate-300 py-2">

                                @if ($course->course_type == 'Live')
                                    <div class="flex items-center gap-2 text-xs font-medium">
                                        <img alt="live" class="w-5 h-5"
                                            src="{{ asset('assets/icons/live-ani.svg') }}">
                                        {{ __('text.live') }}
                                    </div>
                                @else
                                    <div class="flex items-center gap-2 text-xs font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-400"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
                                            <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                                            <rect width="8" height="6" x="2" y="12" rx="1"></rect>
                                            <path d="m10 15.5 4 2.5v-6l-4 2.5"></path>
                                        </svg>
                                        {{ __('text.recorded') }}
                                    </div>
                                @endif

                                <div class="flex items-center gap-2 text-xs font-medium">
                                    <img alt="category" class="w-5 h-5" src="{{ asset($course->category->icon) }}">
                                    {{ $course->category->name }}
                                </div>
                            </div>

                            <div class="flex justify-between items-center mb-4 text-gray-700">
                                <div class="flex items-center gap-2">
                                    <img src="{{ asset('assets/icons/multi-user.png') }}"
                                        class="w-5 h-5 rounded-full shadow" alt="Students">
                                    <span class="text-xs font-medium"> {{ __('text.enrolled') }}:
                                        {{ $course->total_enroll }}</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" class="w-4 h-4"
                                        alt="Classes">
                                    <span class="text-xs font-medium"> {{ __('text.class') }}:
                                        {{ $course->total_class }}</span>
                                </div>
                            </div>

                            @if ($course->status === 'draft')
                                <span
                                    class="block w-full text-center py-2.5 text-yellow-600 font-semibold border border-yellow-400 rounded-lg bg-yellow-50">
                                    ⏳ {{ __('text.coming_soon') }}
                                </span>
                            @else
                                <a href="{{ route('course.view', $course->slug) }}"
                                    class="btn-primary block text-center !py-2">
                                    {{ __('text.view_details') }}
                                </a>
                            @endif
                        </div>




                        <!-- Bottom Decoration -->
                        <div class="border-6 border-transparent"
                            style="background-image: url('{{ asset('assets/images/card_bottom_icons.webp') }}'); background-position: 17px; border-image-repeat: round;">
                        </div>
                    </div>
                @endforeach

            </div>


        </div>


        </div>
    </section>

    <section class="py-14 md:py-20 px-4 md:px-6 bg-white">
        <div class="max-w-6xl mx-auto text-center">
            <!-- Section Title -->
            <div class="text-center mb-12">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-3">
                    {{ __('text.trusted_platform_title') }}
                </h2>
                <p class="text-gray-600 md:text-lg">
                    {{ __('text.trusted_platform_subtitle') }}
                </p>
            </div>

            <!-- Stats Cards Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12">
                <!-- Card 1 -->
                <div
                    class="group bg-orange-50 border border-orange-100 hover:border-orange-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                    <div>
                        <div class="text-3xl md:text-4xl font-extrabold text-orange-600 mb-2">100k+</div>
                        <div class="text-sm md:text-base text-gray-700">{{__('menu.happy_students')}}</div>
                    </div>
                    <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                        style="background-image: url('{{ asset('assets/icons/users_p.webp') }}');">
                    </div>
                </div>

                <!-- Card 2 -->
                <div
                    class="group bg-red-50 border border-red-100 hover:border-red-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                    <div>
                        <div class="text-3xl md:text-4xl font-extrabold text-red-500 mb-2">50+</div>
                        <div class="text-sm md:text-base text-gray-700">{{__('menu.quiz')}}</div>
                    </div>
                    <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                        style="background-image: url('{{ asset('assets/icons/paper_&_pan.webp') }}');">
                    </div>
                </div>

                <!-- Card 3 -->
                <div
                    class="group bg-sky-50 border border-sky-100 hover:border-sky-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                    <div>
                        <div class="text-3xl md:text-4xl font-extrabold text-sky-600 mb-2">100+</div>
                        <div class="text-sm md:text-base text-gray-700">{{__('menu.video_lectures')}}</div>
                    </div>
                    <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                        style="background-image: url('{{ asset('assets/icons/video_pc.webp') }}');">
                    </div>
                </div>

                <!-- Card 4 -->
                <div
                    class="group bg-purple-50 border border-purple-100 hover:border-purple-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                    <div>
                        <div class="text-3xl md:text-4xl font-extrabold text-purple-600 mb-2">200+</div>
                        <div class="text-sm md:text-base text-gray-700">{{__('menu.practice_papers')}}</div>
                    </div>
                    <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                        style="background-image: url('{{ asset('assets/icons/note_multi.webp') }}');">
                    </div>
                </div>
            </div>

            <!-- CTA Button -->
            <div class="flex justify-center">
                <a href="{{ route('course.index') }}" class="btn-dark">
                    {{ __('menu.get_started') }}
                </a>
            </div>
        </div>
    </section>

        <section class="relative py-16 bg-cover bg-center bg-fixed"
        style="background-image: url('{{ asset('assets/images/featured-parallax1.webp') }}');">
        <!-- Dark overlay -->
        <div class="absolute inset-0 bg-black/85 z-0"></div>

        <div class="container mx-auto relative z-10 px-4">
            <!-- Section Title -->
            <div class="text-center mb-8 md:mb-12 max-w-3xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-bold mb-2 text-white"> {{ __('messages.meet_expert_title') }}</h2>
                <p class="mt-4 text-white mx-5 text-base md:text-lg">
                    {{ __('messages.meet_expert_subtitle') }}
                </p>
                <span class="inline-block w-16 h-1 bg-white mt-3"></span>
            </div>

            <!-- Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

                @forelse ($instructors as $instructor)
                    <!-- Repeat similar card for other teachers -->
                    <div class="relative group text-center ">
                        <div class="relative p-2">
                            <!-- Decorative Borders -->
                            <div
                                class="absolute w-8 h-8 border-l-4 border-b-4 border-primary bottom-0 left-0 
              transition-all duration-300 group-hover:-bottom-1 group-hover:-left-1">
                            </div>
                            <div
                                class="absolute w-8 h-8 border-r-4 border-b-4 border-primary bottom-0 right-0 
              transition-all duration-300 group-hover:-bottom-1 group-hover:-right-1">
                            </div>
                            <div
                                class="absolute w-8 h-8 border-l-4 border-t-4 border-primary top-0 left-0 
              transition-all duration-300 group-hover:-top-1 group-hover:-left-1">
                            </div>
                            <div
                                class="absolute w-8 h-8 border-r-4 border-t-4 border-primary top-0 right-0 
              transition-all duration-300 group-hover:-top-1 group-hover:-right-1">
                            </div>

                            <!-- Instructor Image -->
                            <img src="{{ asset($instructor->user->image ?? 'assets/images/default-user.png') }}"
                                alt="{{ $instructor->user->name }}" class="w-full relative z-10 bg-slate-50">

                        </div>

                        <!-- Skewed Info Section -->
                        <div class="relative mx-4 -mt-10 z-10 group-hover:text-white text-black py-2 shadow-lg">
                            <h5 class="text-lg font-bold truncate">
                                {{ $instructor->user->name }}
                            </h5>
                            <p class="text-sm">
                                {{ $instructor->organization }}
                            </p>
                            <p
                                class="text-sm  -skew-x-12 relative mt-1 duration-500 bg-primary group-hover:bg-white group-hover:text-black text-white -left-[5px]">
                                {{ $instructor->experience_years }}+ Years Experience
                            </p>

                            <!-- Background Effects -->
                            <div class="absolute inset-0 -skew-x-12 bg-white -z-10"></div>
                            <div
                                class="absolute inset-0 -skew-x-12 bg-primary w-0 group-hover:w-full transition-all duration-500 -z-9">
                            </div>
                        </div>
                    </div>


                @empty
                    <!-- Empty State -->
                    <div class="col-span-full">
                        <div class="text-center py-16">

                            <h3 class="text-2xl font-semibold text-gray-900 mb-2">
                                {{ __('messages.no_instructors') }}
                            </h3>
                            <p class="text-gray-600 max-w-md mx-auto">
                                {{ __('messages.updating_instructors') }}
                            </p>


                        </div>
                    </div>
                @endforelse

            </div>
        </div>
    </section>

    <div class="bg-white">
        <div class="pt-8 max-w-6xl mx-auto px-4 md:px-6 mb-5 ">
            <div class="flex flex-col md:flex-row items-center gap-8 rounded-3xl p-12 min-h-[404px] bg-cover bg-center shadow-lg"
                style="background-image: url('{{ asset('assets/images/bg_hill.png') }}');">
                <!-- Left Content -->
                <div class="flex-1 flex flex-col justify-center gap-6">
                    <h1 class="text-3xl md:text-4xl font-extrabold text-white leading-tight max-w-lg">
                       {{__('menu.platform_heading_card', ['name' => $websiteSetting->app_name])}}
                    </h1>
                    <p class="text-white/90 text-lg md:text-base">
                        {{__('menu.platform_details_card', ['name' => $websiteSetting->app_name])}}
                    </p>
                    <a href="{{ route('course.index') }}"
                        class="px-6 py-3 bg-white text-primary rounded-md text-lg d-inline-block w-fit hover:bg-gray-100 duration-300">
                          {{__('menu.view_courses')}}
                    </a>
                </div>

                <!-- Right Image -->
                <div class="">
                    <img src="{{ asset('assets/images/cp-image-BwHYWdHx.png') }}" alt="explore" class="w-full " />
                </div>
            </div>
        </div>

    </div>

    <section class="bg-black py-16" style="background-image: url({{ asset('assets/images/Background_Noise.jpeg') }})">
        <div class="mx-auto px-4 md:px-6 max-w-5xl">
            <div class="text-center mb-3">
                <h2 class="text-2xl md:text-3xl font-bold text-white mb-2 ">
                   {{ __('menu.join_us') }}



                </h2>
                <p class="text-gray-200 mt-2">{{ __('menu.join_live_class') }}</p>


                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 mt-6 gap-6">
                    <div
                        class="bg-[linear-gradient(180deg,rgba(19,57,146,0.40)_0%,rgba(6,14,83,0.40)_100%)] rounded-lg border border-[#253A71] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">{{ __('menu.official_facebook_page') }}
                            </h4>
                            <a
                                href="{{ $websiteSetting->facebook_link }}" class="bg-[#104ce4] hover:bg-[#093dc1] text-white rounded-md px-6 py-2 text-lg inline-block">
                                {{ __('menu.join') }}</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/fb.webp') }}" alt="">
                        </div>
                    </div>
                    <div
                        class="bg-[linear-gradient(180deg,rgba(123,21,21,0.40)_0%,rgba(59,6,6,0.40)_100%)] rounded-lg border border-[#592327] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">{{ __('menu.free_playlist') }}</h4>
                            <a href="{{ $websiteSetting->youtube_link }}"
                                class="bg-[#dd1e2a] hover:bg-[#f10010] text-white rounded-md px-6 py-2 text-lg inline-block">{{ __('menu.watch_video') }}</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/yt.webp') }}" alt="">
                        </div>
                    </div>
                    <div
                        class="bg-[linear-gradient(180deg,rgba(241,59,143,0.40)_0%,rgba(241,59,143,0.20)_100%)] rounded-lg border border-[#b22b6a] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5"> {{ __('menu.official_instagram') }}
                            </h4>
                            <a href="{{ $websiteSetting->instagram_link }}" 
                                class="bg-[#df1c77] hover:bg-[#f70d7a] text-white rounded-md px-6 py-2 text-lg inline-block">
                                {{ __('menu.follow') }}
                            </a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/igm.webp') }}" alt="">
                        </div>
                    </div>
                    <div
                        class="bg-[linear-gradient(180deg,rgba(19,57,146,0.40)_0%,rgba(6,14,83,0.40)_100%)] rounded-lg border border-[#253A71] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">{{ __('menu.official_facebook_group') }}
                            </h4>
                            <a
                                href="{{ $websiteSetting->facebook_group_link }}" class=" bg-[#104ce4] hover:bg-[#093dc1] text-white rounded-md px-6 py-2 text-lg inline-block">
                                {{ __('menu.join') }}</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/fb.webp') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('js')
        <script>
            new Swiper('.swiper', {
                loop: true,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        </script>
    @endpush
@endsection