From 060517f8c488915e13620fe046ad4e2c8bdac6ef Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Thu, 15 Jan 2026 14:28:41 +0000
Subject: [PATCH] Update components/roi-calculator.tsx

---
 components/roi-calculator.tsx | 160 ++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 components/roi-calculator.tsx

diff --git a/components/roi-calculator.tsx b/components/roi-calculator.tsx
new file mode 100644
index 0000000..1378571
--- /dev/null
+++ b/components/roi-calculator.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/badge";
+import { Share2, Save, Calculator, Info, CheckCircle2 } from "lucide-react";
+
+export function RoiCalculator() {
+  const [investment, setInvestment] = useState<number>(10000);
+  const [revenue, setRevenue] = useState<number>(15000);
+  const [roi, setRoi] = useState<number>(0);
+  const [profit, setProfit] = useState<number>(0);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    const p = revenue - investment;
+    const r = investment > 0 ? (p / investment) * 100 : 0;
+    setProfit(p);
+    setRoi(r);
+  }, [investment, revenue]);
+
+  const handleSave = () => {
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const handleShare = () => {
+    if (navigator.share) {
+      navigator.share({
+        title: 'ROI Calculation Result',
+        text: `My ROI is ${roi.toFixed(2)}% with a profit of $${profit.toLocaleString()}`,
+        url: window.location.href,
+      });
+    } else {
+      alert("Sharing not supported on this browser. Link copied to clipboard!");
+      navigator.clipboard.writeText(window.location.href);
+    }
+  };
+
+  return (
+    <section className="py-12 md:py-20 bg-neutral-50/50">
+      <Container>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <Badge className="mb-4">ROI Calculator</Badge>
+            <Heading>Calculate Your Return on Investment</Heading>
+            <Subheading className="mt-4">
+              Enter your investment and expected revenue to see your potential profit and ROI percentage instantly.
+            </Subheading>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Inputs */}
+            <Card className="border-neutral-200 shadow-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Calculator className="w-5 h-5 text-blue-600" />
+                  Input Details
+                </CardTitle>
+                <CardDescription>Enter your financial figures below</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="space-y-2">
+                  <Label htmlFor="investment">Total Investment ($)</Label>
+                  <Input
+                    id="investment"
+                    type="number"
+                    value={investment}
+                    onChange={(e) => setInvestment(Number(e.target.value))}
+                    placeholder="e.g. 10000"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="revenue">Total Revenue ($)</Label>
+                  <Input
+                    id="revenue"
+                    type="number"
+                    value={revenue}
+                    onChange={(e) => setRevenue(Number(e.target.value))}
+                    placeholder="e.g. 15000"
+                  />
+                </div>
+                <div className="flex gap-3 pt-4">
+                  <Button onClick={handleSave} variant="outline" className="flex-1 gap-2">
+                    {saved ? <CheckCircle2 className="w-4 h-4 text-green-500" /> : <Save className="w-4 h-4" />}
+                    {saved ? "Saved" : "Save Result"}
+                  </Button>
+                  <Button onClick={handleShare} variant="outline" className="flex-1 gap-2">
+                    <Share2 className="w-4 h-4" />
+                    Share
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Results */}
+            <Card className="border-blue-100 bg-blue-50/30 shadow-sm">
+              <CardHeader>
+                <CardTitle className="text-blue-900">Calculation Results</CardTitle>
+                <CardDescription>Your financial performance summary</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-8">
+                <div className="text-center p-6 bg-white rounded-xl border border-blue-100 shadow-sm">
+                  <p className="text-sm font-medium text-blue-600 uppercase tracking-wider">ROI Percentage</p>
+                  <p className={`text-5xl font-bold mt-2 ${roi >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                    {roi.toFixed(2)}%
+                  </p>
+                </div>
+                
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="p-4 bg-white rounded-lg border border-neutral-100">
+                    <p className="text-xs text-neutral-500 uppercase">Net Profit</p>
+                    <p className={`text-xl font-bold ${profit >= 0 ? 'text-neutral-900' : 'text-red-600'}`}>
+                      ${profit.toLocaleString()}
+                    </p>
+                  </div>
+                  <div className="p-4 bg-white rounded-lg border border-neutral-100">
+                    <p className="text-xs text-neutral-500 uppercase">Multiplier</p>
+                    <p className="text-xl font-bold text-neutral-900">
+                      {(revenue / (investment || 1)).toFixed(2)}x
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Explanation */}
+          <div className="mt-12">
+            <Card className="border-neutral-200">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <Info className="w-5 h-5 text-neutral-500" />
+                  How it works
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-neutral-600 space-y-4 text-sm leading-relaxed">
+                <p>
+                  Return on Investment (ROI) is a performance measure used to evaluate the efficiency or profitability of an investment. It measures the amount of return on an investment, relative to the investment’s cost.
+                </p>
+                <div className="bg-neutral-100 p-4 rounded-md font-mono text-neutral-800">
+                  ROI = ((Net Profit) / Cost of Investment) × 100
+                </div>
+                <p>
+                  In this calculator, <strong>Net Profit</strong> is calculated as <strong>Total Revenue - Total Investment</strong>. A positive ROI indicates that the investment has generated more money than it cost, while a negative ROI indicates a loss.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}