function MainComponent() { const [step, setStep] = React.useState(1); const [propertyType, setPropertyType] = React.useState(''); const [numberOfRooms, setNumberOfRooms] = React.useState(''); const [airConditionType, setAirConditionType] = React.useState(''); const [estimatedCost, setEstimatedCost] = React.useState(0); const calculateCost = ()=>{ let cost = 0; cost += propertyType === 'Apartment' ? 100 : 200; cost += parseInt(numberOfRooms, 10) * (propertyType === 'Apartment' ? 50 : 75); cost += airConditionType === 'Cooling only' ? 300 : 500; setEstimatedCost(cost); }; const handlePropertyTypeSelection = (type)=>{ setPropertyType(type); setStep(2); }; const handleNumberOfRoomsChange = (e)=>{ setNumberOfRooms(e.target.value); }; const handleAirConditionTypeSelection = (type)=>{ setAirConditionType(type); setStep(3); calculateCost(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F4F8] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "What type of property do you want to install an air conditioner in?"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mt-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePropertyTypeSelection('Apartment'), className: "px-4 py-2 bg-[#007BFF] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Apartment"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePropertyTypeSelection('House'), className: "px-4 py-2 bg-[#007BFF] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "House"))), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#333]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "How many rooms do you want to air condition?"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "numberOfRooms", value: numberOfRooms, onChange: handleNumberOfRoomsChange, className: "mt-4 px-3 py-2 border rounded-md text-[#333]", placeholder: "Enter number", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(3), className: "mt-4 px-4 py-2 bg-[#007BFF] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Next")), step === 3 && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#333]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "What type of air conditioner are you interested in?"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAirConditionTypeSelection('Cooling only'), className: "px-4 py-2 bg-[#007BFF] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Cooling only"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAirConditionTypeSelection('Heating/Cooling'), className: "px-4 py-2 bg-[#007BFF] text-white rounded-md font-medium", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Heating/Cooling"))), step > 3 && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#333]", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Your estimated cost for ", propertyType.toLowerCase(), " with ", numberOfRooms, " room(s) and ", airConditionType.toLowerCase(), " system is:"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-[#007BFF]", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "$", estimatedCost))); }