function MainComponent() { const [gpp, setGpp] = React.useState(null); const handleSubmit = (event)=>{ event.preventDefault(); const sd = parseFloat(event.target.sd.value); const z = parseFloat(event.target.z.value); const chlA = Math.pow(10, 2.33 - 0.94 * Math.log(sd)); const I0_toa = 1367; const I0 = I0_toa * Math.exp(-0.097 - 0.649 * Math.pow(chlA, 0.363)); const EXTW = 0.594 * Math.exp(-0.00594 * 480); const KC = 0.0378 * Math.pow(chlA, 0.6754); const EXT = EXTW + KC * chlA; const ZEU = 4.6 / EXT; const PMAX = 0.1 * I0 * ZEU; const ZMAX = 2 * sd; const K = 0.0902 + 0.6379 * EXTW; const RAD0 = I0 * (1 - 0.06) * (1 - 0.2) * (1 - 0.1); const RAD = RAD0 * Math.exp(-K * z); const PHAR = 0.43 * RAD; const GPP = (1 - ZEU / ZMAX) * PMAX * PHAR; setGpp(GPP.toFixed(2)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#f0f4f8] min-h-screen p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "GPP Calculator"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white p-8 rounded shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2 font-roboto", htmlFor: "sd", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Secchi disk depth (m)"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded", type: "number", id: "sd", name: "sd", step: "any", required: true, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2 font-roboto", htmlFor: "z", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Water depth (m)"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded", type: "number", id: "z", name: "z", step: "any", required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-bold py-2 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Calculate GPP")), gpp !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-[#d4edda] text-[#155724] p-4 rounded w-full max-w-lg font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Gross Primary Production (GPP):"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, gpp, " g m", /*#__PURE__*/ React.createElement("sup", { __source: { fileName: "", lineNumber: 67, columnNumber: 43 }, __self: this }, "-3")))); }