@extends('frontend.layouts.app')

@push('styles')
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>

    </style>
@endpush

@section('title', 'Home')

@section('content')
    <!-- Slider Section -->
    <section id="home-slider" class="mt-10 pt-[120px] lg:pt-[120px]">
        @if ($sliders->count())
            <div id="default-carousel" class="relative w-full " data-carousel="slide">
                <!-- Carousel wrapper -->
                <div class="relative h-[240px] sm:h-[340px] overflow-hidden md:h-[600px] lg:h-[800px]">
                    @foreach ($sliders as $index => $slider)
                        <div class="{{ $index === 0 ? '' : 'hidden' }} duration-700 ease-in-out"
                            data-carousel-item="{{ $index === 0 ? 'active' : '' }}">
                            <img src="{{ asset($slider->image) }}" alt="Slider Image {{ $index + 1 }}"
                                class="absolute block w-full h-full object-cover" />

                            <!-- Text Overlay -->
                            <div
                                class="absolute inset-0 flex flex-col space-y-1 md:space-y-3 text-left bg-black/40 py-10 sm:py-20 px-20 md:px-40 md:pb-20 lg:py-40">
                                @if (app()->getLocale() == 'np')
                                    <h2 class="text-white text-base sm:text-xl md:text-3xl  font-bold max-w-2xl"
                                        style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); -webkit-text-stroke: 1px rgba(19, 18, 18, 0.1);">
                                        {{ $slider->name_np }}
                                    </h2>
                                @else
                                    <h2 class="text-white text-base sm:text-xl md:text-3xl font-bold max-w-2xl"
                                        style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); -webkit-text-stroke: 1px rgba(19, 18, 18, 0.1);">
                                        {{ $slider->name_en }}
                                    </h2>
                                @endif

                                @if ($slider->link)
                                    <a href="{{ $slider->link }}" target="_blank"
                                        class=" md:mx-0 sm:px-10 py-1 sm:py-2 w-34 sm:w-[300px] text-center text-white border-2 hover:opacity-85 font-semibold text-sm sm:text-lg">
                                        {{ __('homepage.slider.see_project_detail') }}
                                    </a>
                                @endif
                            </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">
                    @foreach ($sliders as $index => $slider)
                        <button type="button"
                            class="w-3 h-3 rounded-full {{ $index === 0 ? 'bg-gray-400' : 'bg-gray-300' }}"
                            aria-current="{{ $index === 0 ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"
                            data-carousel-slide-to="{{ $index }}">
                        </button>
                    @endforeach
                </div>

                <!-- Slider controls -->
                <button type="button"
                    class="absolute top-0 left-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" fill="none" viewBox="0 0 6 10"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 1 1 5l4 4" />
                        </svg>
                        <span class="sr-only">{{ __('homepage.slider.previous') }}</span>
                    </span>
                </button>

                <button type="button"
                    class="absolute top-0 right-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" fill="none" viewBox="0 0 6 10"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 9 4-4-4-4" />
                        </svg>
                        <span class="sr-only">{{ __('homepage.slider.next') }}</span>
                    </span>
                </button>
            </div>
        @else
            <div class="text-center py-10 bg-gray-100">
                <p class="text-gray-600 text-lg">{{ __('homepage.slider.no_sliders') }}</p>
            </div>
        @endif
    </section>

    <!-- Notices Section -->
    <section class="bg-[#007300] text-white lg:py-10">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-12">
            <div class="flex flex-col lg:flex-row lg:items-start gap-10">
                <!-- Section Header -->
                <div class="flex flex-col lg:w-1/4 items-center lg:items-left text-center lg:text-left lg:space-y-1 ">
                    <div class="text-center mx-auto max-w-8xl pt-10">
                        <p
                            class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-white uppercase">
                            {{ __('homepage.notices.announcements') }}
                        </p>
                        <h2
                            class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-white lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                            <span class="relative inline-block text-[#5da174]">
                                <svg viewBox="0 0 52 24" fill="currentColor"
                                    class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                    <defs>
                                        <pattern id="d5589eeb-3fca-4f01-ac3e-983224745704" x="0" y="0" width=".135"
                                            height=".30">
                                            <circle cx="1" cy="1" r=".7"></circle>
                                        </pattern>
                                    </defs>
                                    <rect fill="url(#d5589eeb-3fca-4f01-ac3e-983224745704)" width="52" height="24">
                                    </rect>
                                </svg>
                                <span
                                    class="relative text-2xl lg:text-3xl font-extrabold text-white">{{ __('homepage.notices.notices') }}</span>
                            </span>
                        </h2>
                    </div>
                    <a href="{{ url('notices') }}"
                        class="inline-flex items-center text-white text-sm lg:text-base font-medium hover:text-[#e7e011]">
                        {{ __('homepage.slider.view_all') }}
                        <svg class="w-3 h-3 lg:w-5 lg:h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
                <!-- Slider -->
                <div class="lg:w-3/4 px-4 relative">
                    <div
                        class="slides-container flex h-48 overflow-x-auto snap-x snap-mandatory scroll-smooth space-x-4 rounded-lg p-2 before:w-[90%] before:shrink-0 after:w-[90%] after:shrink-0 md:before:w-0 md:after:w-0 ">

                        @forelse($notices as $notice)
                            <div
                                class="slide flex-shrink-0 snap-center w-64 hover:bg-white/10 hover:rounded-lg overflow-hidden hover:shadow-lg">
                                <div class="p-8 flex flex-col h-full justify-between">
                                    <div>
                                        <p class="text-sm">
                                            {{ app()->getLocale() == 'np' ? $notice->type->name_np : $notice->type->name_en }}
                                        </p>
                                        <p class="text-xs opacity-70 mb-2">
                                            {{ \Carbon\Carbon::parse($notice->published_date)->format('d M, Y') }}
                                        </p>
                                        <a href="{{ url('notices-detail/' . $notice->slug) }}"
                                            class="block mt-3 flex items-center gap-2 text-base font-semibold leading-snug text-white hover:text-white transition">
                                            <span>
                                                {{ app()->getLocale() == 'np' ? Str::limit($notice->name_np, 100) : Str::limit($notice->name_en, 100) }}
                                            </span>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white"
                                                fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                                            </svg>
                                        </a>



                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="slide flex items-center justify-center text-white w-full">
                                <p>No featured notices available.</p>
                            </div>
                        @endforelse
                    </div>

                    <!-- Navigation Arrows -->
                    <div class="absolute inset-y-0 left-0 px-2 flex items-center">
                        <button role="button"
                            class="prev bg-white text-gray-800 p-2 rounded-full shadow hover:bg-gray-200 transition">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
                            </svg>
                        </button>
                    </div>
                    <div class="absolute inset-y-0 right-0 flex items-center">
                        <button role="button"
                            class="next bg-white text-gray-800 p-2 rounded-full shadow hover:bg-gray-200 transition">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- statistics section -->
    @if ($statistics->count())
        <div class="bg-[#F5FEF3] py-10">
            <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-[#007300] uppercase">
                    {{ __('homepage.statistics.our_stats') }}
                </p>
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-[#007300] lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#007300] ">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="d5589eeb-3fca-4f01-ac3e-983224745704" x="0" y="0" width=".135"
                                    height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#d5589eeb-3fca-4f01-ac3e-983224745704)" width="52" height="24">
                            </rect>
                        </svg>
                        <span
                            class="relative text-2xl lg:text-3xl font-extrabold text-primary">{{ __('homepage.statistics.ueba') }}</span>
                    </span>
                    {{ __('homepage.statistics.project_reach') }}
                </h2>
            </div>

            @if ($statistics->count())
                <div
                    class="relative w-full p-px mx-auto mb-4 overflow-hidden transition-shadow duration-300 border rounded lg:mb-8 lg:max-w-6xl group hover:shadow-xl">
                    <div
                        class="absolute bottom-0 left-0 w-full h-1 duration-300 origin-left transform scale-x-0 bg-[#007300] group-hover:scale-x-100">
                    </div>
                    <div
                        class="absolute bottom-0 left-0 w-1 h-full duration-300 origin-bottom transform scale-y-0 bg-[#007300] group-hover:scale-y-100">
                    </div>
                    <div
                        class="absolute top-0 left-0 w-full h-1 duration-300 origin-right transform scale-x-0 bg-[#007300] group-hover:scale-x-100">
                    </div>
                    <div
                        class="absolute bottom-0 right-0 w-1 h-full duration-300 origin-top transform scale-y-0 bg-[#007300] group-hover:scale-y-100">
                    </div>

                    <div
                        class="relative flex flex-col gap-6 sm:gap-0 items-center h-full py-10 bg-white rounded-sm sm:items-stretch lg:flex-row">
                        @foreach ($statistics as $index => $stat)
                            <div class="flex-1 px-6 py-6 text-center">
                                <div
                                    class="mx-auto mb-4 h-20 w-20 rounded-full border-4 border-primary flex items-center justify-center shadow-xl">
                                    <img src="{{ asset($stat->icon) }}" alt="{{ $stat->name_en }}"
                                        class="h-10 w-10 object-contain" />
                                </div>


                                <h6 class="text-2xl md:text-xl lg:text-3xl font-bold text-primary">
                                    {{ $stat->count }}
                                </h6>
                                <p class="mt-2 text-base md:text-lg lg:text-xl text-gray-600">
                                    {{ app()->getLocale() == 'np' ? $stat->name_np : $stat->name_en }}
                                </p>
                            </div>

                            @if ($index !== $statistics->count() - 1)
                                <!-- Divider -->
                                <div
                                    class="w-40 h-1 my-4 mx-auto transition duration-300 transform bg-gray-300 rounded-full sm:my-0 sm:h-auto sm:w-1">
                                </div>
                            @endif
                        @endforeach
                    </div>

                </div>
            @endif
        </div>
    @endif
    <!-- statistics section -->

    <!-- Publications Section -->
    <div class="min-h-[100px] bg-[#007300] text-white py-10">
        <section class="z-30 max-w-8xl mx-auto">
            <div class="w-full overflow-hidden relative">

                <!-- Scrolling container -->
                <div class="w-full flex flex-col px-6">
                    <div class="flex justify-around flex-row relative text-left align-middle items-center">
                        <div class="mb-10 text-center md:mb-12 max-w-8xl pt-10">
                            <p
                                class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-white uppercase rounded-full bg-teal-accent-400">
                                {{ __('homepage.publications.our_research') }}
                            </p>
                            <h2
                                class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-white lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                                <span class="relative inline-block text-[#5da174]">
                                    <svg viewBox="0 0 52 24" fill="currentColor"
                                        class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                        <defs>
                                            <pattern id="dot-pattern-1" x="0" y="0" width=".135" height=".30">
                                                <circle cx="1" cy="1" r=".7"></circle>
                                            </pattern>
                                        </defs>
                                        <rect fill="url(#dot-pattern-1)" width="52" height="24"></rect>
                                    </svg>
                                    <span class="relative text-2xl lg:text-3xl font-extrabold text-white">
                                        {{ __('homepage.publications.publications') }}
                                    </span>
                                </span>
                            </h2>
                        </div>
                        <a href="{{ url('publications') }}"
                            class="m-3 font-medium flex justify-between align-middle text-white hover:text-[#e7e011] transition items-center">
                            {{ __('homepage.slider.view_all') }}

                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 pb-10 gap-6 lg:gap-10 justify-center">
                        @foreach ($publications as $publication)
                            <div
                                class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col lg:flex-row">
                                <a href="{{ url('publications-detail/' . $publication->slug) }}" class="">
                                    <img class="rounded-t-sm lg:rounded-t-none lg:rounded-l-sm h-40 sm:h-60 lg:h-full lg:w-[260px] object-cover w-full"
                                        src="{{ asset($publication->thumbnail_image ?: '/images/default-publication.jpg') }}"
                                        alt="{{ $publication->name_en }}" />
                                </a>
                                <div class="p-5 flex-1">
                                    <a href="{{ url('publications-detail/' . $publication->slug) }}">
                                        <p class="text-gray-500 font-medium text-sm uppercase">
                                            {{ app()->getLocale() == 'np' ? $publication->type->name_np : $publication->type->name_en }}
                                        </p>
                                        <h5
                                            class="mb-2  text-xl md:text-2xl font-bold tracking-tight text-primary line-clamp-2">
                                            {{ app()->getLocale() == 'np' ? $publication->name_np : $publication->name_en }}
                                        </h5>
                                    </a>
                                    <p class="mb-3 font-normal text-gray-700 !text-wrap">
                                        {{ app()->getLocale() == 'np' ? Str::limit(strip_tags($publication->description_np), 150) : Str::limit(strip_tags($publication->description_en), 150) }}
                                    </p>
                                    <a href="{{ url('publications-detail/' . $publication->slug) }}"
                                        class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-primary border-2 border-primary hover:bg-[#007300] hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out">
                                        {{ __('homepage.slider.read_more') }}
                                        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
        </section>
    </div>
    <!-- Publications Section -->

    <!-- Events Section -->
    <div class="text-primary bg-[#F5FEF3] py-10">
        <section class="z-30 max-w-8xl mx-auto">
            <div class="w-full overflow-hidden relative">

                <!-- Heading -->
                <div class="w-full flex flex-col justify-around px-6">
                    <div class="flex justify-around flex-row relative py-4 text-left align-middle items-center">
                        <div class="mb-10 text-center md:mb-12 max-w-8xl pt-10">
                            <p
                                class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                                {{ __('homepage.events.our_calendar') }}
                            </p>
                            <h2
                                class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                                <span class="relative inline-block text-[#5da174]">
                                    <svg viewBox="0 0 52 24" fill="currentColor"
                                        class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                        <defs>
                                            <pattern id="dot-pattern-1" x="0" y="0" width=".135" height=".30">
                                                <circle cx="1" cy="1" r=".7"></circle>
                                            </pattern>
                                        </defs>
                                        <rect fill="url(#dot-pattern-1)" width="52" height="24"></rect>
                                    </svg>
                                    <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                                        {{ __('homepage.events.events') }}
                                    </span>
                                </span>
                            </h2>
                        </div>
                        <a href="{{ url('events') }}"
                            class="m-3 font-medium flex justify-between align-middle text-primary hover:opacity-80 transition items-center ">
                            {{ __('homepage.slider.view_all') }}
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>

                    <!-- Events Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 pb-10 gap-6 lg:gap-10 justify-center">
                        @foreach ($events as $event)
                            <div
                                class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col lg:h-[240px]">
                                <div class="p-5 flex-1">
                                    <a href="{{ url('events-detail/' . $event->slug) }}">
                                        <p class="text-gray-500 font-medium text-sm">
                                            {{ $event->published_date ? \Carbon\Carbon::parse($event->published_date)->format('d M, Y') : '' }}
                                        </p>
                                        <h5
                                            class="mb-2 text-xl md:text-2xl font-bold tracking-tight text-primary line-clamp-1">
                                            {{ app()->getLocale() == 'np' ? $event->name_np : $event->name_en }}
                                        </h5>
                                    </a>
                                    <p class="mb-3 font-normal text-gray-700 !text-wrap line-clamp-2">
                                        {{ app()->getLocale() == 'np' ? Str::limit(strip_tags($event->description_np), 150) : Str::limit(strip_tags($event->description_en), 150) }}
                                    </p>
                                    <a href="{{ url('events-detail/' . $event->slug) }}"
                                        class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-primary border-2 border-primary hover:bg-[#007300] hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out">
                                        {{ __('homepage.slider.read_more') }}
                                        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Events Section -->

    <!-- Media and Stories Section -->
    <div class="text-white bg-[#007300] py-10">
        <section class="z-30 max-w-8xl lg:mx-auto mx-6">
            <div class="w-full overflow-hidden relative">
                <div class="w-full flex flex-col justify-around">
                    <div class="flex justify-around flex-row relative py-4 text-left align-middle items-center">
                        <div class="mb-10 text-center md:mb-12 max-w-8xl pt-10">
                            <p
                                class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-white uppercase rounded-full bg-teal-accent-400">
                                {{ __('homepage.media_and_events.our_highlights') }}
                            </p>
                            <h2
                                class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-white lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                                <span class="relative inline-block text-[#5da174]">
                                    <svg viewBox="0 0 52 24" fill="currentColor"
                                        class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                        <defs>
                                            <pattern id="dot-pattern-1" x="0" y="0" width=".135" height=".30">
                                                <circle cx="1" cy="1" r=".7"></circle>
                                            </pattern>
                                        </defs>
                                        <rect fill="url(#dot-pattern-1)" width="52" height="24"></rect>
                                    </svg>
                                    <span class="relative text-2xl lg:text-3xl font-extrabold text-white">
                                        {{ __('homepage.media_and_events.media_stories') }}
                                    </span>
                                </span>
                            </h2>
                        </div>
                        <a href="{{ url('media-and-stories') }}"
                            class="m-3 font-medium flex justify-between align-middle text-white hover:text-[#e7e011] transition-all items-center">
                            {{ __('homepage.slider.view_all') }}
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 pb-10 gap-6 lg:gap-10 justify-center mx-10">
                        @foreach ($mediaItems as $media)
                            <div class="max-w-full bg-white border border-gray-200 rounded-sm shadow-sm flex flex-col">
                                <a href="{{ url('media-and-stories-detail/' . $media->slug) }}">
                                    <img class="rounded-t-sm h-60 object-cover w-full"
                                        src="{{ asset($media->thumbnail_image ?: '/images/default-publication.jpg') }}"
                                        alt="{{ $media->name_en }}" />
                                </a>
                                <div class="p-5 flex-1">
                                    <div class="flex space-x-2 mb-1">
                                        <img src="{{ asset('assets/images/news-and-events/calender-svgrepo-com.png') }}"
                                            class="w-4 h-4 object-contain" alt="date" />
                                        <p class="text-sm text-gray-500">
                                            {{ \Carbon\Carbon::parse($media->published_date)->format('d M, Y') }}
                                        </p>
                                    </div>
                                    <a href="{{ url('media-and-stories-detail/' . $media->slug) }}">
                                        <h5
                                            class="mb-2 text-xl font-bold tracking-tight text-primary line-clamp-2 min-h-[60px]">
                                            {{ app()->getLocale() == 'np' ? $media->name_np : $media->name_en }}
                                        </h5>
                                    </a>
                                    <p class="mb-3 font-normal text-gray-700  !text-wrap min-h-[80px] line-clamp-3">
                                        {{ app()->getLocale() == 'np' ? Str::limit(strip_tags($media->description_np), 150) : Str::limit(strip_tags($media->description_en), 150) }}
                                    </p>
                                    <a href="{{ url('media-and-stories-detail/' . $media->slug) }}"
                                        class="inline-flex items-center px-3 py-2 text-sm font-medium text-primary border-2 border-primary hover:bg-[#007300] hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 transition-all ease-in-out">
                                        Read more
                                        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </section>
    </div>
    <!-- End Media and Stories Section -->

    <!-- Partners and Supporters Section -->
    <div class="text-primary bg-[#F5FEF3] py-16">
        <section class="z-30 max-w-8xl md:mx-auto mx-6">
            <div class="w-full overflow-hidden relative">

                <!-- Heading -->
                <div class="flex justify-center flex-row relative py-4 text-left align-middle items-center">
                    <div class="text-center max-w-8xl">
                        <p
                            class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                            {{ __('homepage.partners_and_supporters.with_us') }}
                        </p>
                        <h2
                            class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                            <span class="relative inline-block text-[#5da174]">
                                <svg viewBox="0 0 52 24" fill="currentColor"
                                    class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                    <defs>
                                        <pattern id="dot-pattern-1" x="0" y="0" width=".135" height=".30">
                                            <circle cx="1" cy="1" r=".7"></circle>
                                        </pattern>
                                    </defs>
                                    <rect fill="url(#dot-pattern-1)" width="52" height="24"></rect>
                                </svg>
                                <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                                    {{ __('homepage.partners_and_supporters.partners_supporters') }}
                                </span>
                            </span>
                        </h2>
                    </div>
                </div>

                <!-- Carousel Section -->
                @isset($partners)
                    <div class="relative w-full overflow-hidden mt-10">
                        <!-- Fading gradient sides -->
                        <div class="pointer-events-none absolute inset-0">
                            <div class="absolute left-0 top-0 h-full w-1/6 z-20"
                                style="background:linear-gradient(to right,#F5FEF3 0%,rgba(245,254,243,0) 100%);"></div>
                            <div class="absolute right-0 top-0 h-full w-1/6 z-20"
                                style="background:linear-gradient(to left,#F5FEF3 0%,rgba(245,254,243,0) 100%);"></div>
                        </div>

                        <!-- Infinite marquee scroll -->
                        <div class="marquee-wrapper">
                            <div class="marquee-row animate-marquee">
                                @foreach ($partners as $partner)
                                    <div
                                        class="flex flex-col items-center mx-6 sm:mx-8 min-w-[120px] sm:min-w-[160px] md:min-w-[180px]">
                                        <a href="{{ $partner->url }}" target="_blank" rel="noopener noreferrer">
                                            <img src="{{ asset($partner->logo) }}"
                                                class="h-16 sm:h-20 md:h-28 lg:h-32 rounded-xl object-contain shadow-md hover:scale-105 transition-transform duration-300"
                                                alt="Partner Logo">
                                        </a>
                                    </div>
                                @endforeach

                                <!-- Duplicate logos for infinite loop -->
                                @foreach ($partners as $partner)
                                    <div
                                        class="flex flex-col items-center mx-6 sm:mx-8 min-w-[120px] sm:min-w-[160px] md:min-w-[180px]">
                                        <a href="{{ $partner->url }}" target="_blank" rel="noopener noreferrer">
                                            <img src="{{ asset($partner->logo) }}"
                                                class="h-16 sm:h-20 md:h-28 lg:h-32 rounded-xl object-contain shadow-md hover:scale-105 transition-transform duration-300"
                                                alt="Partner Logo">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endisset
            </div>
        </section>
    </div>

    <!-- Marquee Animation Styles -->
    <style>
        .marquee-wrapper {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .marquee-row {
            display: flex;
            align-items: center;
            animation: marquee 25s linear infinite;
            width: max-content;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0%);
            }

            100% {
                transform: translateX(-50%);
            }
        }
    </style>


    <!-- --------Team Section-------- -->
    @if ($teamMembers->isNotEmpty())
        <section class="w-full px-6 lg:px-20 py-10 bg-white">
            <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                    {{ __(key: 'homepage.team.meet_the_people') }}
                </p>
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#5da174]">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="d5589eeb-3fca-4f01-ac3e-983224745704" x="0" y="0" width=".135"
                                    height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#d5589eeb-3fca-4f01-ac3e-983224745704)" width="52" height="24">
                            </rect>
                        </svg>
                        <span
                            class="relative text-2xl lg:text-3xl font-extrabold text-primary">{{ __(key: 'homepage.team.our_team') }}
                        </span>
                    </span>
                </h2>
            </div>


            <div class="swiper profile-swiper overflow-hidden w-full p-2">
                <div class="swiper-wrapper py-6 ">

                    @foreach ($teamMembers->where('is_featured', 1) as $team)
                        <div
                            class="swiper-slide w-72 h-auto  mx-auto flex flex-col items-start justify-start p-4 sm:justify-center">

                            <article
                                class="w-[240px] md:w-[300px] bg-[#F5FEF3] p-4 rounded-2xl shadow-md flex flex-col items-center text-center gap-4 h-[380px]">
                                <div
                                    class="text-brandBlue font-bold text-primary {{ mb_strlen($team->designation?->{'name_' . app()->getLocale()} ?? '') > 25 ? 'text-md' : 'text-lg' }}">
                                    {{ $team->designation?->{'name_' . app()->getLocale()} ?? '—' }}
                                </div>

                                <div class="text-sm font-medium text-gray-600">
                                    {{ $team->department?->{'name_' . app()->getLocale()} ?? '—' }}
                                </div>

                                <img src="{{ asset($team->image) }}" alt="{{ $team->{'name_' . app()->getLocale()} }}"
                                    class="w-32 h-32 object-cover rounded-full border-2 border-gray-400">

                                <div class="text-primary text-lg font-bold">
                                    {{ $team->{'name_' . app()->getLocale()} }}
                                </div>

                                <div class="flex flex-col items-center gap-3 mt-2 text-gray-600 text-left w-full max-w-xs">
                                    <div class="flex items-center gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1 text-gray-600"
                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 5a2 2 0 012-2h1.586a1 1 0 01.707.293l2.414 2.414a1 1 0 01.293.707V9a1 1 0 01-.293.707l-1.293 1.293a16.016 16.016 0 006.586 6.586l1.293-1.293A1 1 0 0115 15h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 01.293.707V21a2 2 0 01-2 2h-.586c-9.389 0-17-7.611-17-17V5z" />
                                        </svg>
                                        <span>{{ $team->phone_no ?? '—' }}</span>
                                    </div>
                                    <a href="mailto:{{ $team->email ?? '' }}"
                                        class="flex items-center gap-2 hover:text-primary transition-colors duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                        <span>{{ $team->email ?? '—' }}</span>
                                    </a>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>

                <div class="flex flex-row items-center justify-center w-full lg:w-auto space-x-4 mt-4">
                    <span
                        class="profile-swiper-button-prev-custom swiper-nav-btn w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white hover:bg-primary-dark cursor-pointer transition-all duration-200">
                        &#10094; <!-- left arrow -->
                    </span>
                    <span
                        class="profile-swiper-button-next-custom swiper-nav-btn w-10 h-10 flex items-center justify-center rounded-full bg-primary text-white hover:bg-primary-dark cursor-pointer  transition-all duration-200">
                        &#10095; <!-- right arrow -->
                    </span>
                </div>
            </div>
        </section>
    @endif

    <!-- --------Gallery Section-------- -->
    <div class="bg-[#F5FEF3]">
        <div class="tab-wrapper w-full px-6 py-10 max-w-8xl mx-auto ">
            <div class="flex flex-col sm:flex-row justify-around items-center  gap-3">
                <div class="text-center pt-10">
                    <p
                        class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                        {{ __(key: 'homepage.gallery.highlights') }}
                    </p>
                    <h2
                        class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                        <span class="relative inline-block text-[#5da174]">
                            <svg viewBox="0 0 52 24" fill="currentColor"
                                class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                                <defs>
                                    <pattern id="dot-pattern-1" x="0" y="0" width=".135" height=".30">
                                        <circle cx="1" cy="1" r=".7"></circle>
                                    </pattern>
                                </defs>
                                <rect fill="url(#dot-pattern-1)" width="52" height="24"></rect>
                            </svg>
                            <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                                {{ __(key: 'homepage.gallery.image_video_gallery') }}</span>
                        </span>
                    </h2>
                </div>
                <div class="tabs flex justify-center sm:justify-end items-end">
                    <button class="tab active"
                        data-tab="image-gallery">{{ __(key: 'homepage.gallery.image_gallery') }}</button>
                    <button class="tab"
                        data-tab="video-gallery">{{ __(key: 'homepage.gallery.video_gallery') }}</button>
                </div>
            </div>
            <div class="tab-content h-full xl:h-[560px]" id="image-gallery">
                <div class="flex flex-col md:flex-row px-4 gap-10">
                    <div class="flex-1 overflow-hidden">
                        <div style=" --swiper-navigation-color: #fff; --swiper-pagination-color: #fff; "
                            class="swiper mySwiper2 w-full h-1/2 aspect-[24/24] m-2">
                            @isset($imageGalleries)
                                <div class="swiper-wrapper h-[800px] lg:h-[500px]">
                                    @foreach ($imageGalleries as $gallery)
                                        <div class="swiper-slide">
                                            <img src="{{ $gallery->cover_image ? asset($gallery->cover_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($imageGalleries)
                            <div thumbsSlider="" class="swiper mySwiper">
                                <div class="swiper-wrapper">
                                    @foreach ($imageGalleries as $index => $gallery)
                                        <div class="swiper-slide">

                                            <img src="{{ $gallery->cover_image ? asset($gallery->cover_image) : asset('assets/images/placeholder.jpg') }}"
                                                class="!w-full !h-[100px] !object-contain" alt="{{ $gallery->title_en }}" />

                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endisset
                    </div>

                    {{-- Albums Section --}}
                    <div class="flex-1 w-full">

                        <div class="flex justify-end">
                            <a href="{{ route('gallery') }}"
                                class="bg-white text-primary border-2 border-primary hover:bg-primary hover:text-white px-4 py-2 rounded-sm cursor-pointer hover:opacity-85 font-semibold transition-all ease-in-out">
                                {{ __('homepage.gallery.explore_image_gallery') }} </a>
                        </div>

                        <div class="drop-shadow-xl shadow-gray-100 bg-white rounded-sm">
                            <div class="flex flex-row bg-white rounded m-3 p-3">
                                <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-primary">{{ __(key: 'homepage.gallery.albums') }}</h1>
                            </div>

                            <div class="overflow-y-scroll h-64 md:h-80 lg:h-96 m-3  bg-white">
                                @foreach ($imageGalleries as $gallery)
                                    <div
                                        class="flex flex-row gap-10 p-2 border-l-primary border-l-[4px] my-2 shadow-sm h-25">
                                        <div class="h-[60px] w-[100px]">
                                            <img src="{{ $gallery->cover_image ? asset($gallery->cover_image) : asset('assets/images/placeholder.jpg') }}"
                                                alt="{{ $gallery->name_en }}"
                                                class="h-full w-full rounded-lg object-cover" />
                                        </div>
                                        <div class="flex flex-col gap-3">
                                            <a href="{{ url('gallery-detail/' . $gallery->slug) }}"
                                                class="line-clamp-2 font-semibold hover:text-primary transition-colors duration-200 cursor-pointer">
                                                {{ app()->getLocale() == 'np' ? $gallery->name_np : $gallery->name_en }}
                                            </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">
                                                    {{ \Carbon\Carbon::parse($gallery->published_date)->format('jS F, Y') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @php
                use Illuminate\Support\Str;

                if (!function_exists('generateEmbedIframe')) {
                    function generateEmbedIframe($url)
                    {
                        // YouTube
                        if (Str::contains($url, ['youtube.com', 'youtu.be'])) {
                            if (Str::contains($url, 'watch?v=')) {
                                $embedUrl = str_replace('watch?v=', 'embed/', $url);
                            } elseif (Str::contains($url, 'youtu.be')) {
                                $videoId = Str::afterLast($url, '/');
                                $embedUrl = "https://www.youtube.com/embed/{$videoId}";
                            } else {
                                $embedUrl = $url;
                            }

                            return '<iframe class="w-full h-full" src="' .
                                $embedUrl .
                                '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
                        }

                        // Facebook
                        if (Str::contains($url, 'facebook.com')) {
                            $encodedUrl = urlencode($url);
                            return '<iframe class="w-full h-full" src="https://www.facebook.com/plugins/video.php?href=' .
                                $encodedUrl .
                                '&show_text=false" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>';
                        }

                        // TikTok
                        if (Str::contains($url, 'tiktok.com')) {
                            $videoId = basename(parse_url($url, PHP_URL_PATH));
                            return '
        <blockquote class="tiktok-embed w-full h-full" cite="' .
                                $url .
                                '" data-video-id="' .
                                $videoId .
                                '" style="max-width: 100%; min-width: 100%; height: 100%;">
            <section></section>
        </blockquote>
        <script async src="https://www.tiktok.com/embed.js"></script>';
                        }

                        // Instagram
                        if (Str::contains($url, 'instagram.com')) {
                            return '
        <blockquote class="instagram-media w-full h-full" data-instgrm-permalink="' .
                                $url .
                                '" data-instgrm-version="14" style="margin: auto;"></blockquote>
        <script async src="https://www.instagram.com/embed.js"></script>';
                        }

                        return '<p>' . __('homepage.gallery.unsupported_video_format') . '</p>';
                    }
                }
            @endphp
            @if ($videoGalleries->isNotEmpty())
                <div x-data="{ showModal: false, embedCode: '' }">
                    <div id="video-gallery" class="tab-content hidden">
                        <div class="flex flex-col md:flex-row px-4 gap-10">
                            <!-- Left Video Grid -->
                            <div class="flex-1 overflow-hidden">
                                <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 gap-6">
                                    @foreach ($videoGalleries as $video)
                                        <div class="w-full aspect-[3/4] overflow-hidden">
                                            <div class="w-full h-full">
                                                {!! generateEmbedIframe($video->value) !!}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Right Sidebar List -->
                            <div class="flex-1 w-full h-full">
                                <div class="flex justify-end">
                                    <a href="{{ route('video-gallery') }}"
                                        class="bg-white text-primary border-2 border-primary hover:bg-[#007300] hover:text-white px-4 py-2 rounded-sm cursor-pointer hover:opacity-85 font-semibold transition-all ease-in-out">
                                        {{ __('homepage.gallery.explore_video_gallery') }} </a>
                                </div>
                                <div class="bg-white drop-shadow-xl rounded-sm">
                                    <div class="flex items-center gap-3 bg-white rounded m-2 p-3">
                                        <div>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                fill="currentColor" viewBox="0 0 24 24">
                                                <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-primary">
                                            {{ __(key: 'homepage.gallery.video_albums') }}
                                        </h1>
                                    </div>

                                    <div class="overflow-y-scroll h-[420px] m-3 bg-white">
                                        @foreach ($videoGalleries as $video)
                                            <div class="flex gap-4 p-2 border-l-4 border-primary my-2 shadow-sm cursor-pointer"
                                                @click="
                                                                                                                                                                                                                                                                                                                                                    embedCode = @js(generateEmbedIframe($video->value));
                                                                                                                                                                                                                                                                                                                                                    showModal = true;
                                                                                                                                                                                                                                                                                                                                                    $nextTick(() => {
                                                                                                                                                                                                                                                                                                                                                        if (window.instagramEmbedLoad) instagramEmbedLoad();
                                                                                                                                                                                                                                                                                                                                                        if (window.tiktokEmbedLoad) tiktokEmbedLoad();
                                                                                                                                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                                                                                                                                                ">
                                                <div class="h-[60px] w-[100px] flex-shrink-0">
                                                    <img src="{{ asset('assets/images/video.png') }}" alt="Thumbnail"
                                                        class="h-full w-full object-cover rounded-lg" />
                                                </div>
                                                <div class="flex flex-col justify-between">
                                                    @if (app()->getLocale() == 'np')
                                                        <span
                                                            class="line-clamp-2 font-semibold hover:text-primary transition-colors">
                                                            {{ $video->name_np }}
                                                        </span>
                                                    @else
                                                        <span
                                                            class="line-clamp-2 font-semibold hover:text-primary transition-colors">
                                                            {{ $video->name_en }}
                                                        </span>
                                                    @endif
                                                    <div class="flex items-center gap-2 text-xs text-gray-500">
                                                        <img src="{{ asset('assets/images/news-and-events/calender-svgrepo-com.png') }}"
                                                            alt="Date" class="w-4 h-4" />
                                                        <span>{{ \Carbon\Carbon::parse($video->created_at)->format('jS F, Y') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    <div x-show="showModal" x-cloak @click.self="showModal = false"
                        @keydown.window.escape="showModal = false" tabindex="0" x-trap.noscroll="showModal"
                        class="fixed inset-0 z-50 bg-black bg-opacity-60 flex items-center justify-center">
                        <div class="bg-white rounded-lg p-4 max-w-4xl w-full relative" @click.stop>
                            <button @click="showModal = false"
                                class="absolute top-2 right-2 text-2xl text-gray-700 hover:text-black"
                                aria-label="Close modal">
                                &times;
                            </button>
                            <div class="w-full aspect-video" x-html="embedCode"></div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- popup section -->
    @if ($popups->isNotEmpty())
        <div id="popup-modal" tabindex="-1" aria-hidden="true"
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-xs">

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

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

                <!-- Close Button -->
                <button id="close-modal"
                    class="absolute top-2 right-4 text-primary text-4xl font-bold hover:opacity-60 transition z-50"
                    aria-label="{{ __('homepage.pop_up.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="w-full h-full flex flex-col items-center justify-center relative">

                                    <!-- Responsive Image -->
                                    <div
                                        class="w-full h-[60vh] sm:h-[70vh] md:h-[70vh] max-h-[80vh] flex items-center justify-center">
                                        <img src="{{ asset($popup->image) }}" alt="{{ $popup->name_en }}"
                                            class="object-contain transition-all duration-300" />
                                        <!-- Text Overlay -->
                                        <div
                                            class="absolute bottom-4 bg-black/60 backdrop-blur-md px-4 py-2 rounded-xl max-w-[90%] flex flex-wrap sm:flex-nowrap items-center justify-center gap-3 text-center sm:text-left">
                                            <h2
                                                class="text-white text-base sm:text-lg font-semibold leading-snug break-words w-full sm:w-auto">
                                                {{ $popup->name_en }}
                                            </h2>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Navigation Arrows -->
                    <div
                        class="swiper-button-next absolute top-1/2 -translate-y-1/2 right-2 sm:right-4 text-3xl sm:text-4xl text-white hover:text-accent transition 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

@endsection

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

    <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>

    <script>
        const slidesContainer = document.querySelector(".slides-container");
        const slideWidth = slidesContainer.querySelector(".slide").clientWidth;
        const prevButton = document.querySelector(".prev");
        const nextButton = document.querySelector(".next");

        nextButton.addEventListener("click", () => {
            slidesContainer.scrollLeft += slideWidth;
        });

        prevButton.addEventListener("click", () => {
            slidesContainer.scrollLeft -= slideWidth;
        });
    </script>

    <script>
        const swiper = new Swiper('.noticeSwiper', {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 1,
            freeMode: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

    <!-- Home Slider -->
    <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>

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

    <script>
        let servicesSliderIndex = 0;

        function nextServicesSlider() {
            const servicesSliderContent = document.getElementById(
                "services-slider-content"
            );
            const servicesSlides = document.querySelectorAll(".services-review-card");
            const totalSlides = servicesSlides.length;

            servicesSliderIndex = (servicesSliderIndex + 1) % totalSlides;
            const offset = -servicesSliderIndex * (servicesSlides[0].offsetWidth + 16);

            servicesSliderContent.style.transform = `translateX(${offset}px)`;
        }

        function prevServicesSlider() {
            const servicesSliderContent = document.getElementById(
                "services-slider-content"
            );
            const servicesSlides = document.querySelectorAll(".services-review-card");
            const totalSlides = servicesSlides.length;

            servicesSliderIndex =
                (servicesSliderIndex - 1 + totalSlides) % totalSlides;
            const offset = -servicesSliderIndex * (servicesSlides[0].offsetWidth + 16);

            servicesSliderContent.style.transform = `translateX(${offset}px)`;
        }
    </script>

    <!-- tabs -->
    <script>
        const tabs = document.querySelectorAll(".tab");
        const contents = document.querySelectorAll(".tab-content");

        tabs.forEach((tab) => {
            tab.addEventListener("click", () => {
                tabs.forEach((t) => t.classList.remove("active"));
                tab.classList.add("active");

                const selected = tab.getAttribute("data-tab");
                contents.forEach((c) => {
                    c.style.display = c.id === selected ? "block" : "none";
                });
            });
        });
    </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,
                },
            });
        });

        function tiktokEmbedLoad() {
            const existing = document.querySelector('script[src="https://www.tiktok.com/embed.js"]');
            if (existing) existing.remove();

            const script = document.createElement('script');
            script.src = "https://www.tiktok.com/embed.js";
            script.async = true;
            document.body.appendChild(script);
        }

        function instagramEmbedLoad() {
            const existing = document.querySelector('script[src*="instagram.com/embed.js"]');
            if (!existing) {
                const script = document.createElement('script');
                script.src = "https://www.instagram.com/embed.js";
                script.async = true;
                document.body.appendChild(script);
            } else if (window.instgrm) {
                instgrm.Embeds.process();
            }
        }

        window.addEventListener('load', () => {
            if (window.instagramEmbedLoad) instagramEmbedLoad();
            if (window.tiktokEmbedLoad) tiktokEmbedLoad();
        });



        //Team Swiper Section
        function initSwiper(selector, options = {}) {
            const defaultOptions = {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: true,
                speed: 500,
                centeredSlides: false,
                pagination: false,
                navigation: false,
                breakpoints: {
                    540: {
                        slidesPerView: 2,
                        spaceBetween: 20
                    },
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 20
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 20
                    },
                    1440: {
                        slidesPerView: 4,
                        spaceBetween: 20
                    },
                }
            };
            return new Swiper(selector, {
                ...defaultOptions,
                ...options
            });
        }

        initSwiper(".profile-swiper", {
            loop: true,
            navigation: {
                nextEl: ".profile-swiper-button-next-custom",
                prevEl: ".profile-swiper-button-prev-custom"
            },
            slidesPerView: 1,
            slidesPerGroup: 1,
            breakpoints: {
                540: {
                    slidesPerView: 2,
                    slidesPerGroup: 2
                },
                768: {
                    slidesPerView: 2,
                    slidesPerGroup: 2
                },
                1024: {
                    slidesPerView: 3,
                    slidesPerGroup: 3
                },
                1440: {
                    slidesPerView: 4,
                    slidesPerGroup: 4
                },
            }
        });
    </script>
@endpush