\n {transportTypes.map((type, index) => (\n {\n setSelectedType(type.key as any);\n setSearchResults(false);\n setOptions([]);\n }}\n className={`p-6 rounded-xl text-center transition-all duration-200 card-entrance ${\n selectedType === type.key\n ? 'bg-gradient-to-r ' + type.color + ' text-white shadow-lg transform scale-105'\n : 'bg-white text-gray-700 hover:shadow-lg shadow-md'\n }`}\n style={{ animationDelay: `${index * 0.1}s` }}\n >\n

{type.icon}

{type.name}

\n {type.description}\n

\n \n ))}\n

\n );\n\n const renderSearchForm = () => (\n

\n Book Your {transportTypes.find(t => t.key === selectedType)?.name} \n {transportTypes.find(t => t.key === selectedType)?.icon}\n

\n\n

\n {/* From */}\n

\n From\n \n

\n\n {/* To */}\n

\n To\n \n

\n\n {/* Departure Date */}\n

\n Departure Date\n \n

\n\n {/* Return Date (if round trip) */}\n {formData.isRoundTrip && (\n

\n Return Date\n \n

\n )}\n\n {/* Passengers */}\n

\n Passengers\n \n {[1, 2, 3, 4, 5, 6].map(num => (\n \n ))}\n \n

\n\n {/* Class (for flights and trains) */}\n {(selectedType === 'flight' || selectedType === 'train') && (\n

\n Class\n \n {selectedType === 'flight' ? (\n <>\n \n \n \n \n ) : (\n <>\n \n \n \n \n )}\n \n

\n )}\n

\n\n {/* Round Trip Toggle */}\n {(selectedType === 'flight' || selectedType === 'train') && (\n

\n \n \n Round Trip\n \n

\n )}\n\n {/* Search Button */}\n

\n \n {loading ? (\n

\n Searching...\n

\n ) : (\n 'Search Options'\n )}\n \n

\n\n {/* Popular Routes */}\n

Popular Routes:

\n {popularRoutes[selectedType].map((route, index) => (\n setFormData(prev => ({ ...prev, from: route.from, to: route.to }))}\n className=\"px-3 py-1 bg-gray-100 hover:bg-purple-100 text-sm text-gray-700 rounded-full transition-colors duration-200\"\n >\n {route.from} → {route.to}\n \n ))}\n

\n );\n\n const renderSearchResults = () => {\n if (!searchResults) return null;\n\n return (\n

\n Available Options ({options.length})\n

\n\n {options.length === 0 ? (\n

😔

No options found for your search criteria

\n ) : (\n

\n {options.map((option: any, index) => (\n \n

\n {transportTypes.find(t => t.key === selectedType)?.icon}\n

\n {option.airline || option.name || option.provider || `${selectedType.charAt(0).toUpperCase() + selectedType.slice(1)} Service`}\n

\n Duration: {option.duration} • {option.trainNumber || option.type || 'Standard'}\n

₹{option.price.toLocaleString()}

\n handleBookOption(option)}\n disabled={loading}\n className=\"mt-2 btn-primary px-4 py-2 rounded-lg text-white font-medium hover:shadow-lg transition-all duration-200 disabled:opacity-50\"\n >\n {loading ? 'Booking...' : 'Book Now'}\n \n

\n ))}\n

\n )}\n \n );\n };\n\n return (\n

\n {/* Header */}\n

\n Book Your Journey 🎫\n

\n Choose your preferred mode of transport and find the best options\n

\n\n {/* Transport Type Selector */}\n {renderTransportTypeSelector()}\n\n {/* Search Form */}\n {renderSearchForm()}\n\n {/* Search Results */}\n {renderSearchResults()}\n\n {/* Features */}\n

⚡

Instant Booking

Book your tickets instantly with real-time availability

💳

Secure Payment

Multiple payment options with bank-level security

📱

Mobile Tickets

Get your tickets instantly on your mobile device

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Tarunkumar/Tarun/code/frontend/components/Booking.tsx","extension","actionData","errors"]