function MainComponent() { const [formData, setFormData] = useState({ currentRent: "", propertyValue: "" }); const [renovations, setRenovations] = useState([ { id: 1, name: "", cost: "", rentIncrease: "" } ]); const handleInputChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleRenovationChange = (id, field, value)=>{ setRenovations(renovations.map((renovation)=>renovation.id === id ? { ...renovation, [field]: value } : renovation)); }; const addRenovation = ()=>{ const newId = Math.max(...renovations.map((r)=>r.id), 0) + 1; setRenovations([ ...renovations, { id: newId, name: "", cost: "", rentIncrease: "" } ]); }; const removeRenovation = (id)=>{ setRenovations(renovations.filter((renovation)=>renovation.id !== id)); }; const calculateResults = ()=>{ const totalCost = renovations.reduce((sum, renovation)=>sum + (parseFloat(renovation.cost) || 0), 0); const rentIncrease = renovations.reduce((sum, renovation)=>{ const currentRentValue = parseFloat(formData.currentRent) || 0; const increasePercentage = parseFloat(renovation.rentIncrease) || 0; return sum + currentRentValue * (increasePercentage / 100); }, 0); const monthlyProfit = rentIncrease; const breakEvenMonths = monthlyProfit ? Math.round(totalCost / monthlyProfit) : 0; return { totalCost, rentIncrease, monthlyProfit, breakEvenMonths }; }; const results = calculateResults(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, ` a[href="https://created.app/"] { display: none !important; } `), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Renovation ROI Calculator"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Current Property Details"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "currentRent", placeholder: "Current Monthly Rent", className: "border rounded p-2 w-full", value: formData.currentRent, onChange: handleInputChange, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "propertyValue", placeholder: "Current Property Value", className: "border rounded p-2 w-full", value: formData.propertyValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6 mb-8", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Renovation Options"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, renovations.map((renovation)=>/*#__PURE__*/ React.createElement("div", { key: renovation.id, className: "p-4 border rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Renovation Name", className: "border rounded p-2", value: renovation.name, onChange: (e)=>handleRenovationChange(renovation.id, "name", e.target.value), __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Estimated Cost ($)", className: "border rounded p-2", value: renovation.cost, onChange: (e)=>handleRenovationChange(renovation.id, "cost", e.target.value), __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Rent Increase (%)", className: "border rounded p-2 flex-grow", value: renovation.rentIncrease, onChange: (e)=>handleRenovationChange(renovation.id, "rentIncrease", e.target.value), __source: { fileName: "", lineNumber: 125, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeRenovation(renovation.id), className: "ml-2 px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 138, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 142, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("button", { onClick: addRenovation, className: "w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Add Renovation"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Total Renovation Cost"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-blue-600", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, "$", results.totalCost.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, "Monthly Rent Increase"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-green-600", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, "$", results.rentIncrease.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "Monthly Profit Increase"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-green-600", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "$", results.monthlyProfit.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg mb-2", __source: { fileName: "", lineNumber: 185, columnNumber: 15 }, __self: this }, "Months to Break Even"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-purple-600", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, results.breakEvenMonths, " months")))))); }