function MainComponent() { const [destination, setDestination] = React.useState(""); const [startDate, setStartDate] = React.useState(""); const [endDate, setEndDate] = React.useState(""); const [featuredDestinations, setFeaturedDestinations] = React.useState([]); const [availableDestinations, setAvailableDestinations] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(()=>{ const fetchDestinations = async ()=>{ try { // Fetch all destinations for the dropdown const allDestinationsResponse = await fetch("/api/check-destinations", { method: "POST" }); const allDestinationsData = await allDestinationsResponse.json(); if (allDestinationsData.destinations) { // Filter only active destinations for the dropdown const activeDestinations = allDestinationsData.destinations.filter((dest)=>dest.is_active).map((dest)=>({ id: dest.id, name: dest.name, location: dest.location })); setAvailableDestinations(activeDestinations); } // Fetch featured destinations for display const response = await fetch("/api/destinations", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ limit: 6, sortBy: "rating", sortOrder: "desc" }) }); if (!response.ok) { throw new Error("Failed to fetch destinations"); } const data = await response.json(); console.log("API response:", data); if (data.destinations) { setFeaturedDestinations(data.destinations.map((dest)=>({ id: dest.id, name: dest.name, image: dest.heroImage, headline: `${dest.travelMood} • ${dest.durationDays} days • ${dest.location}`, price: dest.basePrice, originalPrice: dest.originalPrice, rating: dest.rating, reviewCount: dest.reviewCount }))); } } catch (error) { console.error("Error fetching destinations:", error); // Keep the existing static data as fallback with working images setFeaturedDestinations([ { id: 1, name: "Bali Paradise", image: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=800&h=600&fit=crop&crop=center", headline: "Private pools • Spa included • Beachfront", price: 1299, originalPrice: 1599 }, { id: 2, name: "Costa Rica Adventure", image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=800&h=600&fit=crop&crop=center", headline: "Zip-lining • Wildlife tours • Eco-luxury", price: 899, originalPrice: 1199 }, { id: 3, name: "Greek Islands Escape", image: "https://images.unsplash.com/photo-1613395877344-13d4a8e0d49e?w=800&h=600&fit=crop&crop=center", headline: "Sunset views • Wine tasting • Historic sites", price: 1599, originalPrice: 1899 }, { id: 4, name: "Maldives Luxury", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop&crop=center", headline: "Overwater villas • Diving • Fine dining", price: 2299, originalPrice: 2799 }, { id: 5, name: "Morocco Magic", image: "https://images.unsplash.com/photo-1539650116574-75c0c6d73f6e?w=800&h=600&fit=crop&crop=center", headline: "Desert camps • Camel rides • Cultural tours", price: 1099, originalPrice: 1399 }, { id: 6, name: "Thailand Bliss", image: "https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?w=800&h=600&fit=crop&crop=center", headline: "Temple visits • Cooking classes • Beach time", price: 799, originalPrice: 999 } ]); } finally{ setLoading(false); } }; fetchDestinations(); }, []); const handleSearch = ()=>{ if (!destination) { alert("Please select a destination"); return; } if (!startDate || !endDate) { alert("Please select both start and end dates"); return; } if (new Date(startDate) >= new Date(endDate)) { alert("End date must be after start date"); return; } const searchParams = new URLSearchParams(); searchParams.set("destination", destination); searchParams.set("startDate", startDate); searchParams.set("endDate", endDate); window.location.href = `/search?${searchParams.toString()}`; }; // Get today's date in YYYY-MM-DD format for min date const today = new Date().toISOString().split("T")[0]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f8f6f3] to-[#f5f2ef] font-inter", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-gradient-to-br from-orange-400 via-pink-500 to-orange-600 min-h-[70vh] flex items-center", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-20", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/235fe0ac-18e0-4fa8-9a43-28bfa4e93760/-/format/auto/", alt: "Wander & Wonder Logo", className: "w-32 h-32 md:w-40 md:h-40 mx-auto mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl md:text-6xl font-bold text-white mb-6 leading-tight", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, "Your Perfect Vacation", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-yellow-200", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "All Included")), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-white opacity-90 max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, "Discover amazing destinations with everything included - flights, hotels, meals, and experiences")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-2xl p-6 md:p-8 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mb-6", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-orange-500 mr-2", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }), "Destination"), /*#__PURE__*/ React.createElement("select", { name: "destination", value: destination, onChange: (e)=>setDestination(e.target.value), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none text-lg", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }, "Select destination"), availableDestinations.map((dest)=>/*#__PURE__*/ React.createElement("option", { key: dest.id, value: dest.name, __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }, dest.name, " - ", dest.location)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar text-orange-500 mr-2", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }), "Start Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "startDate", value: startDate, min: today, onChange: (e)=>setStartDate(e.target.value), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none text-lg", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-check text-orange-500 mr-2", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }), "End Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "endDate", value: endDate, min: startDate || today, onChange: (e)=>setEndDate(e.target.value), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-orange-500 focus:outline-none text-lg", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "w-full bg-gradient-to-r from-orange-500 to-pink-500 text-white font-bold py-4 px-8 rounded-xl text-lg hover:from-orange-600 hover:to-pink-600 transition-all duration-300 shadow-lg mb-4", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this }), "Find My Perfect Vacation"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/ai-assistant", className: "w-full bg-gradient-to-r from-purple-600 via-blue-500 to-indigo-600 text-white font-bold py-4 px-8 rounded-xl text-lg hover:from-purple-700 hover:via-blue-600 hover:to-indigo-700 transition-all duration-300 shadow-lg transform hover:scale-105", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-2", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }), "AI Travel Agent")))), /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16", __source: { fileName: "", lineNumber: 250, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 251, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-8 mb-8", __source: { fileName: "", lineNumber: 252, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-green-600", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shield-alt text-2xl mr-3", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, "No Hidden Fees")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-blue-600", __source: { fileName: "", lineNumber: 257, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-2xl mr-3", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, "24/7 Support")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-purple-600", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-medal text-2xl mr-3", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, "Best Price Guarantee")))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 270, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 271, columnNumber: 11 }, __self: this }, "Featured Destinations"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 274, columnNumber: 11 }, __self: this }, "Handpicked vacation packages with everything included")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 279, columnNumber: 9 }, __self: this }, loading ? [ ...Array.from({ length: 6 }) ].map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-2xl shadow-lg overflow-hidden animate-pulse", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-64 bg-gray-300", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-300 rounded mb-2", __source: { fileName: "", lineNumber: 289, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-300 rounded mb-4", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 w-20 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 292, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-10 w-24 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }))))) : featuredDestinations.map((dest)=>/*#__PURE__*/ React.createElement("div", { key: dest.id, className: "bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer", onClick: ()=>{ const searchParams = new URLSearchParams(); searchParams.set("id", dest.id); if (startDate) searchParams.set("startDate", startDate); if (endDate) searchParams.set("endDate", endDate); window.location.href = `/package?${searchParams.toString()}`; }, __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-64", __source: { fileName: "", lineNumber: 310, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: dest.image, alt: `Beautiful vacation destination in ${dest.name} featuring luxury accommodations and scenic views`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 311, columnNumber: 21 }, __self: this }), dest.originalPrice && /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold", __source: { fileName: "", lineNumber: 317, columnNumber: 23 }, __self: this }, "Save $", dest.originalPrice - dest.price)), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 324, columnNumber: 21 }, __self: this }, dest.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4 leading-relaxed", __source: { fileName: "", lineNumber: 327, columnNumber: 21 }, __self: this }, dest.headline), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 331, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 332, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 333, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-orange-600", __source: { fileName: "", lineNumber: 334, columnNumber: 27 }, __self: this }, "$", dest.price), dest.originalPrice && /*#__PURE__*/ React.createElement("span", { className: "text-lg text-gray-400 line-through", __source: { fileName: "", lineNumber: 338, columnNumber: 29 }, __self: this }, "$", dest.originalPrice)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 343, columnNumber: 25 }, __self: this }, "per person, all inclusive")), /*#__PURE__*/ React.createElement("button", { className: "bg-gradient-to-r from-orange-500 to-pink-500 text-white font-semibold py-3 px-6 rounded-xl hover:from-orange-600 hover:to-pink-600 transition-all duration-300", __source: { fileName: "", lineNumber: 348, columnNumber: 23 }, __self: this }, "Book Now")))))), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-16", __source: { fileName: "", lineNumber: 357, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/search", className: "bg-white border-2 border-orange-500 text-orange-500 font-bold py-4 px-8 rounded-xl text-lg hover:bg-orange-500 hover:text-white transition-all duration-300", __source: { fileName: "", lineNumber: 358, columnNumber: 11 }, __self: this }, "View All Destinations"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-orange-500 to-pink-500 py-16", __source: { fileName: "", lineNumber: 367, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 368, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 369, columnNumber: 11 }, __self: this }, "Ready for Your Dream Vacation?"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-white opacity-90 mb-8", __source: { fileName: "", lineNumber: 372, columnNumber: 11 }, __self: this }, "Join thousands of happy travelers who chose our all-inclusive packages"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/ai-assistant", className: "bg-white text-orange-500 font-bold py-4 px-8 rounded-xl text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg", __source: { fileName: "", lineNumber: 376, columnNumber: 11 }, __self: this }, "Start Planning Today")))); }

Your Perfect VacationAll Included

Featured Destinations

Ready for Your Dream Vacation?

Your Perfect Vacation
All Included