@extends('layouts.app')

@section('content')
    @php $hero = isset($heroSections) ? $heroSections->first() : null; @endphp

    <section class="relative min-h-screen flex items-center overflow-hidden bg-white">
        <div class="absolute inset-0 z-0 text-white overflow-hidden bg-[#2D3360]">
            <img src="{{ $hero && $hero->image ? (Str::startsWith($hero->image, 'http') ? $hero->image : asset('storage/' . str_replace('public/', '', $hero->image))) : asset('images/bg image.png') }}"
                alt="Hero Background" class="absolute top-0 right-[-5%] w-[140%] h-full object-cover">
        </div>

        <div class="absolute inset-0 z-10 pointer-events-none">
            <svg class="w-full h-full" viewBox="0 0 1440 860" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
                <path id="hero-tear-path"
                    d="M 0,0 L 600,0 L 600,120 C 600,280 600,425 600,430 C 600,435 600,580 600,740 L 600,860 L 0,860 Z"
                    fill="white" />
            </svg>
        </div>

        <div id="hero-plane" class="absolute z-20 pointer-events-none"
            style="top: 50%; left: -30%; transform: translate(-50%, -50%);">
            <div>
                <img src="{{ asset('images/plane.png') }}" alt="Plane" class="hero-airplane h-auto">
            </div>
        </div>

        <div id="hero-content" class="relative z-30 w-full max-w-7xl mr-auto ml-0 lg:ml-[5%] px-8 sm:px-12 lg:px-16 py-20"
            style="opacity: 0; transform: translateX(-110vw);">
            <div class="w-[45%] space-y-12">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-normal text-[#3B427F] leading-[1.2] font-poppins">
                    {!! optional($hero)->title !!}
                </h1>

                <p class="text-xl text-slate-600/80 leading-relaxed font-medium font-inter">
                    {!! nl2br(optional($hero)->tag ?? '') !!}
                </p>

                <div class="flex flex-row gap-5 items-center">
                    @if ($hero && $hero->button_1_name)
                        <a href="{{ Str::startsWith($hero->button_1_path ?? '', ['http', 'https']) ? $hero->button_1_path : url($hero->button_1_path ?? '/') }}"
                            class="px-10 py-4 bg-[#3B427F] hover:bg-[#2F356B] text-white font-medium rounded-full shadow-lg transition-all duration-300 hover:-translate-y-1 whitespace-nowrap">
                            {{ $hero->button_1_name }}
                        </a>
                    @endif

                    @if ($hero && $hero->button_2_name)
                        <a href="{{ Str::startsWith($hero->button_2_path ?? '', ['http', 'https']) ? $hero->button_2_path : url($hero->button_2_path ?? '/') }}"
                            class="px-10 py-4 bg-white text-[#3B427F] border-2 border-[#3B427F] font-medium rounded-full shadow-lg transition-all duration-300 hover:-translate-y-1 whitespace-nowrap">
                            {{ $hero->button_2_name }}
                        </a>
                    @endif
                </div>

                <div class="flex items-center space-x-10 pt-4">
                    @if ($hero && $hero->destination_ids && is_array($hero->destination_ids))
                        @php
                            $selectedDestinations = \App\Models\StudyDestination::whereIn(
                                'id',
                                $hero->destination_ids,
                            )->get();
                        @endphp
                        @foreach ($selectedDestinations as $dest)
                            <div class="group relative flex flex-col items-center">
                                <img src="{{ Str::startsWith($dest->image, 'http') ? $dest->image : asset('storage/' . $dest->image) }}"
                                    class="w-16 h-16 rounded-full object-cover shadow-lg transition-all duration-300 group-hover:-translate-y-3"
                                    alt="{{ $dest->title }}">
                                <span
                                    class="absolute -bottom-8 text-[10px] font-bold text-[#3B427F] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap">{{ $dest->short_title ?? str_replace('Study in ', '', $dest->title) }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>


    <section class="bg-[#E7E9FD]/60 py-24 reveal">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-12 text-center text-slate-800">
                @if ($hero && is_array($hero->stats) && count($hero->stats) > 0)
                    @foreach ($hero->stats as $stat)
                        <div class="space-y-2">
                            <div class="text-4xl md:text-6xl font-semibold text-[#3B427F] font-poppins">{{ $stat['title'] }}
                            </div>
                            <div class="text-xs md:text-sm font-medium text-[#3B427F] uppercase tracking-wide">
                                {{ $stat['description'] }}</div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>


    <section class="py-24 bg-white reveal" id="about">
        <div class="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center gap-24">
                <div class="lg:w-1/2 space-y-10">
                    <div class="space-y-4">
                        @if ($aboutUs && $aboutUs->subtitle)
                            <span
                                class="inline-block px-5 py-1.5 bg-[#E7E9FD] rounded-full text-[#3B427F] text-xs font-bold uppercase tracking-widest">{{ $aboutUs->subtitle }}</span>
                        @else
                            <span
                                class="inline-block px-5 py-1.5 bg-[#E7E9FD] rounded-full text-[#3B427F] text-xs font-bold uppercase tracking-widest">About
                                Us</span>
                        @endif
                        <h2 class="text-3xl md:text-4xl font-medium text-slate-800 font-poppins leading-[1.2]">
                            {{ $aboutUs->title ?? 'Study Abroad Consultancy in Nepal for Global Education | English Council' }}
                        </h2>
                    </div>
                    <div class="text-[lg] text-slate-600 leading-relaxed font-normal font-inter space-y-6">
                        {!! $aboutUs->description ?? 'Welcome to English Council.' !!}
                    </div>

                </div>
                <div class="lg:w-1/2 relative flex justify-center">
                    <div class="relative w-[700px] h-[700px] rounded-full overflow-hidden border-none ">
                        <img src="{{ asset('images/girl_book.png') }}" alt="About" class="w-full h-full object-cover">
                    </div>
                    <div
                        class="absolute top-[35%] right-2 bg-white px-8 py-5 rounded-[30px] shadow-lg border-none animate-float">
                        <div class="flex items-center gap-4">
                            <span class="text-3xl font-semibold text-[#3B427F] font-inter">🏆 1000+</span>
                            <span class="text-xs font-semibold text-[#3B427F] tracking-tight">Successful
                                <br>Placements</span>
                        </div>
                    </div>
                    <div
                        class="absolute bottom-[12%] left-4 bg-white px-10 py-5 rounded-[30px] shadow-lg border-none animate-float delay-500">
                        <div class="flex items-center gap-5">
                            <span class="text-4xl font-normal text-[#3B427F]">🎓</span>
                            <span class="text-sm font-medium text-[#3B427F] uppercase tracking-wide">Expert
                                <br>Trainers</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="py-24 bg-white reveal overflow-hidden">
        <div class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-[42px] pr-4">
                <h2 class="font-poppins font-semibold text-[24px] leading-[36px] text-black">Study Destinations</h2>
                <div class="flex gap-4">
                    <button
                        class="destPrevBtn w-[50px] h-[50px] rounded-full border-2 border-[#3B427F] flex items-center justify-center text-[#3B427F] hover:bg-[#3B427F] hover:text-white transition-all"><svg
                            class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg></button>
                    <button
                        class="destNextBtn w-[50px] h-[50px] rounded-full border-2 border-[#3B427F] flex items-center justify-center text-[#3B427F] hover:bg-[#3B427F] hover:text-white transition-all"><svg
                            class="w-6 h-6" 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></button>
                </div>
            </div>

            <div class="owl-carousel owl-theme destinations-slider overflow-visible">
                @if ($studyDestinations->count() > 0)
                    @foreach ($studyDestinations as $dest)
                        <div class="px-3 pb-8">
                            <div
                                class="relative group rounded-[20px] overflow-hidden shadow-[0px_4px_4px_rgba(0,0,0,0.1)] cursor-pointer h-[380px]">
                                <img src="{{ Str::startsWith($dest->image, 'http') ? $dest->image : asset('storage/' . $dest->image) }}"
                                    alt="{{ $dest->title }}" class="absolute inset-0 w-full h-full object-cover">

                                @if (!empty($dest->flag_image))
                                    <div
                                        class="absolute top-4 right-4 w-12 h-12 bg-white rounded-full p-1 shadow-lg z-30 border border-indigo-50">
                                        <img src="{{ Str::startsWith($dest->flag_image, 'http') ? $dest->flag_image : asset('storage/' . $dest->flag_image) }}"
                                            class="w-full h-full object-cover rounded-full">
                                    </div>
                                @endif

                                <div
                                    class="absolute bottom-0 left-0 right-0 h-[52px] group-hover:h-[65%] bg-[#E7E9FD]/80 backdrop-blur-sm rounded-b-[19px] group-hover:rounded-t-[20px] transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] flex flex-col z-20 overflow-hidden shadow-[0_-10px_20px_rgba(0,0,0,0.1)]">
                                    <div class="h-[52px] flex shrink-0 items-center justify-center">
                                        <span
                                            class="font-poppins font-semibold text-[18px] text-black transition-transform duration-300">
                                            {{ Str::startsWith($dest->title, 'Study in') ? $dest->title : 'Study in ' . $dest->title }}
                                        </span>
                                    </div>
                                    <div
                                        class="px-8 pb-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150 flex flex-col items-center text-center">
                                        <p class="text-slate-800 text-[15.5px] font-inter leading-relaxed line-clamp-3">
                                            {!! $dest->description !!}
                                        </p>
                                        <a href="{{ route('study-destinations.show', $dest->slug) }}"
                                            class="mt-6 inline-block px-8 py-2.5 bg-[#3B4080] text-white rounded-full text-[14px] font-semibold hover:bg-[#2F3366] hover:-translate-y-1 transition-all shadow-md">
                                            View More
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>

    <section class="py-24 bg-[#F9FAFF] reveal" id="services">
        <div class="max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-12">
            <div class="text-center space-y-6 mb-12">
                <h2 class="text-3xl font-bold text-slate-800 font-poppins uppercase tracking-tight">Services We Provide
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                @if (isset($services) && $services->count() > 0)
                    @foreach ($services as $index => $s)
                        <div
                            class="bg-white rounded-[2rem] overflow-hidden shadow-2xl border border-slate-50 flex flex-col h-full transition-all duration-500 group relative">
                            <div class="h-64 bg-slate-100 overflow-hidden relative">
                                @if ($s->image)
                                    <img src="{{ Str::startsWith($s->image, 'http') ? $s->image : asset('storage/' . $s->image) }}"
                                        class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-700">
                                @else
                                    <div
                                        class="w-full h-full bg-slate-200 flex items-center justify-center text-slate-400 group-hover:scale-110 transition-transform duration-700">
                                        <i class="fas fa-tools text-5xl"></i>
                                    </div>
                                @endif
                                <div class="absolute inset-0 bg-black/5"></div>
                            </div>
                            <div
                                class="absolute top-[210px] left-1/2 -translate-x-1/2 w-16 h-16 bg-[#E7E9FD] rounded-full border-4 border-white flex items-center justify-center shadow-lg z-10 overflow-hidden">
                                @if ($s->icon && str_starts_with(trim($s->icon), '<svg'))
                                    <div class="w-8 h-8 text-[#3B427F] [&>svg]:w-full [&>svg]:h-full">
                                        {!! $s->icon !!}</div>
                                @elseif($s->icon)
                                    <i class="{{ trim($s->icon) }} text-[#3B427F] text-2xl"></i>
                                @else
                                    <svg class="w-8 h-8 text-[#3B427F]" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                    </svg>
                                @endif
                            </div>
                            <div class="p-8 pt-12 text-center flex-1 flex flex-col justify-between">
                                <div>
                                    <h3
                                        class="text-xl font-semibold text-slate-800 mb-4 group-hover:text-[#3B427F] transition-colors font-poppins">
                                        {{ $s->title }}
                                    </h3>
                                    <p class="text-sm text-slate-600 leading-relaxed font-normal font-inter line-clamp-3">
                                        {!! strip_tags($s->description) !!}
                                    </p>
                                </div>
                                <!-- <div class="mt-6">
                            <a href="{{ route('services') }}" class="text-[#3B427F] font-semibold text-sm hover:underline">Read
                                More →</a>
                        </div> -->
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>


    <section class="py-24 bg-white reveal" id="why-choose-us">
        <div class="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center space-y-4 mb-12">
                <span
                    class="inline-block px-5 py-1.5 bg-[#E7E9FD] rounded-full text-[#3B427F] text-xs font-bold uppercase tracking-wider mb-4">
                    {{ optional($whyChooseUsSetting)->title }}
                </span>
                <h2 class="text-3xl font-bold text-slate-800 font-poppins uppercase">
                    {!! nl2br(optional($whyChooseUsSetting)->description ?? '') !!}
                </h2>
            </div>

            @if ($whyChooseUs->count() > 0)
                @php
                    $limitedWhyChooseUs = $whyChooseUs->take(6);
                    $hasCenterImage = $whyChooseUsSetting && $whyChooseUsSetting->center_image;
                    $itemsCount = $limitedWhyChooseUs->count();

                    if ($itemsCount >= 2) {
                        $take = ceil($itemsCount / 2);
                        $firstHalf = $limitedWhyChooseUs->take($take);
                        $secondHalf = $limitedWhyChooseUs->slice($take);
                    } else {
                        $firstHalf = $limitedWhyChooseUs;
                        $secondHalf = collect();
                    }
                @endphp

                <div class="flex flex-col lg:flex-row items-center gap-10">
                    {{-- Left Side Items --}}
                    <div class="w-full lg:flex-1 flex flex-col gap-10">
                        @foreach ($firstHalf as $feature)
                            <div
                                class="bg-white p-8 rounded-[30px] shadow-[0_15px_50px_rgba(59,66,127,0.12)] border border-indigo-50 hover:border-indigo-200 hover:shadow-2xl hover:-translate-x-6 transition-all duration-300 group relative">
                                <div
                                    class="w-16 h-16 bg-[#3B427F] mb-8 rounded-[12px] flex items-center justify-center text-white group-hover:bg-[#2F356B] transition-colors shadow-lg">
                                    @if ($feature->icon && str_starts_with(trim($feature->icon), '<svg'))
                                        <div class="w-8 h-8 text-white [&>svg]:w-full [&>svg]:h-full">
                                            {!! $feature->icon !!}</div>
                                    @elseif($feature->icon)
                                        <i class="{{ trim($feature->icon) }} text-2xl"></i>
                                    @else
                                        <i class="fas fa-check text-2xl"></i>
                                    @endif
                                </div>
                                <h3 class="text-xl font-bold text-slate-800 mb-4 font-poppins">{{ $feature->title }}</h3>
                                <div class="text-sm text-slate-600 leading-relaxed font-normal font-inter">
                                    {!! $feature->description !!}
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Center Image --}}
                    <div class="w-full lg:w-1/3 flex justify-center py-10 lg:py-0 reveal scale-in">
                        <div class="relative group">
                            @if ($hasCenterImage)
                                <img src="{{ Str::startsWith($whyChooseUsSetting->center_image, 'http') ? $whyChooseUsSetting->center_image : asset('storage/' . $whyChooseUsSetting->center_image) }}"
                                    alt="Why Choose Us"
                                    class="relative z-10 w-full max-w-[420px] h-auto object-cover rounded-[2rem] shadow-xl transition-all duration-700 hover:scale-[1.02]">
                            @else
                                <div
                                    class="w-full h-[500px] max-w-[420px] bg-indigo-50 rounded-[2rem] flex items-center justify-center">
                                    <i class="fas fa-question text-4xl text-indigo-300"></i>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Right Side Items --}}
                    <div class="w-full lg:flex-1 flex flex-col gap-10">
                        @php
                            // If we don't have enough items for two halves, use fallback for the second half if no center image
                            $rightItems = $secondHalf->count() > 0 ? $secondHalf : collect();
                        @endphp

                        @foreach ($rightItems as $feature)
                            <div
                                class="bg-white p-8 rounded-[30px] shadow-[0_15px_50px_rgba(59,66,127,0.12)] border border-indigo-50 hover:border-indigo-200 hover:shadow-2xl hover:translate-x-6 transition-all duration-300 group relative">
                                <div
                                    class="w-16 h-16 bg-[#3B427F] mb-8 rounded-[12px] flex items-center justify-center text-white group-hover:bg-[#2F356B] transition-colors shadow-lg">
                                    @if ($feature->icon && str_starts_with(trim($feature->icon), '<svg'))
                                        <div class="w-8 h-8 text-white [&>svg]:w-full [&>svg]:h-full">
                                            {!! $feature->icon !!}</div>
                                    @elseif($feature->icon)
                                        <i class="{{ trim($feature->icon) }} text-2xl"></i>
                                    @else
                                        <i class="fas fa-check text-2xl"></i>
                                    @endif
                                </div>
                                <h3 class="text-xl font-bold text-slate-800 mb-4 font-poppins">{{ $feature->title }}</h3>
                                <div class="text-sm text-slate-600 leading-relaxed font-normal font-inter">
                                    {!! $feature->description !!}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>




    <!-- <section class="py-32 bg-slate-50 reveal" id="faqs">
            <div class="max-w-[1500px] mx-auto px-8 sm:px-12 lg:px-16">
                <div class="text-center mb-24 space-y-4">
                    <span
                        class="inline-block px-5 py-1.5 bg-[#E7E9FD] rounded-full text-[#3B427F] text-xs font-bold uppercase tracking-widest">FAQs</span>
                    <h2 class="text-[32px] font-semibold text-[#14293E] font-poppins leading-[40px]">Frequently Asked Questions
                    </h2>
                    <p class="text-[18px] text-[#496179] font-inter font-medium leading-[30px] max-w-[500px] mx-auto">Answers to
                        Common Inquiries About Our Services</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-[107px] gap-y-8">
                    @php
                        $displayFaqs =
                            $faqs->count() > 0
                                ? $faqs
                                : collect([
                                    (object) [
                                        'question' => 'What services do you provide?',
                                        'answer' => 'We offer study abroad counseling,
            university admission assistance, visa guidance, and complete support throughout the application process.',
                                    ],
                                    (object) [
                                        'question' => 'Which countries do you provide study options for?',
                                        'answer' => 'We assist students
            in applying to various study destinations including Australia, the UK, Canada, New Zealand, the USA, and
            other countries.',
                                    ],
                                    (object) [
                                        'question' => 'Do you provide personalized counseling?',
                                        'answer' => 'Yes, we provide one-on-one
            counseling tailored to each student’s academic background, interests, and career goals.',
                                    ],
                                    (object) [
                                        'question' => 'Do you help with visa processing?',
                                        'answer' => 'Yes, we guide students through
            documentation, application submission, and interview preparation to ensure a smooth visa process.',
                                    ],
                                ]);
                    @endphp

                    @foreach ($displayFaqs as $index => $faq)
    <div class="border-b border-[#E8EBEE] pb-4">
                        <button class="flex items-start gap-4 w-full text-left group faq-toggle-btn">
                            <span
                                class="mt-1 flex-shrink-0 w-8 h-8 rounded-full border-2 border-[#496179] flex items-center justify-center text-[#496179] transition-all toggle-icon">
                                <svg class="w-4 h-4 show-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                </svg>
                                <svg class="w-4 h-4 hide-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
                                </svg>
                            </span>
                            <div class="flex-1">
                                <h4
                                    class="text-xl font-medium text-[#496179] font-inter group-hover:text-[#3B4080] transition-colors">
                                    {{ $faq->question }}</h4>
                                <div class="mt-4 text-slate-600 font-inter leading-relaxed hidden faq-answer-content">
                                    {!! $faq->answer !!}
                                </div>
                            </div>
                        </button>
                    </div>
    @endforeach
                </div>
            </div>
        </section> -->

    <section class="py-24 bg-white reveal" id="testimonials">
        <div class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
            <div
                class="inline-block px-5 py-1.5 bg-[#E7E9FD] rounded-full text-[#3B427F] text-xs font-bold uppercase tracking-widest mb-4">
                Testimonials</div>
            <h2 class="text-3xl font-bold text-slate-800 font-poppins uppercase mb-12">Our Satisfied Clients</h2>
            <div class="owl-carousel owl-theme testimonial-slider overflow-visible">
                @if ($testimonials->count() > 0)
                    @foreach ($testimonials as $testimonial)
                        <div class="px-8 pb-12 pt-20">
                            <div
                                class="testimonial-card bg-white py-8 px-10 rounded-[40px] shadow-2xl relative border border-slate-50 flex flex-col items-center min-h-[220px]">
                                <div
                                    class="absolute -top-12 left-10 w-20 h-20 bg-[#3B427F] rounded-full flex items-center justify-center shadow-2xl border-none">
                                    @if ($testimonial->image)
                                        <img src="{{ Str::startsWith($testimonial->image, 'http') ? $testimonial->image : asset('storage/' . $testimonial->image) }}"
                                            class="w-16 h-16 rounded-full object-cover shadow-sm">
                                    @else
                                        <span class="text-5xl text-white font-serif pt-6">“</span>
                                    @endif
                                </div>
                                <p class="text-[#1C3A57] leading-relaxed text-base font-medium font-inter mb-8 pt-4 px-4">
                                    {!! $testimonial->content !!}
                                </p>
                                <div class="text-[#677B8E] font-medium font-roboto text-sm mt-auto">—
                                    {{ $testimonial->client_name }}{{ $testimonial->position ? ', ' . $testimonial->position : '' }}
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div class="flex justify-center gap-12 mt-12">
                <button
                    class="customPrevBtn w-[60px] h-[60px] rounded-full border-2 border-[#3B427F] flex items-center justify-center text-[#3B427F] hover:bg-[#3B427F] hover:text-white transition-all shadow-lg"><svg
                        class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg></button>
                <button
                    class="customNextBtn w-[60px] h-[60px] rounded-full border-2 border-[#3B427F] flex items-center justify-center text-[#3B427F] hover:bg-[#3B427F] hover:text-white transition-all shadow-lg"><svg
                        class="w-8 h-8" 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></button>
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            $(document).ready(function() {
                $(".testimonial-slider").owlCarousel({
                    loop: true,
                    center: true,
                    margin: 30,
                    nav: false,
                    dots: false,
                    autoplay: true,
                    autoplayTimeout: 4000,
                    autoplayHoverPause: true,
                    responsive: {
                        0: {
                            items: 1
                        },
                        768: {
                            items: 2
                        },
                        1024: {
                            items: 3
                        }
                    }
                });
                $('.customNextBtn').click(function() {
                    $(".testimonial-slider").trigger('next.owl.carousel');
                })
                $('.customPrevBtn').click(function() {
                    $(".testimonial-slider").trigger('prev.owl.carousel');
                })

                $(".destinations-slider").owlCarousel({
                    loop: true,
                    margin: 30,
                    nav: false,
                    dots: false,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    responsive: {
                        0: {
                            items: 1
                        },
                        768: {
                            items: 2
                        },
                        1024: {
                            items: 3
                        }
                    }
                });
                $('.destNextBtn').click(function() {
                    $(".destinations-slider").trigger('next.owl.carousel');
                })
                $('.destPrevBtn').click(function() {
                    $(".destinations-slider").trigger('prev.owl.carousel');
                })

                // FAQ Toggle
                $('.faq-toggle-btn').click(function() {
                    const $current = $(this);
                    const $content = $current.find('.faq-answer-content');
                    const $icon = $current.find('.toggle-icon');
                    const $showIcon = $icon.find('.show-icon');
                    const $hideIcon = $icon.find('.hide-icon');

                    // Close others
                    $('.faq-answer-content').not($content).slideUp();
                    $('.toggle-icon').not($icon).removeClass('bg-[#3B4080] text-white border-[#3B4080]');
                    $('.show-icon').not($showIcon).removeClass('hidden');
                    $('.hide-icon').not($hideIcon).addClass('hidden');

                    // Toggle current
                    $content.slideToggle();
                    $icon.toggleClass('bg-[#3B4080] text-white border-[#3B4080]');
                    $showIcon.toggleClass('hidden');
                    $hideIcon.toggleClass('hidden');
                });
            });

            (function() {
                const path = document.getElementById('hero-tear-path');
                const plane = document.getElementById('hero-plane');
                const content = document.getElementById('hero-content');
                let animationComplete = false;
                if (!path || !plane || !content) return;

                const DURATION = 3200;

                function easeOutCubic(t) {
                    return 1 - Math.pow(1 - t, 3);
                }

                function easeInOutQuart(t) {
                    return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
                }

                function easeOutQuint(t) {
                    return 1 - Math.pow(1 - t, 5);
                }

                function buildPath(cp2x, endX, cp1x2) {
                    return `M 0,0 L 600,0 L 600,120 C 600,280 ${cp2x},425 ${endX},430 C ${cp1x2},435 600,580 600,740 L 600,860 L 0,860 Z`;
                }

                let startTime = null;

                function animate(currentTime) {
                    if (!startTime) startTime = currentTime;
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / DURATION, 1);


                    const planeRaw = Math.min(progress / 0.68, 1);
                    const planeEased = easeOutQuint(planeRaw);

                    const planeStartLeft = -30;
                    const planeEndLeft = 53;
                    const planeTop = 50;


                    const currentLeft = planeStartLeft + (planeEndLeft - planeStartLeft) * planeEased;
                    plane.style.left = currentLeft + '%';
                    plane.style.top = planeTop + '%';

                    const edgePosition = 35;
                    const tearProgress = Math.max(0, Math.min((currentLeft - edgePosition) / (planeEndLeft - edgePosition),
                        1));
                    const tearEased = easeInOutQuart(tearProgress);

                    const cp2x = 600 + 120 * tearEased;
                    const endX = 600 + 200 * tearEased;
                    const cp1x2 = 600 + 120 * tearEased;

                    path.setAttribute('d', buildPath(cp2x, endX, cp1x2));


                    let contentRaw = 0;
                    if (progress > 0.05) {
                        contentRaw = Math.min((progress - 0.05) / 0.45, 1);
                    }
                    const contentEased = easeOutCubic(contentRaw);

                    content.style.opacity = Math.min(contentRaw * 3, 1);
                    content.style.transform = `translateX(${-110 * (1 - contentEased)}vw)`;

                    if (progress < 1) {
                        requestAnimationFrame(animate);
                    } else {
                        plane.querySelector('div').classList.add('animate-float');
                        content.style.opacity = '1';
                        content.style.transform = 'translateX(0)';
                        animationComplete = true;
                    }
                }

                requestAnimationFrame(animate);

            })();
        </script>
    @endpush
@endsection