@extends('frontend::layouts.master')

@section('content')
    <div class="relative">
        <!-- Background Shape -->
        <div class="absolute inset-0 z-0 w-full h-screen">
            <picture>
                <img src="{{ Module::asset('frontend:img/shape1.png') }}" class="w-full h-full object-cover" alt="shape1">
            </picture>
        </div>

        <!-- Main Content -->
        <div class="container mx-auto px-4 relative z-10 pt-20 md:pt-24">
            <!-- Hero Section with Carousel -->
            <div class="relative rounded-2xl overflow-hidden ">
                <!-- Modern Decorative elements -->
                <div
                    class="absolute -top-6 -left-6 w-32 h-32 bg-gradient-to-r from-teal-400 to-emerald-400 rounded-full opacity-30 blur-lg z-0">
                </div>
                <div
                    class="absolute -bottom-6 -right-6 w-40 h-40 bg-gradient-to-l from-blue-400 to-purple-400 rounded-full opacity-30 blur-lg z-0">
                </div>

                <!-- Carousel Container -->
                <div class="carousel-wrapper relative z-10 backdrop-blur-sm bg-white/10">
                    <div class="carousel-banner group">
                        <x-frontend::plugin.splidecarousel slideName='splide-demo'
                            class="h-[600px] md:h-[500px] rounded-2xl">
                            <x-slot:slideList>
                                <x-frontend::plugin.splidecarousel.image
                                    slideSource='https://images.unsplash.com/photo-1530789253388-582c481c54b0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
                                    slideUrl='' slideDescription='Discover Amazing Places'
                                    class='rounded-2xl object-cover'>
                                    <div
                                        class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/60">
                                    </div>
                                    <div class="absolute bottom-10 left-10 text-white">
                                        <h2 class="text-5xl font-bold mb-3 tracking-tight">Explore Thailand</h2>
                                        <p class="text-xl font-light">Start your journey today</p>
                                    </div>
                                </x-frontend::plugin.splidecarousel.image>

                                <x-frontend::plugin.splidecarousel.video
                                    slideSource='https://videos.pexels.com/video-files/2169879/2169879-uhd_2560_1440_30fps.mp4'
                                    slideCover='https://images.unsplash.com/photo-1542856391-010fb87dcfed?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
                                    slideDescription='Experience Local Culture' class='rounded-2xl object-cover'>
                                    <div
                                        class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/60">
                                    </div>
                                    <div class="absolute bottom-10 left-10 text-white">
                                        <h2 class="text-5xl font-bold mb-3 tracking-tight">Local Experiences</h2>
                                        <p class="text-xl font-light">Immerse in Thai culture</p>
                                    </div>
                                </x-frontend::plugin.splidecarousel.video>
                            </x-slot:slideList>
                        </x-frontend::plugin.splidecarousel>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modern About Us Section -->
    <section class="pb-10 lg:pb-16 pt-10 lg:pt-32 relative overflow-hidden">
        <!-- Modern Geometric Decorative Elements -->
        <div class="absolute left-0 top-0 w-full h-full">
            <div
                class="absolute left-0 top-1/4 w-96 h-96 bg-gradient-to-r from-teal-400/20 to-emerald-400/20 rounded-full blur-[100px]">
            </div>
            <div
                class="absolute right-0 bottom-1/4 w-96 h-96 bg-gradient-to-l from-blue-400/20 to-cyan-400/20 rounded-full blur-[100px]">
            </div>
        </div>

        <div class="container mx-auto px-4">
            <div class="flex flex-col lg:flex-row items-center gap-10 md:gap-20">
                <!-- Modern Content Section - Now First on Mobile -->
                <div class="w-full lg:w-1/2 order-2 lg:order-2 space-y-10">
                    <div class="space-y-6">
                        <div
                            class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-teal-100 to-emerald-100">
                            <span
                                class="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-600 font-medium">WanderLust</span>
                        </div>
                        <h2 class="text-6xl font-bold text-gray-900 leading-tight">Where Adventure Meets Paradise</h2>
                        <div class="flex gap-2">
                            <div class="w-16 h-2 rounded-full bg-gradient-to-r from-teal-500 to-emerald-500"></div>
                            <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                            <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                        </div>
                    </div>

                    <p class="text-xl text-gray-600 leading-relaxed">
                        Embark on a journey through Thailand's enchanting landscapes, where ancient traditions meet modern
                        luxury.
                        Our carefully crafted experiences promise to unveil the hidden gems of Southeast Asia's most
                        captivating destination.
                    </p>

                    <!-- Modern CTA Button -->
                    <div class="flex items-center gap-6 pt-0 md:pt-6">
                        <a href="/about"
                            class="group inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-teal-600 to-emerald-600 text-white rounded-full text-lg font-medium transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/30 transform hover:-translate-y-0.5">
                            Learn More
                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6 transition-transform duration-300 group-hover:translate-x-1" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17 8l4 4m0 0l-4 4m4-4H3" />
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Modern Image Section - Now Second on Mobile -->
                <div class="w-full lg:w-1/2 order-2 lg:order-1">
                    <div class="relative group">
                        <!-- Main Image with Glass Effect -->
                        <div class="relative overflow-hidden rounded-[2rem] backdrop-blur-sm bg-white/10">
                            <img src="https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?q=80&w=1470"
                                alt="Thailand Travel Experience"
                                class="w-full h-[600px] object-cover transition-all duration-700 group-hover:scale-110">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                        </div>

                        <!-- Modern Floating Stats Cards -->
                        <div
                            class="absolute -bottom-28 -left-36 flex gap-4 transform transition-all duration-500 group-hover:-translate-y-2">
                            <div class="hidden md:block">
                                <script src="https://unpkg.com/@lottiefiles/lottie-player@2.0.8/dist/lottie-player.js"></script>
                                <lottie-player
                                    src="https://lottie.host/9098c20f-ed2e-4239-b3ad-109f6a9cf520/cwBk6fnfZK.json"
                                    speed="1" style="width: 300px; height: 300px" loop autoplay direction="1"
                                    mode="normal">
                                </lottie-player>


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

    <!-- Tour Booking Section -->
    <section class="pt-0 pb-5 sm:py-10 lg:py-16 relative overflow-hidden">
        <!-- Decorative Background Elements -->
        <div class="absolute inset-0 z-0">
            <div class="absolute top-1/3 left-1/4 w-72 h-72 bg-teal-300/20 rounded-full blur-[100px]"></div>
            <div class="absolute bottom-1/3 right-1/4 w-72 h-72 bg-blue-300/20 rounded-full blur-[100px]"></div>
        </div>

        <div class="relative z-10 container mx-auto px-4">

            <div
                class="absolute -bottom-32 lg:-bottom-28 right-0 lg:right-36 flex gap-4 transform transition-all duration-500 group-hover:-translate-y-2">
                <div class="hidden md:block">
                    <script src="https://unpkg.com/@lottiefiles/lottie-player@2.0.8/dist/lottie-player.js"></script>
                    <lottie-player src="https://lottie.host/dfae8fee-b8b8-4c55-90ba-a99b702039fa/Zp9cdacPaV.json"
                        speed="1" style="width: 300px; height: 300px" loop autoplay direction="1" mode="normal">
                    </lottie-player>


                </div>
            </div>
            <!-- Section Header -->
            <div class="text-center mb-10 lg:mb-16">
                <h2 class="text-5xl font-bold mb-6">Choose Your Adventure</h2>
                <div class="flex justify-center gap-2 mb-4">
                    <div class="w-16 h-2 rounded-full bg-gradient-to-r from-teal-500 to-emerald-500"></div>
                    <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                    <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                </div>
            </div>
        </div>

        <div class="">
            <x-frontend::plugin.splidecarousel slideName='splide-item'>
                <x-slot:slideList>
                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden h-[400px]">
                                <img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?q=80&w=2051&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    class="w-full h-full object-cover" alt="Thai Temple">
                                <!-- Default Title -->
                                <div
                                    class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
                                    <h3 class="text-2xl font-semibold text-white text-center">Thai Temple</h3>
                                </div>
                                <!-- Hover Content -->
                                <div
                                    class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="flex flex-col justify-center items-center h-full text-white p-6">
                                        <h3 class="text-2xl font-semibold mb-2 line-clamp-1">Thai Temple</h3>
                                        <p class="text-center mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur
                                            adipisicing elit. Quos, dolores sapiente sed asperiores cumque fugiat incidunt
                                            quia nesciunt consequuntur esse dolorem odio cupiditate, ullam expedita possimus
                                            dolor saepe iure repellendus non ex laudantium unde! Totam facere voluptatem
                                            distinctio eligendi perspiciatis blanditiis culpa cupiditate odio velit quas, at
                                            recusandae quia voluptatum.</p>
                                        <span class="text-32 font-bold mb-4">฿1,999</span>
                                        <a href="/tour-detail"
                                            class="px-6 py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-full hover:shadow-lg transition-all">
                                            Book Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel.item>

                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden h-[400px]">
                                <img src="https://plus.unsplash.com/premium_photo-1722593856487-9fbd52e32e0f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    class="w-full h-full object-cover" alt="Sakura Japan Tour">
                                <!-- Default Title -->
                                <div
                                    class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
                                    <h3 class="text-2xl font-semibold text-white text-center">Sakura Japan Tour</h3>
                                </div>
                                <!-- Hover Content -->
                                <div
                                    class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="flex flex-col justify-center items-center h-full text-white p-6">
                                        <h3 class="text-2xl font-semibold mb-2 line-clamp-1">Sakura Japan Tour</h3>
                                        <p class="text-center mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur
                                            adipisicing elit. Voluptatum, voluptate quae non quibusdam molestiae nemo
                                            perferendis ad voluptas corrupti, nesciunt iste adipisci molestias tempora
                                            libero et ab omnis unde. Accusantium illum provident doloribus quam ut minus
                                            necessitatibus saepe vel mollitia.</p>
                                        <span class="text-32 font-bold mb-4">$999</span>
                                        <a href="/tour-detail"
                                            class="px-6 py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-full hover:shadow-lg transition-all">
                                            Book Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel.item>

                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden h-[400px]">
                                <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?q=80&w=2021&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    class="w-full h-full object-cover" alt="Adventure Tour">
                                <!-- Default Title -->
                                <div
                                    class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
                                    <h3 class="text-2xl font-semibold text-white text-center">Adventure Tour</h3>
                                </div>
                                <!-- Hover Content -->
                                <div
                                    class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="flex flex-col justify-center items-center h-full text-white p-6">
                                        <h3 class="text-2xl font-semibold mb-2 line-clamp-1">Adventure Tour</h3>
                                        <p class="text-center mb-4 line-clamp-3">Experience thrilling outdoor activities
                                        </p>
                                        <span class="text-32 font-bold mb-4">$799</span>
                                        <a href="/tour-detail"
                                            class="px-6 py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-full hover:shadow-lg transition-all">
                                            Book Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel.item>

                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden h-[400px]">
                                <img src="https://images.unsplash.com/photo-1467377791767-c929b5dc9a23?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    class="w-full h-full object-cover" alt="Maldives Tour">
                                <!-- Default Title -->
                                <div
                                    class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
                                    <h3 class="text-2xl font-semibold text-white text-center">Maldives Tour</h3>
                                </div>
                                <!-- Hover Content -->
                                <div
                                    class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="flex flex-col justify-center items-center h-full text-white p-6">
                                        <h3 class="text-2xl font-semibold mb-2 line-clamp-1">Maldives Tour</h3>
                                        <p class="text-center mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur,
                                            adipisicing elit. Earum, suscipit accusamus nisi possimus numquam totam impedit!
                                            Nostrum magnam quod accusamus?</p>
                                        <span class="text-32 font-bold mb-4">฿11,149</span>
                                        <a href="/tour-detail"
                                            class="px-6 py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-full hover:shadow-lg transition-all">
                                            Book Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel.item>
                    <x-frontend::plugin.splidecarousel.item>
                        <x-slot:slideItem>
                            <div class="group relative overflow-hidden h-[400px]">
                                <img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe"
                                    class="w-full h-full object-cover" alt="Food Tour">
                                <!-- Default Title -->
                                <div
                                    class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
                                    <h3 class="text-2xl font-semibold text-white text-center">Food Tour</h3>
                                </div>
                                <!-- Hover Content -->
                                <div
                                    class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <div class="flex flex-col justify-center items-center h-full text-white p-6">
                                        <h3 class="text-2xl font-semibold mb-2">Food Tour</h3>
                                        <p class="text-center mb-4">Taste authentic Thai cuisine and local delicacies</p>
                                        <span class="text-32 font-bold mb-4">$149</span>
                                        <a href="/tour-detail"
                                            class="px-6 py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white rounded-full hover:shadow-lg transition-all">
                                            Book Now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </x-slot>
                    </x-frontend::plugin.splidecarousel.item>
                </x-slot:slideList>
            </x-frontend::plugin.splidecarousel>

            <!-- New See More Button -->
            <div class="text-center mt-10">
                <a href="/tours"
                    class="group inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-teal-600 to-emerald-600 text-white rounded-full text-lg font-medium transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/30 transform hover:-translate-y-0.5">
                    See More Tours
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6 transition-transform duration-300 group-hover:translate-x-1" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                </a>
            </div>
        </div>
    </section>

    {{-- <section class="relative pt-5 sm:pt-0 pb-0 xs:pb-5 lg:pb-8 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="text-center mb-10 lg:mb-2">
                <h2 class="text-5xl font-bold mb-6">Why Travel With Us?</h2>
                <div class="flex justify-center gap-2">
                    <div class="w-16 h-2 rounded-full bg-gradient-to-r from-teal-500 to-emerald-500"></div>
                    <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                    <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                </div>
                <p class="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
                    Experience unforgettable moments and create lasting memories with our expertly curated travel experiences
                </p>
            </div>

            <div class="flex flex-col md:flex-row items-center justify-between gap-2 md:gap-10">
                <div class="w-full md:w-1/2 space-y-8">
                    <div class="space-y-6">
                        <div class="flex items-center gap-4">
                            <div class="p-3 rounded-full bg-teal-100">
                                <svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">Expert Local Guides</h3>
                                <p class="text-gray-600">Our professional guides ensure authentic local experiences</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-4">
                            <div class="p-3 rounded-full bg-emerald-100">
                                <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">Safe & Secure</h3>
                                <p class="text-gray-600">Your safety is our top priority throughout the journey</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-4">
                            <div class="p-3 rounded-full bg-blue-100">
                                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">Best Value</h3>
                                <p class="text-gray-600">Competitive prices for unforgettable experiences</p>
                            </div>
                        </div>

                        <div class="flex items-center gap-4">
                            <div class="p-3 rounded-full bg-purple-100">
                                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">24/7 Support</h3>
                                <p class="text-gray-600">Round-the-clock assistance for all your travel needs</p>
                            </div>
                        </div>

                        <div class="flex items-center gap-4">
                            <div class="p-3 rounded-full bg-amber-100">
                                <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold">Premium Experience</h3>
                                <p class="text-gray-600">Luxury accommodations and exclusive activities</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="w-full md:w-1/2">
                    <div
                        class="flex gap-4 transform transition-all duration-500 group-hover:-translate-y-2 justify-center items-center">
                        <div class="">
                            <script src="https://unpkg.com/@lottiefiles/lottie-player@2.0.8/dist/lottie-player.js"></script>
                            <lottie-player src="https://lottie.host/2bcddc73-ce42-4119-bb05-5fdd5778feb4/wxhnbGzyfx.json" speed="1"
                                class="w-full md:h-[400px] h-[250px]" loop autoplay direction="1" mode="normal">
                            </lottie-player>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <section class="max-w-7xl mx-auto relative pb-5 overflow-hidden">
        <img src="{{ Module::asset('frontend:img/wanderlust.png') }}" class="w-full h-full object-cover"
            alt="Wanderlust">
    </section>

    <!-- Blog Section -->
    <section class="pt-5 sm:pt-0 pb-5 lg:pb-16 relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0 z-0">
            <div class="absolute top-1/4 right-1/4 w-96 h-96 bg-teal-200/20 rounded-full blur-[120px]"></div>
            <div class="absolute bottom-1/4 left-1/4 w-96 h-96 bg-blue-200/20 rounded-full blur-[120px]"></div>
        </div>

        <div class="container mx-auto px-4 relative z-10">
            <!-- Section Header with See More Button -->
            <div class="flex justify-between items-center mb-8 lg:mb-10">
                <div class="text-center">
                    <h2 class="text-5xl font-bold mb-6">Travel Stories</h2>
                    <div class="flex gap-2">
                        <div class="w-16 h-2 rounded-full bg-gradient-to-r from-teal-500 to-emerald-500"></div>
                        <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                        <div class="w-4 h-2 rounded-full bg-gray-200"></div>
                    </div>
                </div>
                <a href="/blog" class="group inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-teal-500 text-teal-500 rounded-full hover:bg-teal-50 transition-all duration-300">
                    <span class="font-medium">See More</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                </a>
            </div>

            <!-- Blog Grid -->
            <div class="grid grid-cols-12 gap-6">
                <!-- Featured Blog Post -->
                <div class="col-span-12 md:col-span-8">
                    <a href="/blog-detail" class="block group h-[600px] relative rounded-3xl overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1536599018102-9f803c140fc1"
                            class="w-full h-full object-cover transition duration-500 group-hover:scale-110"
                            alt="Featured Blog">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
                        <div class="absolute bottom-8 left-8 right-8 text-white">
                            <span class="inline-block px-4 py-2 bg-teal-500/80 rounded-full text-sm mb-4">Featured</span>
                            <h3 class="text-3xl font-bold mb-3 line-clamp-2">Hidden Beaches of Thailand</h3>
                            <p class="text-gray-200 mb-4 line-clamp-2">Discover secluded paradises away from tourist
                                crowds...</p>
                            <p class="text-sm sm:text-base text-gray-300">May 15, 2024</p>
                        </div>
                    </a>
                </div>

                <!-- Side Blog Posts -->
                <div class="col-span-12 md:col-span-4 grid gap-6">
                    <a href="/blog-detail" class="block group relative rounded-3xl overflow-hidden h-[285px]">
                        <img src="https://images.unsplash.com/photo-1533479776920-fb275fb5f4c4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                            class="w-full h-full object-cover transition duration-500 group-hover:scale-110"
                            alt="Street Food">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                        <div class="absolute bottom-6 left-6 right-6 text-white">
                            <h3 class="text-xl font-bold mb-3 line-clamp-2">Street Food Adventures</h3>
                            <p class="text-gray-200 line-clamp-2 mb-4">Exploring local flavors...</p>
                            <p class="text-sm sm:text-base text-gray-300 mt-2">May 20, 2024</p>
                        </div>
                    </a>

                    <a href="/blog-detail" class="block group relative rounded-3xl overflow-hidden h-[285px]">
                        <img src="https://images.unsplash.com/photo-1607355739828-0bf365440db5"
                            class="w-full h-full object-cover transition duration-500 group-hover:scale-110"
                            alt="Mountain Trek">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                        <div class="absolute bottom-6 left-6 right-6 text-white">
                            <h3 class="text-xl font-bold mb-3 line-clamp-2">Mountain Trekking Guide</h3>
                            <p class="text-gray-200 mb-4 line-clamp-2">Essential tips for hiking...</p>
                            <p class="text-sm sm:text-base text-gray-300 mt-2">May 25, 2024</p>
                        </div>
                    </a>
                </div>

                <!-- Bottom Wide Blog Post -->
                <div class="col-span-12">
                    <a href="/blog-detail" class="block group relative rounded-3xl overflow-hidden h-[300px]">
                        <img src="https://images.unsplash.com/photo-1593693397690-362cb9666fc2"
                            class="w-full h-full object-cover transition duration-500 group-hover:scale-110"
                            alt="Luxury Resorts">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
                        <div class="absolute bottom-8 left-8 right-8 text-white">
                            <h3 class="text-2xl font-bold mb-3 line-clamp-2">Luxury Resort Reviews</h3>
                            <p class="text-gray-200 mb-4 line-clamp-2">Top-rated accommodations for the perfect getaway...
                            </p>
                            <p class="text-sm sm:text-base text-gray-300">June 1, 2024</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection