function MainComponent() { const [pickupLocation, setPickupLocation] = useState(""); const [dropoffLocation, setDropoffLocation] = useState(""); const [selectedDate, setSelectedDate] = useState(""); const [selectedTime, setSelectedTime] = useState(""); const [error, setError] = useState(null); const [selectedCarClass, setSelectedCarClass] = useState("comfort_plus"); const [tripType, setTripType] = useState("destination"); const [duration, setDuration] = useState(""); const [loading, setLoading] = useState(false); const [language, setLanguage] = useState("ru"); // Load language preference on component mount useEffect(()=>{ const urlParams = new URLSearchParams(window.location.search); const langParam = urlParams.get("lang"); const savedLanguage = langParam || localStorage.getItem("language") || "ru"; setLanguage(savedLanguage); localStorage.setItem("language", savedLanguage); }, []); // Handle language change const changeLanguage = (lang)=>{ setLanguage(lang); localStorage.setItem("language", lang); const urlParams = new URLSearchParams(window.location.search); urlParams.set("lang", lang); window.history.replaceState({}, "", `${window.location.pathname}?${urlParams}`); }; // Translations const translations = { ru: { title: "Заказать водителя", selectCarClass: "Выберите класс автомобиля", comfort: "COMFORT+", comfortDesc: "Бизнес седан", business: "BUSINESS", businessDesc: "Премиум автомобиль", minivan: "MINIVAN", minivanDesc: "До 6 пассажиров", fromWhere: "Откуда", fromPlaceholder: "Введите адрес отправления", tripType: "Тип поездки", byRoute: "По маршруту", byTime: "По времени", toWhere: "Введите адрес назначения", howManyHours: "Укажите количество часов", date: "Дата", startTime: "Время начала поездки", submitButton: "Заказать водителя", submitting: "Отправка заявки...", errorDestination: "Пожалуйста, укажите конечную точку", errorDuration: "Пожалуйста, укажите продолжительность поездки", errorFields: "Пожалуйста, заполните все обязательные поля" }, kz: { title: "Жүргізуші шақыру", selectCarClass: "Автомобиль сыныбын таңдаңыз", comfort: "COMFORT+", comfortDesc: "Бизнес седан", business: "BUSINESS", businessDesc: "Премиум автомобиль", minivan: "MINIVAN", minivanDesc: "6-ға дейін жолаушы", fromWhere: "Қайдан", fromPlaceholder: "Жөнелту мекенжайын енгізіңіз", tripType: "Сапар түрі", byRoute: "Маршрут бойынша", byTime: "Уақыт бойынша", toWhere: "Баратын мекенжайды енгізіңіз", howManyHours: "Сағат санын көрсетіңіз", date: "Күні", startTime: "Сапар басталу уақыты", submitButton: "Жүргізуші шақыру", submitting: "Өтініш жіберілуде...", errorDestination: "Соңғы нүктені көрсетіңіз", errorDuration: "Сапар ұзақтығын көрсетіңіз", errorFields: "Барлық міндетті өрістерді толтырыңыз" } }; const t = translations[language]; const carClasses = [ { id: "comfort_plus", name: t.comfort, description: t.comfortDesc, icon: "fa-solid fa-car-side", bgColor: "from-[#FFB74B] to-[#FFA000]" }, { id: "business", name: t.business, description: t.businessDesc, icon: "fa-solid fa-car-rear", bgColor: "from-[#43A047] to-[#2E7D32]" }, { id: "minivan", name: t.minivan, description: t.minivanDesc, icon: "fa-solid fa-van-shuttle", bgColor: "from-[#5C6BC0] to-[#3949AB]" } ]; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); const requiredFields = [ pickupLocation, selectedDate, selectedTime, selectedCarClass ]; if (tripType === "destination" && !dropoffLocation) { setError(t.errorDestination); setLoading(false); return; } if (tripType === "duration" && !duration) { setError(t.errorDuration); setLoading(false); return; } if (requiredFields.some((field)=>!field)) { setError(t.errorFields); setLoading(false); return; } try { const response = await fetch("/api/driver-requests/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pickup_location: pickupLocation, dropoff_location: dropoffLocation, date: selectedDate, time: selectedTime, car_class: selectedCarClass, trip_type: tripType, duration: duration }) }); const data = await response.json(); if (data.error) { throw new Error(data.error); } // Handle success window.location.href = `/bookings?lang=${language}`; } catch (err) { setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] font-sf-pro text-white", __source: { fileName: "", lineNumber: 176, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 bg-[#1A1A1A] shadow-lg z-50", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-6 py-4", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/?lang=${language}`, className: "text-white", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-arrow-left text-xl", __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "ml-4 text-xl font-medium", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, t.title)), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 186, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeLanguage("kz"), className: `text-2xl transition-opacity ${language === "kz" ? "ring-2 ring-[#FFB74B] rounded-lg opacity-100 px-1" : "opacity-60 hover:opacity-100"}`, __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "🇰🇿"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeLanguage("ru"), className: `text-2xl transition-opacity ${language === "ru" ? "ring-2 ring-[#FFB74B] rounded-lg opacity-100 px-1" : "opacity-60 hover:opacity-100"}`, __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, "🇷🇺")))), /*#__PURE__*/ React.createElement("main", { className: "pt-20 px-6 pb-24", __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, t.selectCarClass), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 217, columnNumber: 13 }, __self: this }, carClasses.map((carClass)=>/*#__PURE__*/ React.createElement("button", { key: carClass.id, type: "button", onClick: ()=>setSelectedCarClass(carClass.id), className: `w-full relative rounded-xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-xl h-32 ${selectedCarClass === carClass.id ? "ring-2 ring-[#FFB74B]" : "ring-1 ring-gray-700"}`, __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-gradient-to-br ${carClass.bgColor}`, __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3", __source: { fileName: "", lineNumber: 232, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${carClass.icon} text-white text-4xl`, __source: { fileName: "", lineNumber: 233, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-bold text-xl tracking-wider", __source: { fileName: "", lineNumber: 234, columnNumber: 23 }, __self: this }, carClass.name)), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-black/30", __source: { fileName: "", lineNumber: 238, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white/90 text-sm", __source: { fileName: "", lineNumber: 239, columnNumber: 23 }, __self: this }, carClass.description))))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, t.fromWhere), /*#__PURE__*/ React.createElement("input", { type: "text", value: pickupLocation, onChange: (e)=>setPickupLocation(e.target.value), placeholder: t.fromPlaceholder, className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, t.tripType), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setTripType("destination"), className: `flex-1 py-3 px-4 rounded-xl border ${tripType === "destination" ? "border-[#FFB74B] bg-[#FFB74B]/10 text-[#FFB74B]" : "border-gray-700 text-gray-400"}`, __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this }, t.byRoute), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setTripType("duration"), className: `flex-1 py-3 px-4 rounded-xl border ${tripType === "duration" ? "border-[#FFB74B] bg-[#FFB74B]/10 text-[#FFB74B]" : "border-gray-700 text-gray-400"}`, __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this }, t.byTime)), tripType === "destination" ? /*#__PURE__*/ React.createElement("input", { type: "text", value: dropoffLocation, onChange: (e)=>setDropoffLocation(e.target.value), placeholder: t.toWhere, className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("input", { type: "number", value: duration, onChange: (e)=>setDuration(e.target.value), placeholder: t.howManyHours, min: "1", className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this }, t.date), /*#__PURE__*/ React.createElement("input", { type: "date", value: selectedDate, onChange: (e)=>setSelectedDate(e.target.value), className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-3", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this }, t.startTime), /*#__PURE__*/ React.createElement("input", { type: "time", value: selectedTime, onChange: (e)=>setSelectedTime(e.target.value), className: "w-full px-5 py-4 rounded-xl bg-[#2A2A2A] text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[#FFB74B]", __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-900/50 text-red-400 p-4 rounded-xl border border-red-800", __source: { fileName: "", lineNumber: 334, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: `w-full bg-gradient-to-r from-[#FFB74B] to-[#FFA000] text-white font-medium py-4 rounded-xl ${loading ? "opacity-50 cursor-not-allowed" : "hover:from-[#FFA73B] hover:to-[#FF9100] transform transition-all duration-300 hover:scale-[1.02]"}`, __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-circle-notch animate-spin", __source: { fileName: "", lineNumber: 350, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }, t.submitting)) : t.submitButton))), /*#__PURE__*/ React.createElement("nav", { className: "fixed bottom-0 w-full bg-[#1A1A1A] border-t border-gray-800", __source: { fileName: "", lineNumber: 361, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around px-6 py-4", __source: { fileName: "", lineNumber: 362, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 363, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-house-chimney-window text-3xl", __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: `/profile?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 366, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-circle-user text-3xl", __source: { fileName: "", lineNumber: 367, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: `/bookings?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 369, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-calendar-check text-3xl", __source: { fileName: "", lineNumber: 370, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: `/support?lang=${language}`, className: "text-gray-400", __source: { fileName: "", lineNumber: 372, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-headset text-3xl", __source: { fileName: "", lineNumber: 373, columnNumber: 13 }, __self: this }))))); }