function MainComponent() { const [calculationResult, setCalculationResult] = React.useState(null); const handleFormSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const subscribers = parseInt(formData.get('subscribers'), 10); const mrr = parseFloat(formData.get('mrr')); const value = (mrr / subscribers).toFixed(2); setCalculationResult(`$${value} per subscriber`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 items-center justify-center min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6 text-[#121212]", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Newsletter Value Calculator"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2 font-roboto text-gray-600", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "Subscribers"), /*#__PURE__*/ React.createElement("input", { className: "border rounded-md bg-gray-100 appearance-none block w-full text-black font-roboto py-3 px-4 leading-tight focus:outline-none focus:bg-white", type: "number", placeholder: "e.g., 10000", name: "subscribers", min: "0", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2 font-roboto text-gray-600", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Topic"), /*#__PURE__*/ React.createElement("input", { className: "border rounded-md bg-gray-100 appearance-none block w-full text-black font-roboto py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "e.g., Technology", name: "topic", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2 font-roboto text-gray-600", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Industry"), /*#__PURE__*/ React.createElement("input", { className: "border rounded-md bg-gray-100 appearance-none block w-full text-black font-roboto py-3 px-4 leading-tight focus:outline-none focus:bg-white", type: "text", placeholder: "e.g., Digital Marketing", name: "industry", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-xs font-bold mb-2 font-roboto text-gray-600", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Monthly Recurring Revenue (MRR)"), /*#__PURE__*/ React.createElement("input", { className: "border rounded-md bg-gray-100 appearance-none block w-full text-black font-roboto py-3 px-4 leading-tight focus:outline-none focus:bg-white", type: "number", placeholder: "e.g., 2000", name: "mrr", min: "0", step: "0.01", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "border rounded-md bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 w-full transition ease-in-out duration-300 font-roboto", type: "submit", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Calculate")))), calculationResult && /*#__PURE__*/ React.createElement("p", { className: "calculation-result text-2xl mt-8 text-blue-800 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, calculationResult), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .calculation-result { animation: fadeIn 1s ease-in-out; } `)); }