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

@section('content')
    {{-- <div class="relative">
        <div class="absolute top-20 right-0 flex gap-4 transform transition-all duration-500 group-hover:-translate-y-2">
            <div class="">
                <script src="https://unpkg.com/@lottiefiles/lottie-player@2.0.8/dist/lottie-player.js"></script>
                <lottie-player src="https://lottie.host/a51f03a9-f72c-4b5b-82be-32b84a9df679/pHyKP6JTDi.json" speed="1"
                    class="w-full h-[100px] sm:h-[150px] md:h-[150px] lg:h-[200px] xl:h-[250px] 2xl:h-[300px]" loop autoplay
                    direction="1" mode="normal">
                </lottie-player>
            </div>
        </div>
    </div> --}}


    <div class="relative pt-24 md:pt-32 pb-10 lg:pt-40">
        <div class="container mx-auto px-4 relative z-10">
            <!-- Page Header -->
            <div class="text-center max-w-3xl mx-auto mb-10 lg:mb-16">
                <h1 class="text-6xl font-bold mb-6">Our Tours</h1>
                <div class="flex justify-center gap-2 mb-8">
                    <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="text-xl text-gray-600">Discover amazing destinations and experiences across Thailand</p>
            </div>

            <!-- Featured Tour Section -->
            <div class="mb-5 lg:mb-10">
                <h2 class="text-3xl font-bold mb-4 lg:mb-8">Featured Tours</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Featured Tour 1 -->
                    <div class="group relative overflow-hidden h-[500px] rounded-2xl">
                        <img src="https://images.unsplash.com/photo-1695060707428-7de5a3479a0f?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="Featured Thai Temple Tour">
                        <div class="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 to-transparent">
                            <div>
                                <span class="inline-block px-4 py-2 bg-teal-500 text-white rounded-full mb-4">Featured</span>
                                <h3 class="text-2xl font-bold text-white mb-4">Premium Thai Temple Experience</h3>
                                <p class="text-white text-lg mb-6">Experience the most iconic temples of Thailand</p>
                                <div class="flex items-center gap-6">
                                    <span class="text-3xl font-bold text-white">฿3,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>
                    </div>

                    <!-- Featured Tour 2 -->
                    <div class="group relative overflow-hidden h-[500px] rounded-2xl">
                        <img src="https://images.unsplash.com/photo-1504214208698-ea1916a2195a"
                            class="w-full h-full object-cover" alt="Featured Beach Tour">
                        <div class="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 to-transparent">
                            <div>
                                <span class="inline-block px-4 py-2 bg-teal-500 text-white rounded-full mb-4">Featured</span>
                                <h3 class="text-2xl font-bold text-white mb-4">Island Paradise Experience</h3>
                                <p class="text-white text-lg mb-6">Discover Thailand's most beautiful beaches</p>
                                <div class="flex items-center gap-6">
                                    <span class="text-3xl font-bold text-white">฿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>
                    </div>
                </div>
            </div>

            <!-- Regular Tours Section -->
            <div class="mb-12">
                <h2 class="text-3xl font-bold mb-4 lg:mb-8">All Tours</h2>
                <div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
                    <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>

                    <!-- Tour Card 2 -->
                    <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>

                    <!-- Tour Card 3 -->
                    <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>

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

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

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


        <!-- Pagination -->
        <div class="flex justify-center mt-12 z-50 relative">
            <nav class="flex items-center gap-2">
                <button
                    class="w-10 h-10 rounded-lg border border-gray-200 flex items-center justify-center text-gray-500 hover:border-teal-500 hover:text-teal-500 transition-colors">
                    <svg class="w-5 h-5" 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="w-10 h-10 rounded-lg bg-teal-500 text-white">1</button>
                <button class="w-10 h-10 rounded-lg hover:bg-gray-100 text-gray-600">2</button>
                <button class="w-10 h-10 rounded-lg hover:bg-gray-100 text-gray-600">3</button>
                <button
                    class="w-10 h-10 rounded-lg border border-gray-200 flex items-center justify-center text-gray-500 hover:border-teal-500 hover:text-teal-500 transition-colors">
                    <svg class="w-5 h-5" 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>
            </nav>
        </div>
    </div>
    </div>
@endsection