function MainComponent() { const [inputs, setInputs] = useState({ fixtures: '', wattage: '', hoursPerDay: '', daysPerWeek: '', rate: '0.34' }); const [results, setResults] = useState(null); const [error, setError] = useState(''); const calculateResults = useCallback(()=>{ if (!inputs.fixtures || !inputs.wattage || !inputs.hoursPerDay || !inputs.daysPerWeek || !inputs.rate) { setError('Please fill in all fields'); return; } const dailyKwh = inputs.fixtures * inputs.wattage * inputs.hoursPerDay / 1000; const weeklyKwh = dailyKwh * inputs.daysPerWeek; const monthlyKwh = weeklyKwh * 4.33; const annualKwh = weeklyKwh * 52; const dailyCost = dailyKwh * inputs.rate; const weeklyCost = weeklyKwh * inputs.rate; const monthlyCost = monthlyKwh * inputs.rate; const annualCost = annualKwh * inputs.rate; const co2Emissions = annualKwh * 0.233; // UK grid carbon intensity factor setResults({ dailyKwh, weeklyCost, monthlyCost, annualCost, co2Emissions }); setError(''); }, [ inputs ]); const resetCalculator = ()=>{ setInputs({ fixtures: '', wattage: '', hoursPerDay: '', daysPerWeek: '', rate: '0.34' }); setResults(null); setError(''); }; const handleInputChange = (e)=>{ const { name, value } = e.target; if (name === 'hoursPerDay' && value > 24) return; if (name === 'daysPerWeek' && value > 7) return; setInputs((prev)=>({ ...prev, [name]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "UK Commercial Lighting Cost Calculator"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 text-md", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Calculate your business lighting costs and environmental impact with our easy-to-use tool")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "Number of Light Fixtures", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-500", title: "Total number of light fixtures in your facility", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fixtures", value: inputs.fixtures, onChange: handleInputChange, className: "w-full p-2 border border-gray-200 rounded text-gray-900", min: "0", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, "Wattage per Fixture", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-500", title: "Power consumption per light fixture in watts", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "number", name: "wattage", value: inputs.wattage, onChange: handleInputChange, className: "w-full p-2 border border-gray-200 rounded text-gray-900", min: "0", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "Daily Hours of Operation", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-500", title: "Hours per day the lights are on (max 24)", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "number", name: "hoursPerDay", value: inputs.hoursPerDay, onChange: handleInputChange, className: "w-full p-2 border border-gray-200 rounded text-gray-900", min: "0", max: "24", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "Days per Week", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-500", title: "Number of days per week the lights are used (max 7)", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "number", name: "daysPerWeek", value: inputs.daysPerWeek, onChange: handleInputChange, className: "w-full p-2 border border-gray-200 rounded text-gray-900", min: "0", max: "7", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, "Electricity Rate (£/kWh)", /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle ml-2 text-gray-500", title: "Your electricity rate per kilowatt-hour", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rate", value: inputs.rate, onChange: handleInputChange, className: "w-full p-2 border border-gray-200 rounded text-gray-900", min: "0", step: "0.01", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 mt-8", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: calculateResults, className: "bg-gray-900 text-white px-6 py-2 rounded hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, "Calculate"), /*#__PURE__*/ React.createElement("button", { onClick: resetCalculator, className: "border border-gray-200 text-gray-900 dark:text-white px-6 py-2 rounded hover:bg-gray-900 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, "Reset")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-600 dark:text-red-400", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, error)), results && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-6", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-6", __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, "Daily Energy Usage"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, results.dailyKwh.toFixed(2), " kWh")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Weekly Cost"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, "£", results.weeklyCost.toFixed(2))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, "Monthly Cost"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "£", results.monthlyCost.toFixed(2))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, "Annual Cost"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "£", results.annualCost.toFixed(2))), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, "Annual CO2 Emissions"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, results.co2Emissions.toFixed(2), " kg CO2e")))), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 text-sm text-gray-600 dark:text-gray-400 text-center", __source: { fileName: "", lineNumber: 207, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, "Disclaimer: Results are estimates and actual costs may vary based on specific tariffs, usage patterns, and other factors.")))); }