function MainComponent() { const [formData, setFormData] = React.useState({ currentAnnualTurnover: '', currentVisitors: '', projectedVisitorsYear1: '', averageProjectValue: '', conversionRate: '' }); const [results, setResults] = React.useState({ yearlyProjections: [] }); const [email, setEmail] = React.useState(''); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prevState)=>({ ...prevState, [name]: value })); }; const calculateRevenue = (e)=>{ e.preventDefault(); const { currentAnnualTurnover, projectedVisitorsYear1, averageProjectValue, conversionRate } = formData; const currentRevenue = parseFloat(currentAnnualTurnover); const projectValue = parseFloat(averageProjectValue); const convRate = parseFloat(conversionRate) / 100; const yearlyProjections = []; for(let year = 1; year <= 3; year++){ let visitors = parseInt(projectedVisitorsYear1); if (year > 1) { visitors = Math.round(visitors * 1.1); } const newProjects = visitors * 12 * convRate; const revenueGrowth = newProjects * projectValue; const projectedRevenue = year === 1 ? currentRevenue + revenueGrowth : yearlyProjections[year - 2].revenue + revenueGrowth; yearlyProjections.push({ year, visitors, revenue: projectedRevenue }); } setResults({ yearlyProjections }); }; const handleEmailSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen font-crimson-text", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 text-blue-600", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Website Traffic fuels Revenue Growth"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 md:p-8", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: calculateRevenue, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "currentAnnualTurnover", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "Current Annual Turnover (AUD)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "currentAnnualTurnover", name: "currentAnnualTurnover", value: formData.currentAnnualTurnover, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", placeholder: "e.g. 3000000", required: true, __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "currentVisitors", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "Current Monthly Website Visitors"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "currentVisitors", name: "currentVisitors", value: formData.currentVisitors, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", placeholder: "e.g. 100", required: true, __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "projectedVisitorsYear1", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "Monthly Visitors after SEO (Year 1)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "projectedVisitorsYear1", name: "projectedVisitorsYear1", value: formData.projectedVisitorsYear1, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", placeholder: "e.g. 300, 400, 500", required: true, __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "averageProjectValue", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, "Average Project Value (AUD)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "averageProjectValue", name: "averageProjectValue", value: formData.averageProjectValue, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", placeholder: "e.g. 1200000", required: true, __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "conversionRate", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, "Conversion Rate (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "conversionRate", name: "conversionRate", value: formData.conversionRate, onChange: handleInputChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", placeholder: "e.g. 0.1", step: "0.01", required: true, __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Calculate Revenue Growth"))), results.yearlyProjections.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 border-t pt-6", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, results.yearlyProjections.map((projection)=>/*#__PURE__*/ React.createElement("div", { key: projection.year, className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 107, columnNumber: 21 }, __self: this }, "Year ", projection.year, " Projected Turnover:"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-green-600", __source: { fileName: "", lineNumber: 108, columnNumber: 21 }, __self: this }, "AUD ", projection.revenue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-600", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, "Projected Monthly Visitors: ", projection.visitors))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "inline-block bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "Unlock Your Business Potential")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 border-t pt-6", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "Get Detailed Report"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleEmailSubmit, className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", placeholder: "Enter your email", value: email, onChange: (e)=>setEmail(e.target.value), className: "flex-grow rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50", required: true, __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "Get Report")))))); }