function MainComponent() { const [step, setStep] = React.useState(1); const [location, setLocation] = React.useState(''); const [budget, setBudget] = React.useState(50000); const [roads, setRoads] = React.useState(false); const [residentialZone, setResidentialZone] = React.useState(false); const [commercialZone, setCommercialZone] = React.useState(false); const [industrialZone, setIndustrialZone] = React.useState(false); const [facilities, setFacilities] = React.useState(false); const [transportation, setTransportation] = React.useState(false); const [challenges, setChallenges] = React.useState(false); const handleLocationChange = (e)=>setLocation(e.target.value); const nextStep = ()=>setStep(step + 1); const handleChoiceSelection = (choice)=>()=>{ const costMap = { roads: 5000, residentialZone: 10000, commercialZone: 8000, industrialZone: 12000, facilities: 20000, transportation: 15000 }; if (budget >= costMap[choice]) { setBudget((prevBudget)=>prevBudget - costMap[choice]); switch(choice){ case 'roads': setRoads(true); break; case 'residentialZone': setResidentialZone(true); break; case 'commercialZone': setCommercialZone(true); break; case 'industrialZone': setIndustrialZone(true); break; case 'facilities': setFacilities(true); break; case 'transportation': setTransportation(true); break; default: break; } } }; React.useEffect(()=>{ if (location && budget < 15000 && !challenges) { setChallenges(true); } }, [ location, budget ]); let content; switch(step){ case 1: content = /*#__PURE__*/ React.createElement("select", { className: "mb-4 p-2 border border-gray-300 rounded w-full max-w-xs font-roboto", name: "location", value: location, onChange: handleLocationChange, __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Select Prime Location"), /*#__PURE__*/ React.createElement("option", { value: "coastal", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Coastal"), /*#__PURE__*/ React.createElement("option", { value: "inland", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Inland"), /*#__PURE__*/ React.createElement("option", { value: "riverside", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Riverside"), /*#__PURE__*/ React.createElement("option", { value: "mountainous", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Mountainous")); break; case 2: content = /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded font-roboto ${roads ? 'bg-green-400' : 'bg-gray-200'}`, onClick: handleChoiceSelection('roads'), disabled: roads, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Lay Down Roads"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded font-roboto ${residentialZone ? 'bg-green-400' : 'bg-gray-200'}`, onClick: handleChoiceSelection('residentialZone'), disabled: residentialZone, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Zone Residential Area"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded font-roboto ${commercialZone ? 'bg-green-400' : 'bg-gray-200'}`, onClick: handleChoiceSelection('commercialZone'), disabled: commercialZone, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Zone Commercial District"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded font-roboto ${industrialZone ? 'bg-green-400' : 'bg-gray-200'}`, onClick: handleChoiceSelection('industrialZone'), disabled: industrialZone, __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Zone Industrial Sector"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded font-roboto ${facilities ? 'bg-green-400' : 'bg-gray-200'}`, onClick: handleChoiceSelection('facilities'), disabled: facilities, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Construct Essential Facilities"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded font-roboto ${transportation ? 'bg-green-400' : 'bg-gray-200'}`, onClick: handleChoiceSelection('transportation'), disabled: transportation, __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Build Transportation Network")); break; case 3: content = /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, !challenges ? "Develop your city's budget, taxes, and policies." : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Rise to the challenge against natural disasters, traffic congestion, and crime!"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded font-roboto mt-4", onClick: nextStep, disabled: !(roads && residentialZone && commercialZone && industrialZone && facilities && transportation), __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "Manage City")); break; } const isFinalStep = step === 3; return /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center items-center bg-[#f4f4f4] w-screen h-screen", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 text-xs font-roboto", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-wallet text-green-500 mr-2", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }), " ", budget), isFinalStep ? null : /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded font-roboto", onClick: nextStep, disabled: !location || step === 2 && (!roads || !residentialZone || !commercialZone || !industrialZone || !facilities || !transportation), __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "Next"), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto mt-4", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, content))); }