function MainComponent() { const [formData, setFormData] = React.useState({ type: "", name: "", email: "", service: "", message: "" }); const updateFormData = (e)=>{ const { name, value } = e.target; setFormData((prevFormData)=>({ ...prevFormData, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); }; let formStep; if (formData.type === "") { formStep = 0; } else if (formData.type === "Service Inquiry" && formData.service === "") { formStep = 1; } else if (formData.email === "") { formStep = 2; } else { formStep = 3; // message step } let formContent; switch(formStep){ case 0: formContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "type", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Enquiry Type"), /*#__PURE__*/ React.createElement("select", { name: "type", id: "type", value: formData.type, onChange: updateFormData, className: "mt-1 block w-full border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Select an option"), /*#__PURE__*/ React.createElement("option", { value: "General Question", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "General Question"), /*#__PURE__*/ React.createElement("option", { value: "Service Inquiry", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Service Inquiry"))); break; case 1: formContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "service", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Service Interested In"), /*#__PURE__*/ React.createElement("select", { name: "service", id: "service", value: formData.service, onChange: updateFormData, className: "mt-1 block w-full border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Select a service"), /*#__PURE__*/ React.createElement("option", { value: "Web Development", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Web Development"), /*#__PURE__*/ React.createElement("option", { value: "Digital Marketing", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Digital Marketing"), /*#__PURE__*/ React.createElement("option", { value: "Graphic Design", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Graphic Design"))); break; case 2: formContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", value: formData.email, onChange: updateFormData, className: "mt-1 block w-full border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })); break; case 3: formContent = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { name: "message", id: "message", rows: "4", value: formData.message, onChange: updateFormData, className: "mt-1 block w-full border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })); break; } return /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, formContent, formStep === 3 && /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Submit")); }