@extends('frontend.layouts.app')
@section('title', __('about.about_hulas_remittance'))
@section('meta', 'Welcome to Hulas Remittance')
@section('content')

    <div class="min-h-screen">

        <!-- banner-section -->
        <section class="relative">
            <div class="mb-10">
                <img src="{{ asset('assets/images/become-an-agent/breadcrumb-serv.jpg') }}" alt="About Us Image"
                    alt="Banner Image" class="h-60 w-full object-cover" />
            </div>
            <div class="absolute w-full top-20">
                <div class="flex flex-col space-y-8 ml-10">
                    <h3 class="text-2xl md:text-4xl font-extrabold text-white">{{ __('about.about_hulas_remittance') }}</h3>
                    <div class="flex space-x-5 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">{{ __('about.home') }}</a>
                        <p class="text-white text-base fony-bold hover:cursor-pointer">></p>
                        <a href="{{ route('aboutHulasRemittance') }}" class="text-accent font-bold">{{ __('about.about_hulas_remittance') }}</a>
                    </div>
                </div>
        </section>
        <!-- banner-section -->
        <div class="mx-6 md:mx-10 lg:mx-20 xl:mx-40 pb-20">

            <!-- About Hulas Remittance -->
            <section class="m-6 md:m-10 2xl:mx-30">
                <div class=" flex flex-col gap-6 md:flex-row  md:justify-center md:items-center">
                    <!-- image -->
                    <div class="flex-1 flex justify-center w-full">
                        @isset($aboutUs->image)
                            <img src="{{ asset('storage/' . $aboutUs->image) }}" alt="About Us Image"
                                class="w-full rounded-xl object-contain lg:object-fit" alt="About Us Image" />
                        @endisset
                    </div>

            <!-- Text Container -->
            <div class="flex md:flex-2 flex-col space-y-6">
                <h2 class="text-xl lg:text-2xl font-bold text-black">
                    {{ __('about.about_hulas_remittance') }}
                </h2>
                @isset($aboutUs->description_en)
                <div class="text-lg">
                    <p>{!! app()->getLocale() == 'en'
                        ? $aboutUs->description_en
                        : (isset($aboutUs->description_np)
                            ? $aboutUs->description_np
                            : $aboutUs->description_en) !!}</p>
                </div>
                @endisset
                <!-- Years of experience -->
                <div class="flex flex-col items-center space-y-3 lg:space-y-0 lg:flex-row lg:space-x-4">
                    <div
                        class="w-60 md:w-40 lg:w-60 bg-black rounded-xl flex justify-start lg:justify-center items-center flex-col space-y-2 lg:space-y-4 p-3">
                        @isset($aboutUs->years_of_experience_en)
                        <p class="text-accent font-bold text-2xl">
                            {!! app()->getLocale() == 'en'
                                ? $aboutUs->years_of_experience_en
                                : (isset($aboutUs->years_of_experience_np)
                                    ? $aboutUs->years_of_experience_np
                                    : $aboutUs->years_of_experience_en) !!}
                        </p>
                        @endisset
                        <p class="text-accent text-center text-lg">
                            {{ __('about.years_of_experience') }}
                        </p>
                    </div>
                </div>
                <hr class="mr-5 text-gray-400 font-semibold" />

                <!-- Social Media links -->
                <div>
                    <div class="flex flex-row gap-4 mx-3">
                        <!-- Facebook -->
                        @isset($setting->facebook)
                        <div
                            class="flex items-center justify-center w-10 h-10 border-1 rounded-full hover:cursor-pointer transition ease-in-out duration-200">
                            <a href="{{ $setting->facebook }}">
                                <img src="{{ asset('assets/images/social-media-icons/facebook-black.svg') }}"
                                    alt="Facebook Icon" class="w-6 h-6">
                            </a>
                        </div>
                        @endisset


                        <!-- Linkdin -->
                        @isset($setting->linkedin)
                        <div
                            class="flex items-center justify-center w-10 h-10 border-1 rounded-full hover:cursor-pointer transition ease-in-out duration-200">
                            <a href="{{ $setting->linkedin }}">
                                <img src="{{ asset('assets/images/social-media-icons/linkedin-svgrepo-com.svg') }}"
                                    alt="Linkdin Icon" class="w-4 h-4">
                            </a>
                        </div>
                        @endisset

                        <!-- Twitter -->
                        @isset($setting->twitter)
                        <div
                            class="flex items-center justify-center w-10 h-10 border-1 rounded-full hover:cursor-pointer transition ease-in-out duration-200">
                            <a href="{{ $setting->twitter }}">
                                <img src="{{ asset('assets/images/social-media-icons/icons8-x-50.png') }}"
                                    alt="Twitter Icon" class="w-5 h-5">
                            </a>
                        </div>
                        @endisset
                    </div>
                </div>
            </div>
        </div>
        </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">
                        <!-- Section Header -->
                        <div class="text-center sm:text-left w-full sm:w-auto">
                            <h1 <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">
                                {{ __('home.simple_secure_seamless') }}
                            </p>
                            <p class="mt-3 text-sm sm:text-base md:text-lg text-gray-700 line-clamp-3">
                                {{ __('home.services_description') }}
                            </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 -->

            <!-- Section breaker -->
            <div
                class="flex flex-col lg:flex-row bg-accent items-center justify-around gap-10 text-black rounded-lg mx-6 my-10 md:m-10 lg:mx-20 px-10 py-10">
                <div class="flex flex-col gap-6 text-center">
                    <h1 class="text-2xl lg:text-5xl font-extrabold tracking-wide">{{ __('about.lets_get_started') }}</h1>
                    <p class="line-clamp-2 text-lg lg:text-xl">{{ __('about.lets_get_started_description') }}</p>
                </div>
                <a href="{{ route('findAnAgent') }}"
                    class="px-6 py-4 bg-black text-accent rounded-full cursor-pointer text-center text-xl w-60 inline-block font-bold hover:opacity-85">{{ __('about.find_an_agent') }}</a>
            </div>
            <!-- Section breaker -->
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        // Services slider functionality
        let servicesCurrentSlide = 0;
        const servicesSliderContent = document.getElementById('services-slider-content');
        const servicesCards = document.querySelectorAll('.services-review-card');
        const servicesCardWidth = servicesCards.length > 0 ? servicesCards[0].offsetWidth + 32 : 400; // width + gap
        const servicesMaxSlide = Math.max(0, servicesCards.length - 3); // Show 3 items at once on desktop

        function nextServicesSlider() {
            if (servicesCurrentSlide < servicesMaxSlide) {
                servicesCurrentSlide++;
                updateServicesSliderPosition();
            }
        }

        function prevServicesSlider() {
            if (servicesCurrentSlide > 0) {
                servicesCurrentSlide--;
                updateServicesSliderPosition();
            }
        }

        function updateServicesSliderPosition() {
            const position = -servicesCurrentSlide * servicesCardWidth;
            servicesSliderContent.style.transform = `translateX(${position}px)`;
        }

        // Initialize slider positions on page load
        window.addEventListener('load', function () {
            if (servicesSliderContent && servicesCards.length > 0) {
                updateServicesSliderPosition();
            }
        });
    </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