function MainComponent() { const [formData, setFormData] = useState({ coursesMoney: "", yearsWaited: "", selfHelpMoney: "", desiredIncome: "" }); const [results, setResults] = useState(null); const formatCurrency = (value)=>{ const numericValue = value.replace(/[^0-9]/g, ""); if (numericValue === "") return ""; return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(numericValue); }; const calculateCOI = ()=>{ const courseSpent = parseFloat(formData.coursesMoney.replace(/[^0-9.-]+/g, "")) || 0; const years = parseFloat(formData.yearsWaited) || 0; const selfHelpSpent = parseFloat(formData.selfHelpMoney.replace(/[^0-9.-]+/g, "")) || 0; const desiredYearlyIncome = parseFloat(formData.desiredIncome.replace(/[^0-9.-]+/g, "")) || 0; const financialCost = desiredYearlyIncome * years + courseSpent + selfHelpSpent; const emotionalCost = financialCost * 1.5; const totalCost = financialCost + emotionalCost; setResults({ financialCost, emotionalCost, totalCost }); }; const handleChange = (e)=>{ const { name, value } = e.target; if (name === "yearsWaited") { setFormData({ ...formData, [name]: value }); } else { setFormData({ ...formData, [name]: formatCurrency(value) }); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto p-6 bg-[#000000] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 font-roboto text-white", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "True Cost of Inaction Calculator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2 font-poppins", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Money you've spent on courses or programs you didn't finish or implement"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "coursesMoney", value: formData.coursesMoney, onChange: handleChange, className: "w-full p-2 bg-[#222222] border border-[#FF3366] text-white rounded focus:outline-none focus:ring-2 focus:ring-[#FF3366]", placeholder: "$0", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2 font-poppins", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, 'Years you\'ve you spent talking about doing "it" (building the business, getting in shape, etc.)'), /*#__PURE__*/ React.createElement("input", { type: "number", name: "yearsWaited", value: formData.yearsWaited, onChange: handleChange, className: "w-full p-2 bg-[#222222] border border-[#FF3366] text-white rounded focus:outline-none focus:ring-2 focus:ring-[#FF3366]", placeholder: "Enter years", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2 font-poppins", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Money you've spent on self help books or guides"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "selfHelpMoney", value: formData.selfHelpMoney, onChange: handleChange, className: "w-full p-2 bg-[#222222] border border-[#FF3366] text-white rounded focus:outline-none focus:ring-2 focus:ring-[#FF3366]", placeholder: "$0", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2 font-poppins", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Desired Income (Once you have met your goals)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "desiredIncome", value: formData.desiredIncome, onChange: handleChange, className: "w-full p-2 bg-[#222222] border border-[#FF3366] text-white rounded focus:outline-none focus:ring-2 focus:ring-[#FF3366]", placeholder: "$0", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: calculateCOI, className: "w-full bg-[#ff1a4d] text-white py-3 rounded hover:bg-[#e61744] transition duration-200 font-bold text-lg mt-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "Calculate True Cost"), results && /*#__PURE__*/ React.createElement("div", { className: "mt-6 space-y-4", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#000000] border-2 border-[#FF3366] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-white", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "Financial Cost of Inaction:", /*#__PURE__*/ React.createElement("span", { className: "block text-3xl font-bold text-[#FF3366] mt-2", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "$", results.financialCost.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#000000] border-2 border-[#FF3366] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-white", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "Estimated Cost of Lost Joy and Fulfillment:", /*#__PURE__*/ React.createElement("span", { className: "block text-3xl font-bold text-[#FF3366] mt-2", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, "$", results.emotionalCost.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#000000] border-2 border-[#FF3366] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-white", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "Total Cost of Inaction:", /*#__PURE__*/ React.createElement("span", { className: "block text-4xl font-bold text-[#FF3366] mt-2", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, "$", results.totalCost.toLocaleString())))))); }