function NavigationBar({ darkMode, language = "en", onLanguageChange, onWhatsAppClick }) { const [isOpen, setIsOpen] = useState(false); const [isProductsOpen, setIsProductsOpen] = useState(false); const menuItems = { en: { home: "Home", products: "Products", testRide: "Test Ride", dealer: "Become a Dealer", about: "About Us", contact: "Contact", twoWheelers: "Two Wheelers", threeWheelers: "Three Wheelers", callUs: "Call Us:", whatsapp: "WhatsApp Us" }, hi: { home: "होम", products: "उत्पाद", testRide: "टेस्ट राइड", dealer: "डीलर बनें", about: "हमारे बारे में", contact: "संपर्क", twoWheelers: "दो पहिया", threeWheelers: "तीन पहिया", callUs: "कॉल करें:", whatsapp: "व्हाट्सएप करें" } }; const text = menuItems[language]; return /*#__PURE__*/ React.createElement("nav", { className: `fixed top-0 w-full z-50 ${darkMode ? "bg-gray-900 text-white" : "bg-white text-gray-900"} shadow-lg`, __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center h-16", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex-shrink-0", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/logo.png", alt: "ElectroRide Logo", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "hover:text-green-500", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, text.home), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsProductsOpen(!isProductsOpen), className: "flex items-center hover:text-green-500", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, text.products, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-1 text-xs", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `absolute top-full -left-4 py-2 w-48 ${darkMode ? "bg-gray-800" : "bg-white"} rounded-md shadow-xl ${isProductsOpen ? "block" : "hidden"}`, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/products/two-wheelers", className: "block px-4 py-2 hover:bg-green-500 hover:text-white", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, text.twoWheelers), /*#__PURE__*/ React.createElement("a", { href: "/products/three-wheelers", className: "block px-4 py-2 hover:bg-green-500 hover:text-white", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, text.threeWheelers))), /*#__PURE__*/ React.createElement("a", { href: "/test-ride", className: "hover:text-green-500", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, text.testRide), /*#__PURE__*/ React.createElement("a", { href: "/dealers", className: "hover:text-green-500", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, text.dealer), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "hover:text-green-500", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, text.about), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "hover:text-green-500", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, text.contact), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: (e)=>onLanguageChange(e.target.value), value: language, className: `${darkMode ? "bg-gray-800" : "bg-white"} border rounded-md px-2 py-1`, __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "hi", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "हिंदी")), /*#__PURE__*/ React.createElement("a", { href: "tel:+919876543210", className: "flex items-center hover:text-green-500", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-alt mr-2", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, text.callUs, " +91 98765 43210")), /*#__PURE__*/ React.createElement("button", { onClick: onWhatsAppClick, className: "inline-flex items-center bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-whatsapp mr-2", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }), text.whatsapp))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "md:hidden p-2 rounded-md hover:bg-gray-100", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isOpen ? "fa-times" : "fa-bars"} text-xl`, __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `md:hidden ${isOpen ? "block" : "hidden"} pb-4`, __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, text.home), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsProductsOpen(!isProductsOpen), className: "flex items-center w-full py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, text.products, /*#__PURE__*/ React.createElement("i", { className: `fas fa-chevron-down ml-1 text-xs transform ${isProductsOpen ? "rotate-180" : ""}`, __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `pl-4 space-y-2 ${isProductsOpen ? "block" : "hidden"}`, __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/products/two-wheelers", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, text.twoWheelers), /*#__PURE__*/ React.createElement("a", { href: "/products/three-wheelers", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }, text.threeWheelers))), /*#__PURE__*/ React.createElement("a", { href: "/test-ride", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, text.testRide), /*#__PURE__*/ React.createElement("a", { href: "/dealers", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, text.dealer), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, text.about), /*#__PURE__*/ React.createElement("a", { href: "/contact", className: "block py-2 hover:text-green-500", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, text.contact), /*#__PURE__*/ React.createElement("div", { className: "pt-4 space-y-4", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: (e)=>onLanguageChange(e.target.value), value: language, className: `block w-full ${darkMode ? "bg-gray-800" : "bg-white"} border rounded-md px-2 py-1`, __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "hi", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "हिंदी")), /*#__PURE__*/ React.createElement("a", { href: "tel:+919876543210", className: "flex items-center hover:text-green-500", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone-alt mr-2", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, text.callUs, " +91 98765 43210")), /*#__PURE__*/ React.createElement("button", { onClick: onWhatsAppClick, className: "flex items-center w-full justify-center bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-whatsapp mr-2", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }), text.whatsapp)))))); } function NavigationBarStory() { const [language, setLanguage] = useState("en"); const handleWhatsAppClick = ()=>{ window.open("https://wa.me/919876543210", "_blank"); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 223, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 224, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, "Light Mode"), /*#__PURE__*/ React.createElement(NavigationBar, { darkMode: false, language: language, onLanguageChange: setLanguage, onWhatsAppClick: handleWhatsAppClick, __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900", __source: { fileName: "", lineNumber: 234, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this }, "Dark Mode"), /*#__PURE__*/ React.createElement(NavigationBar, { darkMode: true, language: language, onLanguageChange: setLanguage, onWhatsAppClick: handleWhatsAppClick, __source: { fileName: "", lineNumber: 236, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [darkMode, setDarkMode] = useState(false); const [language, setLanguage] = useState("en"); const [selectedVehicle, setSelectedVehicle] = useState(null); const [selectedDate, setSelectedDate] = useState(""); const [selectedTime, setSelectedTime] = useState(""); const [formSubmitted, setFormSubmitted] = useState(false); const [error, setError] = useState(null); const text = { en: { title: "Book a Test Ride", subtitle: "Experience the future of mobility", selectVehicle: "Select Vehicle", selectDate: "Select Date", selectTime: "Select Time", contactInfo: "Contact Information", name: "Full Name", phone: "Phone Number", email: "Email Address", license: "Driving License Number", submit: "Book Test Ride", success: "Test ride booked successfully! We'll contact you shortly.", error: "Something went wrong. Please try again.", available: "Available Vehicles" }, hi: { title: "टेस्ट राइड बुक करें", subtitle: "भविष्य की सवारी का अनुभव करें", selectVehicle: "वाहन चुनें", selectDate: "दिनांक चुनें", selectTime: "समय चुनें", contactInfo: "संपर्क जानकारी", name: "पूरा नाम", phone: "फोन नंबर", email: "ईमेल पता", license: "ड्राइविंग लाइसेंस नंबर", submit: "टेस्ट राइड बुक करें", success: "टेस्ट राइड सफलतापूर्वक बुक की गई! हम जल्द ही संपर्क करेंगे।", error: "कुछ गलत हो गया। कृपया पुनः प्रयास करें।", available: "उपलब्ध वाहन" } }; const vehicles = [ { id: 1, name: "Revolt RV400", image: "/images/revolt-rv400.jpg", type: "Bike", range: "150km" }, { id: 2, name: "Ather 450X", image: "/images/ather-450x.jpg", type: "Scooter", range: "116km" }, { id: 3, name: "Ola S1 Pro", image: "/images/ola-s1pro.jpg", type: "Scooter", range: "181km" } ]; const timeSlots = [ "10:00 AM", "11:00 AM", "12:00 PM", "2:00 PM", "3:00 PM", "4:00 PM" ]; const handleSubmit = async (e)=>{ e.preventDefault(); setError(null); const formData = new FormData(e.target); const data = { vehicle: selectedVehicle, date: selectedDate, time: selectedTime, name: formData.get("name"), phone: formData.get("phone"), email: formData.get("email"), license: formData.get("license") }; try { const response = await fetch("/api/test-ride/book", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } setFormSubmitted(true); window.scrollTo(0, 0); } catch (err) { console.error(err); setError(text[language].error); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-inter", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { darkMode: darkMode, language: language, onLanguageChange: setLanguage, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative h-[50vh]", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/test-ride-hero.jpg", alt: "Electric vehicle test ride experience", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-7xl font-bold mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, text[language].title), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, text[language].subtitle)))), formSubmitted ? /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto my-16 p-8 text-center bg-green-50 rounded-lg", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-5xl text-green-500 mb-4", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, text[language].success)) : /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-16", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-8", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, text[language].available), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, vehicles.map((vehicle)=>/*#__PURE__*/ React.createElement("div", { key: vehicle.id, onClick: ()=>setSelectedVehicle(vehicle), className: `p-4 rounded-lg border cursor-pointer transition-all ${selectedVehicle?.id === vehicle.id ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-green-500"}`, __source: { fileName: "", lineNumber: 146, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 155, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: vehicle.image, alt: vehicle.name, className: "w-24 h-24 object-cover rounded", __source: { fileName: "", lineNumber: 156, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 161, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 162, columnNumber: 25 }, __self: this }, vehicle.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 163, columnNumber: 25 }, __self: this }, vehicle.type), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 164, columnNumber: 25 }, __self: this }, "Range: ", vehicle.range))))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, text[language].selectDate), /*#__PURE__*/ React.createElement("input", { type: "date", min: new Date().toISOString().split("T")[0], onChange: (e)=>setSelectedDate(e.target.value), required: true, className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium mb-2", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, text[language].selectTime), /*#__PURE__*/ React.createElement("select", { onChange: (e)=>setSelectedTime(e.target.value), required: true, className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 195, columnNumber: 21 }, __self: this }, "Select time slot"), timeSlots.map((slot)=>/*#__PURE__*/ React.createElement("option", { key: slot, value: slot, __source: { fileName: "", lineNumber: 197, columnNumber: 23 }, __self: this }, slot)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, text[language].contactInfo), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: text[language].name, required: true, className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 208, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", placeholder: text[language].phone, required: true, className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 215, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: text[language].email, required: true, className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 222, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "license", placeholder: text[language].license, required: true, className: "w-full p-3 border rounded-lg", __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !selectedVehicle || !selectedDate || !selectedTime, className: "w-full bg-green-500 text-white py-3 rounded-lg font-medium hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, text[language].submit)))))); }