function MainComponent() { const [Pmax, setPmax] = React.useState(""); const [Z, setZ] = React.useState(""); const [Ez, setEz] = React.useState(""); const [K, setK] = React.useState(""); const [alpha, setAlpha] = React.useState(""); const [DOph, setDOph] = React.useState(null); const [Latitude, setLatitude] = React.useState(""); const [Longitude, setLongitude] = React.useState(""); const [DayOfYear, setDayOfYear] = React.useState(""); const handleLatitudeChange = (event)=>setLatitude(event.target.value); const handleLongitudeChange = (event)=>setLongitude(event.target.value); const handleDayOfYearChange = (event)=>setDayOfYear(event.target.value); const handlePmaxChange = (event)=>setPmax(event.target.value); const handleZChange = (event)=>setZ(event.target.value); const handleEzChange = (event)=>setEz(event.target.value); const handleKChange = (event)=>setK(event.target.value); const handleAlphaChange = (event)=>setAlpha(event.target.value); const calculateDOph = (event)=>{ event.preventDefault(); const numLatitude = Number(Latitude); const numDayOfYear = Number(DayOfYear); const numPmax = Number(Pmax); const numZ = Number(Z); const numK = Number(K); const numAlpha = Number(alpha); const sinDelta = Math.sin(Math.toRadians(23.45 * Math.sin(360 / 365 * (284 - numDayOfYear)))); const cosTheta = Math.cos(Math.toRadians(numLatitude)) * Math.cos(Math.toRadians(sinDelta)) - Math.sin(Math.toRadians(numLatitude)) * Math.sin(Math.toRadians(sinDelta)); const Ed = 0.5 / cosTheta; const Ezero = Ed * Math.exp(-numK * numZ); const numerator = numPmax * Math.log(Ed + numAlpha * (numPmax ** 2 + Ed)); const denominator = numK * numZ * (Ed * Math.exp(-numK * numZ) + numAlpha * (numPmax ** 2 + Ed * Math.exp(-numK * numZ)) ** 2); const result = numerator / denominator; setDOph(result); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f9f9f9] p-5 max-w-[900px] mx-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#333] text-2xl mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Photosynthetic Dissolved Oxygen Production Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: calculateDOph, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "latitude", value: Latitude, onChange: handleLatitudeChange, placeholder: "Latitude", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "day_of_year", value: DayOfYear, onChange: handleDayOfYearChange, placeholder: "Day of the Year", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "P_max", value: Pmax, onChange: handlePmaxChange, placeholder: "Maximum of DO production (Pmax)", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "Z", value: Z, onChange: handleZChange, placeholder: "Depth of water (Z) in meters", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "Ez", value: Ez, onChange: handleEzChange, placeholder: "Light intensity at depth Z (Ez)", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "K", value: K, onChange: handleKChange, placeholder: "Light extinction coefficient (K)", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "alpha", value: alpha, onChange: handleAlphaChange, placeholder: "Initial slope of the DO production vs light curve (alpha)", className: "p-2 w-full border rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white font-semibold p-3 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Calculate DOph"), DOph !== null && /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto text-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 27 }, __self: this }, "Calculated DOph: ", DOph.toFixed(4), " g O2m^3 h^-1"))); }