@extends('frontend.layouts.app')
@section('title', __('home.home'))
@section('meta', __('home.meta_description'))
@push('styles')
    <style>
        /* Hide scrollbar (if any horizontal scroll happens) */
        .scrollbar-hide {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        /* Track styles */
        .partners-marquee {
            position: relative;
        }

        .partners-marquee .carousel-container {
            display: flex;
            width: max-content;
            /* shrink-wrap to content */
            will-change: transform;
            transform: translateX(var(--maxX, 200px));
            animation: bounceX var(--duration, 40s) linear infinite;
        }

        .partners-marquee:hover .carousel-container {
            animation-play-state: paused;
        }

        /* Nice hover focus on items (optional) */
        .carousel-item:hover {
            transition: transform .8s;
            transform: scale(1.1);
        }

        /* Keyframes use dynamic endpoints via CSS variables */
        @keyframes bounceX {
            0% {
                transform: translateX(var(--maxX));
            }

            /* start at +200px from left */
            50% {
                transform: translateX(var(--minX));
            }

            /* go to rightmost - 200px */
            100% {
                transform: translateX(var(--maxX));
            }

            /* return */
        }
    </style>
@endpush

@php
    use App\Enum\HeadingTypeEnum;
@endphp

@section('content')
    <div class="min-h-screen">
        <!-- Slider Section -->
        @isset($sliders)
            <section id="home-slider">
                <div id="default-carousel" class="relative w-full" data-carousel="slide">
                    <!-- Carousel wrapper -->
                    <div class="relative h-[200px] sm:h-[300px] overflow-hidden rounded-lg md:h-[400px] lg:h-[500px]">
                        <!-- Item 1 -->
                        @foreach ($sliders as $key => $slider)
                            <div class="hidden duration-700 ease-in-out" data-carousel-item="{{ $key === 0 ? 'active' : '' }}">
                                <img src="{{ asset('storage/' . $slider->image) }}"
                                    class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                                    alt="{{ $slider->title ?? 'Slider Image' }}" />

                                <!-- Text Overlay -->
                                <div
                                    class="absolute inset-0 flex flex-col space-y-1 md:space-y-3 items-left text-left bg-black/20 py-10 sm:py-20 md:py-40 px-20 md:pb-50 md:px-30">
                                    <h2 class="text-white text-base sm:text-xl md::text-3xl md:text-5xl font-bold"
                                        style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.01);
                                        -webkit-text-stroke: 1px rgba(19, 18, 18, 0.096);                                                                                                                                                                                                                                                                                         ">
                                        {!! app()->getLocale() == 'en'
                                            ? $slider->name_en
                                            : (isset($slider->name_np)
                                                ? $slider->name_np
                                                : $slider->name_en) !!}
                                    </h2>
                                    <p class=" text-white text-base leading-4 sm:leading-6 sm:text-xl md:text-2xl max-w-3xl"
                                        style="-webkit-text-stroke: 1px rgba(19, 18, 18, 0.096);">
                                        {!! app()->getLocale() == 'en'
                                            ? $slider->short_description_en
                                            : (isset($slider->short_description_np)
                                                ? $slider->short_description_np
                                                : $slider->short_description_en) !!}
                                    </p>
                                    <a href="{{ $slider->link ? $slider->link : '#' }}"
                                        class="px-3 sm:px-6 py-1 sm:py-2 bg-accent w-34 sm:w-40 text-center text-black border-2 rounded-full hover:opacity-85 font-semibold text-sm sm:text-lg">
                                        {{ __('home.read_more') }}</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <!-- Slider indicators -->
                    <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
                        @isset($sliders)
                            @foreach ($sliders as $key => $slider)
                                <button type="button" class="w-3 h-3 rounded-full"
                                    aria-current="{{ $key === 0 ? 'true' : 'false' }}"
                                    aria-label="{{ __('home.slide') }} {{ $key + 1 }}"
                                    data-carousel-slide-to="{{ $key }}">
                                </button>
                            @endforeach
                        @endisset
                    </div>
                    <!-- Slider controls -->
                    <button type="button"
                        class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                        data-carousel-prev>
                        <span
                            class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                            <svg class="w-4 h-4 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 1 1 5l4 4" />
                            </svg>
                            <span class="sr-only">{{ __('home.previous') }}</span>
                        </span>
                    </button>
                    <button type="button"
                        class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                        data-carousel-next>
                        <span
                            class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                            <svg class="w-4 h-4 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="m1 9 4-4-4-4" />
                            </svg>
                            <span class="sr-only">{{ __('home.next') }}</span>
                        </span>
                    </button>
                </div>
            </section>
        @endisset

        <section class="flex flex-col gap-10 px-6 md:px-10 lg:px-20 xl:px-40 max-w-6xl w-full mx-auto my-10">
            <!-- About Us Header -->
            <div class="text-center px-4 md:px-8">
                <h1 class="text-accent font-bold uppercase tracking-wider text-sm md:text-base lg:text-lg">
                    {{ __('home.our_introduction') }}
                </h1>
                <p class="mt-3 text-2xl md:text-4xl font-bold text-black">
                    {{ __('home.welcome') }}
                </p>
            </div>

            <!-- About Us Content -->
            <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">

                <!-- Image Section -->
                @isset($aboutUs->image)
                    <div class="w-full lg:w-1/2 flex justify-center">
                        <img src="{{ asset('storage/' . $aboutUs->image) }}" alt="{{ __('home.our_introduction') }}"
                            class="w-full max-w-md rounded-md object-cover bg-gray-100"
                            onerror="this.onerror=null;this.src='{{ asset('assets/images/placeholder.webp') }}';" />
                    </div>
                @endisset

                <!-- Text Content -->
                @isset($aboutUs)
                    <div class="w-full lg:w-1/2 space-y-6">
                        @isset($aboutUs->short_description_en)
                            <p class="font-bold uppercase tracking-wider text-xl md:text-base lg:text-lg">
                                {!! app()->getLocale() === 'en'
                                    ? $aboutUs->short_description_en
                                    : $aboutUs->short_description_np ?? $aboutUs->short_description_en !!}
                            </p>
                        @endisset
                        <p class="text-gray-600 text-base md:text-lg lg:text-justify line-clamp-11">
                            {!! app()->getLocale() === 'en'
                                ? $aboutUs->description_en ?? $aboutUs->description
                                : $aboutUs->description_np ?? ($aboutUs->description_en ?? $aboutUs->description) !!}
                        </p>

                        <a href="{{ route('aboutHulasRemittance') }}"
                            class="inline-block bg-black text-accent text-md font-semibold px-6 py-2 rounded-full shadow hover:opacity-90 transition duration-200">
                            {{ __('home.read_more') }}
                        </a>
                    </div>
                @endisset

            </div>
        </section>

        <!-- Services Section -->
        <div class="flex flex-col gap-10 px-4 sm:px-6 md:px-10 lg:px-20 xl:px-40 my-20">
            <!-- Services Section -->
            <section class="relative">
                <!-- Container for section header and navigation -->
                <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-20">

                    <div
                        class="flex items-center justify-between max-w-4xl mx-auto flex-col sm:flex-row sm:items-start sm:justify-between">
                        @php
                            $serviceHeading = $headings->where('type', HeadingTypeEnum::SERVICE->value)->first();
                        @endphp

                        <!-- Section Header -->
                        <div class="text-center sm:text-left w-full sm:w-auto">
                            <h1 class="text-accent font-bold uppercase tracking-wider text-sm md:text-base lg:text-lg">
                                {{ __('home.our_services') }}
                            </h1>
                            <p class="text-xl sm:text-3xl md:text-4xl font-bold text-black mt-3">
                                {{ app()->getLocale() == 'en' ? $serviceHeading->main_heading_en : $serviceHeading->main_heading_np }}
                            </p>
                            <p class="mt-3 text-sm sm:text-base md:text-lg text-gray-700 line-clamp-3">
                                {{ app()->getLocale() == 'en' ? $serviceHeading->sub_heading_en : $serviceHeading->sub_heading_np }}
                            </p>
                        </div>

                        <!-- Navigation Arrows -->
                        <div
                            class="flex gap-2 mt-4 sm:mt-0
                                 bg-white/80 backdrop-blur-md border border-gray-200 shadow-md rounded-full p-2
                                 self-start">
                            <button onclick="prevServicesSlider()" aria-label="Previous slide"
                                class="group p-2 rounded-full hover:bg-white transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent">
                                <svg class="w-5 h-5 text-gray-600 group-hover:text-accent" fill="none"
                                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                                </svg>
                            </button>
                            <button onclick="nextServicesSlider()" aria-label="Next slide"
                                class="group p-2 rounded-full hover:bg-white transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent">
                                <svg class="w-5 h-5 text-gray-600 group-hover:text-accent" fill="none"
                                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                </svg>
                            </button>
                        </div>

                    </div>

                </div>

                <!-- Slider Content -->
                <div class="overflow-x-auto w-full px-2 md:px-4 mt-10 scrollbar-hide">
                    <div id="services-slider-content"
                        class="flex gap-4 md:gap-6 transition-transform duration-500 ease-in-out whitespace-nowrap
                                           justify-start sm:justify-center">
                        @foreach ($services as $service)
                            <div
                                class="services-review-card flex-none w-[320px] sm:w-[320px] md:w-[320px] lg:w-[360px] bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 group p-5 flex flex-col justify-between min-h-[420px]">
                                <!-- Image or Icon -->
                                <div
                                    class="flex justify-center items-center h-[220px] sm:h-[240px] md:h-[260px] w-full mb-4">
                                    @if ($service->file)
                                        <img src="{{ asset('storage/' . $service->file) }}" alt="{{ $service->name_en }}"
                                            class="h-full w-full object-cover rounded-lg" />
                                    @else
                                        <div class="h-full w-full bg-gray-100 rounded-lg flex items-center justify-center">
                                            <i
                                                class="{{ $service->icon ?? 'fa fa-briefcase' }} text-4xl text-gray-400"></i>
                                        </div>
                                    @endif
                                </div>

                                <!-- Title -->
                                <h3 class="text-base sm:text-lg font-semibold text-left sm:text-center text-gray-800">
                                    {{ $service->name_en }}
                                </h3>

                                <!-- Description -->
                                <p class="text-sm text-left sm:text-center text-gray-600 mt-2 line-clamp-4">
                                    {{ $service->description_en }}
                                </p>

                                <!-- CTA -->
                                <div class="mt-4 flex justify-start sm:justify-center">
                                    <a href="{{ $service->slug ? route('serviceDetail', $service->slug) : 'javascript:void(0);' }}"
                                        class="px-4 py-2 rounded-full bg-black text-accent font-medium text-sm hover:opacity-90 transition">
                                        Read more
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        </div>
        <!-- Services Section -->

        <div class="flex flex-col gap-12 px-6 md:px-10 lg:px-20 xl:px-40 max-w-6xl mx-auto my-20">
            @php
                $becomeAnAgentHeading = $headings->where('type', HeadingTypeEnum::BECOMEAGENT->value)->first();
            @endphp

            <!-- Become an Agent Section -->
            <section class="flex flex-col gap-12">
                <!-- Header Content -->
                <div class="text-center">
                    <h1 class="text-accent font-bold uppercase text-sm lg:text-base tracking-widest">
                        {{ __('home.become_an_agent') }}
                    </h1>
                    <p class="text-2xl md:text-4xl font-bold text-black mt-3">
                        {{ app()->getLocale() == 'en' ? $becomeAnAgentHeading->main_heading_en : $becomeAnAgentHeading->main_heading_np }}

                    </p>
                    <p class="mt-4 text-base lg:text-lg text-gray-600 max-w-4xl mx-auto">
                        {{ app()->getLocale() == 'en' ? $becomeAnAgentHeading->sub_heading_en : $becomeAnAgentHeading->sub_heading_np }}
                    </p>
                </div>

                <!-- Content Grid -->
                <div class="flex flex-col lg:flex-row items-stretch gap-10">
                    <!-- Left: Steps List -->
                    <div class="flex-1 flex justify-center">
                        <ul class="relative border-l-2 border-dotted border-accent  space-y-10">
                            @php
                                $steps = [
                                    [
                                        'title' => __('home.select_sender_country'),
                                        'desc' => __('home.select_sender_country_desc'),
                                    ],
                                    [
                                        'title' => __('home.enter_control_number'),
                                        'desc' => __('home.enter_control_number_desc'),
                                    ],
                                    ['title' => __('home.enter_amount'), 'desc' => __('home.enter_amount_desc')],
                                    [
                                        'title' => __('home.track_your_money'),
                                        'desc' => __('home.track_your_money_desc'),
                                    ],
                                    [
                                        'title' => __('home.receive_money_and_bonus'),
                                        'desc' => __('home.receive_money_and_bonus_desc'),
                                    ],
                                ];
                            @endphp

                            @foreach ($steps as $index => $step)
                                <li class="relative pl-6 space-x-4">
                                    <div
                                        class="absolute -left-[1.1rem] top-1 w-10 h-10  border-2 bg-accent text-black font-bold text-base rounded-full flex items-center justify-center z-10">
                                        {{ $index + 1 }}
                                    </div>
                                    <div class="mx-3">
                                        <h3 class="font-bold text-black mb-1">{{ $step['title'] }}</h3>
                                        <p class="text-[#737879] text-sm">{{ $step['desc'] }}</p>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <!-- Right: Image & Button -->
                    <div class="flex-1 flex flex-col justify-center items-center text-center space-y-6">
                        <img src="{{ asset('assets/images/agent/agent.jpg') }}" alt="Agent"
                            class="w-full max-w-[600px] rounded-md object-contain" />
                        <a href="{{ route('becomeAnAgent') }}"
                            class="px-6 py-3 bg-accent text-black font-bold rounded-full border-2 hover:opacity-90 transition-all duration-200">
                            {{ __('home.apply_to_become_an_agent') }}
                        </a>
                    </div>
                </div>
            </section>
        </div>

        <!----------Our Partners Section---------->
        <section class=" z-30 my-20">
            <div class="overflow-x-hidden">
                @php
                    $partnerHeading = $headings->where('type', HeadingTypeEnum::PARTNERSANDSUPPORTERS->value)->first();
                @endphp

                <div class="p-4 md:ml-8 lg:my-4 lg:mx-20 lg:mb-2">
                    <div class="flex flex-col items-center">
                        <h1 class="font-bold text-accent uppercase text-base lg:text-lg tracking-wider">
                            {{ __('home.our_partners_supporters') }}
                        </h1>

                        <p class="text-2xl text-black font-bold md:text-4xl text-center mt-3">
                            {{ app()->getLocale() == 'en' ? $partnerHeading->main_heading_en : $partnerHeading->main_heading_np }}

                        </p>
                        <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl line-clamp-3">
                            {{ app()->getLocale() == 'en' ? $partnerHeading->sub_heading_en : $partnerHeading->sub_heading_np }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="partners-marquee w-full overflow-hidden relative" data-padding="200" data-speed="60">
                <!-- Fading sides -->
                <div class="pointer-events-none absolute inset-0">
                    <div class="absolute left-0 top-0 h-full w-1/4 z-20"
                        style="background:linear-gradient(to right,#fff8cc 0%,rgba(255,255,255,0) 100%);"></div>
                    <div class="absolute right-0 top-0 h-full w-1/4 z-20"
                        style="background:linear-gradient(to left,#fff8cc 0%,rgba(255,255,255,0) 100%);"></div>
                </div>

                @isset($partners)
                    <!-- Track -->
                    <div class="carousel-container">
                        @foreach ($partners as $partner)
                            <div class="carousel-item flex !items-center flex-col relative mx-5 my-10 px-4 py-3">
                                <img src="{{ asset('storage/' . $partner->image) }}"
                                    class="h-28 rounded-xl shadow-2xl !object-fill" alt="Partners Icon">
                                <h4 class="tracking-wide text-lg m-3">{{ $partner->name_en ?? $partner->name }}</h4>
                            </div>
                        @endforeach
                    </div>
                @endisset
            </div>
        </section>
        <!----------Our Partners Section---------->

        <!-- --------Gallery and News Section-------- -->
        <div class="flex flex-col gap-10 mx-6 md:m-10 lg:mx-20 xl:mx-40 my-20">
            <div class="flex flex-col md:flex-row px-4 gap-10 ">
                <div class="flex-1 overflow-hidden">
                    <div class="flex flex-row justify-between m-3">
                        <h1
                            class="font-bold text-accent uppercase text-lg lg:text-2xl tracking-wider sm:text-left text-center">
                            {{ __('home.gallery') }}
                        </h1>
                        <div class="flex justify-end">

                            <a href="{{ route('gallery') }}"
                                class="bg-black sm:w-full items-center text-accent px-6 py-2 rounded-full cursor-pointer hover:opacity-85 font-semibold">
                                {{ __('home.explore_gallery') }}
                            </a>
                        </div>
                    </div>

                    <div style=" --swiper-navigation-color: #fff; --swiper-pagination-color: #fff; "
                        class="swiper mySwiper2 w-full h-1/2 aspect-[16/9] m-2">
                        @isset($galleries)
                            <div class="swiper-wrapper h-[800px] lg:h-[500px]">
                                @foreach ($galleries as $gallery)
                                    <div class="swiper-slide">
                                        <img src="{{ $gallery->featured_image ? asset('storage/' . $gallery->featured_image) : asset('assets/images/placeholder.jpg') }}"
                                            class="w-full h-full !object-contain" alt="{{ $gallery->title_en }}" />
                                    </div>
                                @endforeach

                            </div>
                        @endisset
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                    @isset($galleries)
                        <div thumbsSlider="" class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                @foreach ($galleries as $index => $gallery)
                                    <div class="swiper-slide">
                                        <img src="{{ $gallery->featured_image ? asset('storage/' . $gallery->featured_image) : asset('assets/images/placeholder.jpg') }}"
                                            class="!w-full !h-[100px] !object-contain" alt="{{ $gallery->title_en }}" />
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endisset
                </div>

                <div class="flex-1 w-full h-full">
                    <div class="flex justify-end">
                        <a href="{{ route('newsAndEvents') }}"
                            class="bg-black items-center text-accent px-4 py-2 rounded-full cursor-pointer hover:opacity-85 font-semibold">
                            {{ __('home.explore_news_articles') }}
                        </a>
                    </div>
                    <div class="drop-shadow-xl shadow-gray-100 bg-white rounded-lg">
                        <!-- Heading for scroll -->
                        <div class="flex flex-row bg-white rounded m-3 p-3">
                            <!-- Explore part -->
                            <div class="mx-3">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
                                    height="20" fill="currentColor">
                                    <path d="M3 6h14M3 12h14M3 18h14" stroke="black" stroke-width="2"
                                        stroke-linecap="round" />
                                    <circle cx="20" cy="6" r="1.5" fill="black" />
                                    <circle cx="20" cy="12" r="1.5" fill="black" />
                                    <circle cx="20" cy="18" r="1.5" fill="black" />
                                </svg>
                            </div>
                            <h1 class="font-bold text-lg text-black">{{ __('home.all_news_and_articles') }}</h1>
                        </div>

                        <!-- Content inside the heading -->
                        @isset($newsAndEvents)
                            <div class="overflow-y-scroll h-[420px] m-3 sticky bg-white">
                                @foreach ($newsAndEvents as $news)
                                    <div class="flex flex-row gap-10 p-2 border-l-accent border-l-[4px] my-2 shadow-sm h-25">
                                        <div class="h-auto w-30">
                                            <img src="{{ isset($news->image) ? asset('storage/' . $news->image) : asset('assets/images/placeholder.jpg') }}"
                                                alt="{{ $news->title_en ?? 'News Image' }}"
                                                class="h-full w-full rounded-lg object-cover" />
                                        </div>

                                        <div class="flex flex-col gap-3">
                                            <a href="{{ route('newsAndEventsDetailPage', $news->slug) }}"
                                                class="line-clamp-2 font-semibold hover:text-accent transition-colors duration-200 cursor-pointer">
                                                {{ $news->name_en ?? 'News Title' }}
                                            </a>
                                            <div class="flex space-x-2">
                                                <img src="{{ asset('assets/images/news-and-events/calender-svgrepo-com.png') }}"
                                                    class="w-4 h-4 !object-contain" alt="date" />
                                                <p class="text-xs text-gray-500">
                                                    {{ isset($news->created_at) ? $news->created_at->format('jS F Y') : 'Date not available' }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endisset
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        @if ($popups->contains(fn($popup) => $popup->image))
            <div id="popup-modal" tabindex="-1" aria-hidden="true"
                class=" fixed inset-0 z-50 flex items-center justify-center bg-black/20">

                <!-- Overlay -->
                <div id="popup-background-overlay" class="absolute inset-0 cursor-pointer"></div>

                <!-- Modal Content -->
                <div
                    class="relative z-50 w-full mx-6 sm:mx-10 md:mx-20 max-w-4xl max-h-[90vh] rounded-xl shadow-2xl overflow-hidden flex flex-col">

                    <!-- Close Button -->
                    <button id="close-modal"
                        class="absolute top-2 right-4 text-accent text-4xl font-bold hover:opacity-60 transition z-50 cursor-pointer"
                        aria-label="Close modal">&times;</button>

                    <!-- Swiper -->
                    <div class="swiper popupSwiper flex-1 relative">
                        <div class="swiper-wrapper h-full">

                            @foreach ($popups as $popup)
                                <div class="swiper-slide w-full h-full flex items-center justify-center select-none ">
                                    <div class="flex flex-col items-center justify-center w-full h-full relative">

                                        <!-- Responsive Image -->
                                        <div
                                            class="w-full h-[60vh] sm:h-[70vh] md:h-[80vh] max-h-[80vh] flex items-center justify-center">
                                            <img src="{{ asset('storage/' . $popup->image) }}"
                                                alt="{{ $popup->name_en }}"
                                                class=" !object-contain transition-all duration-300" />
                                        </div>

                                        <!-- Text Overlay -->
                                        <div
                                            class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/60 backdrop-blur-md px-4 py-2 rounded-xl max-w-[90%] flex items-center justify-center gap-3 flex-wrap sm:flex-nowrap text-center sm:text-left mx-10">
                                            <h2
                                                class="text-white text-base sm:text-lg font-semibold leading-snug break-words w-full sm:w-auto">
                                                {{ $popup->name_en }}
                                            </h2>

                                            @if ($popup->link)
                                                <a href="{{ $popup->link }}" target="_blank"
                                                    class="px-4 py-1.5 bg-accent hover:bg-primary text-black hover:text-white rounded-full text-xs sm:text-sm transition-all ease-in-out whitespace-nowrap">
                                                    Visit Link
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>

                        <!-- Navigation Arrows -->
                        <div
                            class="swiper-button-prev text-white !hover:text-accent transition absolute top-1/2 -translate-y-1/2 left-2 sm:left-4 text-3xl sm:text-4xl cursor-pointer z-50">
                        </div>
                        <div
                            class="swiper-button-next text-white !hover:text-accent transition absolute top-1/2 -translate-y-1/2 right-2 sm:right-4 text-3xl sm:text-4xl cursor-pointer z-50">
                        </div>

                        <!-- Pagination -->
                        <div class="swiper-pagination absolute bottom-2 sm:bottom-3 w-full text-center"></div>
                    </div>
                </div>
            </div>
        @endif
        <style>
        </style>


    </div>
@endsection


@push('scripts')
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            thumbs: {
                swiper: swiper,
            },
        });
    </script>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const modal = document.getElementById("popup-modal");
            const overlay = document.getElementById("popup-background-overlay");
            const closeBtn = document.getElementById("close-modal");

            @if (isset($popups) && count($popups) > 0)
                modal.classList.remove("hidden");
                modal.classList.add("flex");
            @endif

            closeBtn.addEventListener("click", () => {
                modal.classList.add("hidden");
                modal.classList.remove("flex");
            });

            overlay.addEventListener("click", () => {
                modal.classList.add("hidden");
                modal.classList.remove("flex");
            });

            document.addEventListener("keydown", (e) => {
                if (e.key === "Escape" && !modal.classList.contains("hidden")) {
                    modal.classList.add("hidden");
                    modal.classList.remove("flex");
                }
            });

            new Swiper(".popupSwiper", {
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                },
            });
        });
    </script>


    <script>
        let servicesSliderIndex = 0;

        function nextServicesSlider() {
            const slider = document.getElementById("services-slider-content");
            const slides = document.querySelectorAll(".services-review-card");
            if (!slides.length) return;

            const slideWidth = slides[0].getBoundingClientRect().width + 16; // 16 is gap between cards
            const maxIndex = slides.length - Math.floor(slider.offsetWidth / slideWidth);

            if (servicesSliderIndex < maxIndex) {
                servicesSliderIndex++;
                slider.style.transform = `translateX(-${servicesSliderIndex * slideWidth}px)`;
            }
        }

        function prevServicesSlider() {
            const slider = document.getElementById("services-slider-content");
            const slides = document.querySelectorAll(".services-review-card");
            if (!slides.length) return;

            const slideWidth = slides[0].getBoundingClientRect().width + 16;
            if (servicesSliderIndex > 0) {
                servicesSliderIndex--;
                slider.style.transform = `translateX(-${servicesSliderIndex * slideWidth}px)`;
            }
        }
    </script>

    <script>
        (function() {
            const outer = document.querySelector('.partners-marquee');
            if (!outer) return;
            const track = outer.querySelector('.carousel-container');
            if (!track) return;

            // config via data-attributes
            const PADDING = parseInt(outer.dataset.padding || '200', 10); // px from each edge
            const SPEED = parseFloat(outer.dataset.speed || '60'); // px per second

            function compute() {
                // Temporarily stop animation & reset transform for accurate measuring
                track.style.animation = 'none';
                track.style.transform = 'translateX(0)';

                // Force reflow
                void track.offsetWidth;

                const viewportWidth = outer.clientWidth;
                const contentWidth = track.scrollWidth;

                // If everything fits with side paddings, don't animate
                if (contentWidth + PADDING * 2 <= viewportWidth) {
                    track.style.transform = 'translateX(0)';
                    track.style.margin = '0 auto';
                    track.style.animation = 'none';
                    return;
                }

                // Start at +200px (from left), end at rightmost - 200px
                const maxX = PADDING; // positive
                const minX = viewportWidth - contentWidth - PADDING; // negative

                track.style.setProperty('--maxX', maxX + 'px');
                track.style.setProperty('--minX', minX + 'px');

                // Keep constant speed: total distance per cycle is 2 * |maxX - minX|
                const distance = Math.abs(maxX - minX);
                const duration = (2 * distance) / (SPEED > 0 ? SPEED : 60); // seconds
                track.style.setProperty('--duration', duration + 's');

                // Restart animation
                track.style.animation = `bounceX var(--duration) linear infinite`;
            }

            // Recompute on resize
            window.addEventListener('resize', compute);

            // Recompute once images are fully loaded (handles async image sizing)
            const imgs = Array.from(track.querySelectorAll('img'));
            let count = 0;

            function maybeCompute() {
                if (++count >= imgs.length) compute();
            }
            if (imgs.length === 0) compute();
            imgs.forEach(img => img.complete ? maybeCompute() : img.addEventListener('load', maybeCompute, {
                once: true
            }));

            // Fallback compute on window load too
            window.addEventListener('load', compute);
        })();
    </script>

    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush