function MainComponent() { const initialFormData = { propertyAddress: "", propertyCondition: "good", notes: "", inspectorName: "", inspectionDate: "", renovationPriority: "low", rooms: { livingRoom: { workNeeded: "", doors: "" }, kitchen: { workNeeded: "", doors: "" }, bathroom: { workNeeded: "", doors: "" }, bedroom1: { workNeeded: "", doors: "" }, bedroom2: { workNeeded: "", doors: "" }, bedroom3: { workNeeded: "", doors: "" }, loft: { workNeeded: "", doors: "" }, hallStairs: { workNeeded: "", doors: "" }, exterior: { workNeeded: "", doors: "" } } }; const [formData, setFormData] = React.useState(initialFormData); const [currentRoom, setCurrentRoom] = React.useState(null); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const handleRoomChange = (roomName, e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, rooms: { ...prevData.rooms, [roomName]: { ...prevData.rooms[roomName], [name]: value } } })); }; const handleRoomClick = (roomName)=>{ setCurrentRoom(roomName); }; const handleSubmit = (e)=>{ e.preventDefault(); console.log("Survey Data:", formData); }; const roomButtons = [ "livingRoom", "kitchen", "bathroom", "bedroom1", "bedroom2", "bedroom3", "loft", "hallStairs", "exterior" ]; const roomHeader = currentRoom ? currentRoom.replace(/([A-Z])/g, " $1").toUpperCase() : ''; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-6", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, "Vacant Property Survey"), !currentRoom ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, roomButtons.map((room)=>/*#__PURE__*/ React.createElement("button", { key: room, className: "p-4 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition", onClick: ()=>handleRoomClick(room), __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, room.replace(/([A-Z])/g, " $1").toUpperCase()))) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded-lg shadow-md w-[400px]", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, roomHeader), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold mb-2", htmlFor: "inspector-name", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Inspector Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "inspectorName", id: "inspector-name", className: "w-full p-2 border border-gray-300 rounded", value: formData.inspectorName, onChange: handleChange, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold mb-2", htmlFor: "inspection-date", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Inspection Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "inspectionDate", id: "inspection-date", className: "w-full p-2 border border-gray-300 rounded", value: formData.inspectionDate, onChange: handleChange, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold mb-2", htmlFor: "property-address", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Property Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "propertyAddress", id: "property-address", className: "w-full p-2 border border-gray-300 rounded", value: formData.propertyAddress, onChange: handleChange, __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold mb-2", htmlFor: "property-condition", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Property Condition"), /*#__PURE__*/ React.createElement("select", { name: "propertyCondition", id: "property-condition", className: "w-full p-2 border border-gray-300 rounded", value: formData.propertyCondition, onChange: handleChange, __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "good", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "Good"), /*#__PURE__*/ React.createElement("option", { value: "fair", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "Fair"), /*#__PURE__*/ React.createElement("option", { value: "poor", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Poor"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold mb-2", htmlFor: `doors-${currentRoom}`, __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "Number of Doors"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "doors", id: `doors-${currentRoom}`, className: "w-full p-2 border border-gray-300 rounded", value: formData.rooms[currentRoom].doors, onChange: (e)=>handleRoomChange(currentRoom, e), __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-semibold mb-2", htmlFor: `work-needed-${currentRoom}`, __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, "Work Needed"), /*#__PURE__*/ React.createElement("textarea", { name: "workNeeded", id: `work-needed-${currentRoom}`, className: "w-full p-2 border border-gray-300 rounded", rows: "4", value: formData.rooms[currentRoom].workNeeded, onChange: (e)=>handleRoomChange(currentRoom, e), __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full mb-4 py-2 bg-green-500 text-white rounded-lg font-semibold hover:bg-green-600 transition", onClick: ()=>setCurrentRoom(null), __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, "Back to Rooms"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "Submit Survey"))); }