Tabbed Travel Search Form (Flights, Hotels, Cars)

<div class="lg:p-8 bg-white/70 rounded-xl pt-6 pr-6 pb-6 pl-6 shadow-xl backdrop-blur-2xl">
        <!-- Search Tabs -->
        <div class="flex animate-in slide-in-from-top duration-700 delay-200 border-gray-200 border-b mb-6">
            <button class="flex items-center space-x-2 px-4 py-3 border-b-2 border-blue-600 text-blue-600 font-medium hover:bg-blue-50 transition-colors tab-btn active" data-tab="flights">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plane" class="lucide lucide-plane w-5 h-5"><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z" class=""></path></svg>
                <span class="font-geist">Flights</span>
            </button>
            <button class="flex hover:text-gray-900 transition-colors hover:bg-gray-50 font-medium text-gray-600 pt-3 pr-4 pb-3 pl-4 space-x-2 items-center tab-btn" data-tab="hotels">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bed" class="lucide lucide-bed w-5 h-5"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>
                <span class="font-geist">Hotels</span>
            </button>
            <button class="flex items-center space-x-2 px-4 py-3 text-gray-600 hover:text-gray-900 font-medium transition-colors hover:bg-gray-50 tab-btn" data-tab="cars">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="car" class="lucide lucide-car w-5 h-5"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><path d="M9 17h6"></path><circle cx="17" cy="17" r="2"></circle></svg>
                <span class="font-geist">Cars</span>
            </button>
        </div>

        <!-- Trip Type -->
        <div class="flex space-x-4 mb-6 animate-in slide-in-from-left duration-700 delay-300" id="trip-type-container">
            <label class="flex items-center cursor-pointer hover:bg-blue-50 rounded-lg p-2 transition-colors">
                <input type="radio" name="trip" value="roundtrip" checked="" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                <span class="ml-2 text-gray-700 font-medium font-geist">Round trip</span>
            </label>
            <label class="flex items-center cursor-pointer hover:bg-blue-50 rounded-lg p-2 transition-colors">
                <input type="radio" name="trip" value="oneway" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                <span class="ml-2 text-gray-700 font-medium font-geist">One way</span>
            </label>
            <label class="flex items-center cursor-pointer hover:bg-blue-50 rounded-lg p-2 transition-colors">
                <input type="radio" name="trip" value="multicity" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                <span class="ml-2 text-gray-700 font-medium font-geist">Multi-city</span>
            </label>
        </div>

        <!-- Search Fields -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-6">
            <div class="lg:col-span-1 animate-in slide-in-from-bottom duration-700 delay-400" id="from-field">
                <label class="block text-sm font-medium text-gray-700 mb-2 font-geist" id="from-label">From</label>
                <div class="relative">
                    <input type="text" placeholder="City or airport" id="from-input" class="custom-input w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent hover:border-gray-400 transition-colors border-gray-300 border rounded-lg pt-3 pr-4 pb-3 pl-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plane-takeoff" class="lucide lucide-plane-takeoff absolute right-3 top-1/2 transform -translate-y-1/2 w-[20px] h-[20px]" id="from-icon" style="width: 20px; height: 20px; color: rgb(156, 163, 175);"><path d="M2 22h20"></path><path d="M6.36 17.4 4 17l-2-4 1.1-.55a2 2 0 0 1 1.8 0l.17.1a2 2 0 0 0 1.8 0L8 12 5 6l.9-.45a2 2 0 0 1 2.09.2l4.02 3a2 2 0 0 0 2.1.2l4.19-2.06a2.41 2.41 0 0 1 1.73-.17L21 7a1.4 1.4 0 0 1 .87 1.99l-.38.76c-.23.46-.6.84-1.07 1.08L7.58 17.2a2 2 0 0 1-1.22.18Z"></path></svg>
                </div>
            </div>
            <div class="lg:col-span-1 animate-in slide-in-from-bottom duration-700 delay-500" id="to-field">
                <label class="block text-sm font-medium text-gray-700 mb-2 font-geist" id="to-label">To</label>
                <div class="relative">
                    <input type="text" placeholder="City or airport" id="to-input" class="custom-input w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent border-gray-300 border rounded-lg pt-3 pr-4 pb-3 pl-4 hover:border-gray-400 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plane-landing" class="lucide lucide-plane-landing absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" id="to-icon"><path d="M2 22h20"></path><path d="M3.77 10.77 2 9l2-4.5 1.1.55c.55.28.9.84.9 1.45s.35 1.17.9 1.45L8 8.5l3-6 1.05.53a2 2 0 0 1 1.09 1.52l.72 5.4a2 2 0 0 0 1.09 1.52l4.4 2.2c.42.22.78.55 1.01.96l.6 1.03c.49.88-.06 1.98-1.06 2.1l-1.18.15c-.47.06-.95-.02-1.37-.24L4.29 11.15a2 2 0 0 1-.52-.38Z"></path></svg>
                </div>
            </div>
            <div class="lg:col-span-1 animate-in slide-in-from-bottom duration-700 delay-600" id="depart-field">
                <label class="block text-sm font-medium text-gray-700 mb-2 font-geist">Depart</label>
                <div class="relative">
                    <input type="date" id="depart-input" class="custom-input w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent border-gray-300 border rounded-lg pt-3 pr-4 pb-3 pl-4 hover:border-gray-400 transition-colors" min="2025-08-18">
                </div>
            </div>
            <div class="lg:col-span-1 animate-in slide-in-from-bottom duration-700 delay-700" id="return-field">
                <label class="block text-sm font-medium text-gray-700 mb-2 font-geist">Return</label>
                <div class="relative">
                    <input type="date" id="return-input" class="custom-input w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent border-gray-300 border rounded-lg pt-3 pr-4 pb-3 pl-4 hover:border-gray-400 transition-colors" min="2025-08-18">
                </div>
            </div>
            <div class="lg:col-span-1 animate-in slide-in-from-bottom duration-700 delay-800">
                <label class="block text-sm font-medium text-gray-700 mb-2 font-geist">Travelers</label>
                <div class="relative">
                    <select id="travelers-select" class="custom-input w-full focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none border-gray-300 border rounded-lg pt-3 pr-4 pb-3 pl-4 hover:border-gray-400 transition-colors">
                        <option value="1" class="font-geist">1 adult</option>
                        <option value="2" class="font-geist">2 adults</option>
                        <option value="3" class="font-geist">3 adults</option>
                        <option value="4" class="font-geist">4+ adults</option>
                    </select>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
                </div>
            </div>
        </div>

        <div class="animate-in slide-in-from-bottom duration-700 delay-900">
            <button id="search-button" class="w-full bg-blue-600 text-white rounded-[25px] font-medium text-[15px] leading-[21px] overflow-hidden relative cursor-pointer z-10 hover:bg-blue-600 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg" style="background-image: linear-gradient(to bottom, #8d49fd 0%, #7f56f3 50%, #5691f3 100%); box-shadow: 0px 4px 12px rgba(9, 12, 60, 0.15), 0px 2px 8px rgba(9, 12, 60, 0.15), 0px 1px 3px rgba(9, 12, 60, 0.1), inset 0px 1px 1px rgba(233, 209, 255, 0.2), inset 0px -1px 3px rgba(137, 222, 246, 0.3); padding: 0;">
                <span style="display: block; padding: 12px 24px; border-radius: 25px; overflow: hidden; position: relative; background-image: linear-gradient(to bottom, #e9d1ff, transparent 8px); background-position: 0 -6px; background-repeat: no-repeat; z-index: 1;" id="search-button-text" class="">
                    Search flights
                </span>
            </button>
        </div>
    </div>