function MainComponent() { const cloudOptions = [ 30, 60, 90, 120, 150, 180 ]; const onPremOptions = [ 30, 60, 90 ]; const [locations, setLocations] = React.useState(Array.from({ length: 5 }).fill({ cameras5MP: 0, retentionPeriod: 30, advancedOptions: false, cloudDynamicPeriod: 30, cloudHDPeriod: 30, onPremHDPeriod: 30 })); const retentionOptions = [ 30, 60, 90, 120 ]; const calculatePrice = (retentionPeriod, additionalRate = 0, cloudPeriod = 0)=>{ const basePrice = 125; const cloudPrice = Math.ceil(cloudPeriod / 30) * additionalRate; return basePrice + (retentionPeriod > 30 ? Math.ceil((retentionPeriod - 30) / 30) * 25 : 0) + cloudPrice; }; const handleCameraChange = (index, value)=>{ const newLocations = [ ...locations ]; newLocations[index].cameras5MP = parseInt(value, 10) || 0; setLocations(newLocations); }; const handleRetentionChange = (index, value)=>{ const newLocations = [ ...locations ]; newLocations[index].retentionPeriod = parseInt(value, 10) || 30; setLocations(newLocations); }; const handleCloudDynamicPeriodChange = (index, value)=>{ const newLocations = [ ...locations ]; newLocations[index].cloudDynamicPeriod = parseInt(value, 10) || 30; setLocations(newLocations); }; const handleCloudHDPeriodChange = (index, value)=>{ const newLocations = [ ...locations ]; newLocations[index].cloudHDPeriod = parseInt(value, 10) || 30; setLocations(newLocations); }; const handleOnPremHDPeriodChange = (index, value)=>{ const newLocations = [ ...locations ]; newLocations[index].onPremHDPeriod = parseInt(value, 10) || 30; setLocations(newLocations); }; const handleAdvancedOptionsToggle = (index)=>{ const newLocations = [ ...locations ]; newLocations[index].advancedOptions = !newLocations[index].advancedOptions; setLocations(newLocations); }; const totalCameras = locations.reduce((sum, location)=>sum + location.cameras5MP, 0); const totalAmountPerMonth = locations.reduce((sum, location)=>sum + calculatePrice(location.retentionPeriod, 0, 0) + calculatePrice(0, 50, location.cloudDynamicPeriod) + calculatePrice(0, 100, location.cloudHDPeriod) + calculatePrice(0, 100, location.onPremHDPeriod), 0); return /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Please input the number of cameras (5MP - HD): Qty", /*#__PURE__*/ React.createElement("input", { type: "number", name: "cameras5MPQty", min: "0", className: "ml-2 p-1 border rounded w-[80px]", value: locations[0].cameras5MP, onChange: (e)=>handleCameraChange(0, e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), locations.map((location, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-white shadow-md rounded mb-3", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold flex-1", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Please input required retention period:"), /*#__PURE__*/ React.createElement("select", { name: `location${index + 1}_retentionPeriod`, value: location.retentionPeriod, onChange: (e)=>handleRetentionChange(index, e.target.value), className: "ml-2 p-1 border rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, retentionOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, option, " days"))), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Price: $", calculatePrice(location.retentionPeriod))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAdvancedOptionsToggle(index), className: "flex items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex-1", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Advanced retention options"), /*#__PURE__*/ React.createElement("i", { className: `fa fa-chevron-${location.advancedOptions ? 'down' : 'right'} text-gray-600`, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })), location.advancedOptions && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 border-t", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Cloud Storage"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "Dynamic Cloud Storage", /*#__PURE__*/ React.createElement("select", { name: `location${index + 1}_cloudDynamicPeriod`, value: location.cloudDynamicPeriod, onChange: (e)=>handleCloudDynamicPeriodChange(index, e.target.value), className: "ml-2 p-1 border rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, cloudOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: `dyn-${option}`, value: option, __source: { fileName: "", lineNumber: 104, columnNumber: 23 }, __self: this }, option, " days"))), "Pricing: $", Math.ceil(location.cloudDynamicPeriod / 30) * 50, "/mo extra"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "Full HD Cloud Storage", /*#__PURE__*/ React.createElement("select", { name: `location${index + 1}_cloudHDPeriod`, value: location.cloudHDPeriod, onChange: (e)=>handleCloudHDPeriodChange(index, e.target.value), className: "ml-2 p-1 border rounded", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, cloudOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: `hd-${option}`, value: option, __source: { fileName: "", lineNumber: 118, columnNumber: 23 }, __self: this }, option, " days"))), "Pricing: $", Math.ceil(location.cloudHDPeriod / 30) * 100, "/mo extra")), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "On Prem Storage"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Full HD On Prem Storage", /*#__PURE__*/ React.createElement("select", { name: `location${index + 1}_onPremHDPeriod`, value: location.onPremHDPeriod, onChange: (e)=>handleOnPremHDPeriodChange(index, e.target.value), className: "ml-2 p-1 border rounded", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, onPremOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: `onprem-${option}`, value: option, __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, option, " days"))), "Pricing: $", Math.ceil(location.onPremHDPeriod / 30) * 100, "/mo extra")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-md rounded mt-4", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, "TOTAL cameras: ", totalCameras), /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, "Total Amount / Mo: $", totalAmountPerMonth)))); }