function MainComponent() { const [selectedCar, setSelectedCar] = React.useState(''); const [startDate, setStartDate] = React.useState(''); const [endDate, setEndDate] = React.useState(''); const [customerName, setCustomerName] = React.useState(''); const [email, setEmail] = React.useState(''); const [isSubmitted, setIsSubmitted] = React.useState(false); const handleCarChange = (event)=>{ setSelectedCar(event.target.value); }; const handleStartDateChange = (event)=>{ setStartDate(event.target.value); }; const handleEndDateChange = (event)=>{ setEndDate(event.target.value); }; const handleCustomerNameChange = (event)=>{ setCustomerName(event.target.value); }; const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); setIsSubmitted(true); }; const carData = { sedan: { label: 'Sedan', img: 'sedan.jpg' }, suv: { label: 'SUV', img: 'suv.jpg' }, coupe: { label: 'Coupe', img: 'coupe.jpg' }, convertible: { label: 'Convertible', img: 'convertible.jpg' } }; const carImage = selectedCar ? carData[selectedCar].img : ''; const formContent = /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-6 flex flex-col lg:flex-row justify-between items-center space-y-12 lg:space-y-0 lg:space-x-12", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, !isSubmitted && /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full p-8 bg-white shadow-2xl rounded-l-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-gray-900 font-semibold mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Reserve Your Car"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "car", className: "block text-lg text-gray-700 font-medium", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "Select Car"), /*#__PURE__*/ React.createElement("select", { name: "car", id: "car", value: selectedCar, onChange: handleCarChange, className: "w-full p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "Choose a car"), Object.entries(carData).map(([value, { label }])=>/*#__PURE__*/ React.createElement("option", { key: value, value: value, __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, label)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "start-date", className: "block text-lg text-gray-700 font-medium", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Start Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "start-date", id: "start-date", value: startDate, onChange: handleStartDateChange, className: "w-full p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "end-date", className: "block text-lg text-gray-700 font-medium", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "End Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "end-date", id: "end-date", value: endDate, onChange: handleEndDateChange, className: "w-full p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customer-name", className: "block text-lg text-gray-700 font-medium", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "customer-name", id: "customer-name", value: customerName, onChange: handleCustomerNameChange, className: "w-full p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-lg text-gray-700 font-medium", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", value: email, onChange: handleEmailChange, className: "w-full p-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Rent Car")), isSubmitted && /*#__PURE__*/ React.createElement("div", { className: "w-full p-8 bg-white shadow-2xl rounded-l-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-gray-900 font-semibold mb-6", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Reservation Confirmed"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Thank you, ", customerName, ". Your reservation has been confirmed!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Reservation details have been sent to: ", email, "."))), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, carImage && /*#__PURE__*/ React.createElement("img", { src: `./images/${carImage}`, alt: `Picture of ${carData[selectedCar].label}`, className: "rounded-r-lg shadow-2xl w-full h-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }))); const header = /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-5", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-white font-semibold", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Auto Rental Service"))); const footer = /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-blue-600", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-5 text-center", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "All rights reserved © Auto Rental Service"))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#eef2f7]", __source: { fileName: "", lineNumber: 116, columnNumber: 5 }, __self: this }, header, formContent, footer, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, ` body { background-color: #eef2f7; font-family: 'Roboto', sans-serif; } `)); }