function MainComponent() { const [serviceType, setServiceType] = React.useState(''); const [appointmentTime, setAppointmentTime] = React.useState(''); const handleServiceChange = (event)=>{ setServiceType(event.target.value); }; const handleTimeChange = (event)=>{ setAppointmentTime(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); // Submit form logic }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#007bff] flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-full max-w-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-bold text-xl mb-6", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "Home Car Wash Appointment"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fullWash", className: "inline-flex items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "fullWash", name: "serviceType", value: "full", onChange: handleServiceChange, checked: serviceType === 'full', className: "text-blue-600 form-radio", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Full Wash at Home"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "outsideWash", className: "inline-flex items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "outsideWash", name: "serviceType", value: "outside", onChange: handleServiceChange, checked: serviceType === 'outside', className: "text-blue-600 form-radio", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Outside Wash at Home"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "timePicker", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Select Time"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "timePicker", name: "time", value: appointmentTime, onChange: handleTimeChange, className: "w-full p-2 border border-[#007BFF] rounded mt-1", required: true, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:bg-blue-700", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Schedule Appointment"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }