marketing-calculator-agent-roi

"use client"

import { useMemo, useState } from "react"
import { Clock, DollarSign, TrendingUp, Zap } from "lucide-react"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function AgentROICalculator() {
  const [tasksPerMonth, setTasksPerMonth] = useState(1000)
  const [avgTimePerTask, setAvgTimePerTask] = useState(15)
  const [hourlyRate, setHourlyRate] = useState(50)
  const [automationRate, setAutomationRate] = useState(70)

  const calculations = useMemo(() => {
    const monthlyHours = (tasksPerMonth * avgTimePerTask) / 60
    const monthlyCost = monthlyHours * hourlyRate
    const automatedHours = monthlyHours * (automationRate / 100)
    const monthlySavings = automatedHours * hourlyRate
    const annualSavings = monthlySavings * 12

    const chartData = [
      {
        category: "Current",
        cost: monthlyCost,
      },
      {
        category: "With Agents",
        cost: monthlyCost - monthlySavings,
      },
    ]

    return {
      monthlyHours: Math.round(monthlyHours),
      monthlyCost: Math.round(monthlyCost),
      automatedHours: Math.round(automatedHours),
      monthlySavings: Math.round(monthlySavings),
      annualSavings: Math.round(annualSavings),
      chartData,
    }
  }, [tasksPerMonth, avgTimePerTask, hourlyRate, automationRate])

  return (
    <div className="mx-auto max-w-4xl px-4 py-8">
      <div className="mb-4">
        <Badge variant="secondary" className="mb-2 font-mono text-[10px]">
          ROI Calculator
        </Badge>
        <h1 className="mb-1 text-xl font-semibold tracking-tight text-balance">
          Agent ROI Calculator
        </h1>
        <p className="text-muted-foreground text-xs leading-relaxed">
          Quantify savings and automation impact
        </p>
      </div>

      <Card className="shadow-[0px_1px_0px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)]">
        <CardContent className="p-4">
          {/* Inputs Section */}
          <div className="border-border grid grid-cols-2 gap-2 border-b pb-4 md:grid-cols-4">
            <InputGroup>
              <InputGroupAddon align="inline-start">
                <Zap className="h-3 w-3" />
              </InputGroupAddon>
              <InputGroupInput
                type="number"
                value={tasksPerMonth}
                onChange={(e) => setTasksPerMonth(Number(e.target.value))}
                placeholder="Tasks/mo"
                className="h-7 text-xs"
              />
            </InputGroup>

            <InputGroup>
              <InputGroupAddon align="inline-start">
                <Clock className="h-3 w-3" />
              </InputGroupAddon>
              <InputGroupInput
                type="number"
                value={avgTimePerTask}
                onChange={(e) => setAvgTimePerTask(Number(e.target.value))}
                placeholder="Mins/task"
                className="h-7 text-xs"
              />
            </InputGroup>

            <InputGroup>
              <InputGroupAddon align="inline-start">
                <DollarSign className="h-3 w-3" />
              </InputGroupAddon>
              <InputGroupInput
                type="number"
                value={hourlyRate}
                onChange={(e) => setHourlyRate(Number(e.target.value))}
                placeholder="Rate/hr"
                className="h-7 text-xs"
              />
            </InputGroup>

            <InputGroup>
              <InputGroupAddon align="inline-start">
                <TrendingUp className="h-3 w-3" />
              </InputGroupAddon>
              <InputGroupInput
                type="number"
                value={automationRate}
                onChange={(e) => setAutomationRate(Number(e.target.value))}
                min="0"
                max="100"
                placeholder="Auto %"
                className="h-7 text-xs"
              />
            </InputGroup>
          </div>

          {/* Results Section */}
          <div className="border-border flex items-center justify-between border-b py-3">
            <div className="flex gap-6">
              <div className="space-y-0.5">
                <p className="text-muted-foreground text-[10px]">Monthly hrs</p>
                <p className="font-mono text-sm font-semibold tabular-nums">
                  {calculations.monthlyHours}
                </p>
              </div>
              <div className="space-y-0.5">
                <p className="text-muted-foreground text-[10px]">Auto hrs</p>
                <p className="font-mono text-sm font-semibold tabular-nums">
                  {calculations.automatedHours}
                </p>
              </div>
              <div className="space-y-0.5">
                <p className="text-muted-foreground text-[10px]">
                  Monthly save
                </p>
                <p className="font-mono text-sm font-semibold tabular-nums">
                  ${calculations.monthlySavings.toLocaleString()}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="text-right">
                <p className="text-muted-foreground text-[10px] font-medium">
                  Annual savings
                </p>
                <p className="font-mono text-xl font-semibold tabular-nums">
                  ${calculations.annualSavings.toLocaleString()}
                </p>
              </div>
              <Button className="h-7 gap-1.5 px-3 text-xs shadow-md shadow-zinc-950/20 transition-[filter] duration-200 hover:brightness-110 active:brightness-95">
                Request Demo
              </Button>
            </div>
          </div>

          {/* Chart Section */}
          <div className="pt-3">
            <p className="text-muted-foreground mb-2 text-[10px] font-medium">
              Cost Comparison
            </p>
            <ChartContainer
              config={{
                cost: {
                  label: "Monthly Cost",
                  color: "hsl(var(--foreground))",
                },
              }}
              className="h-[140px] w-full"
            >
              <BarChart
                data={calculations.chartData}
                margin={{ top: 5, right: 5, left: 5, bottom: 5 }}
              >
                <XAxis
                  dataKey="category"
                  className="text-[10px]"
                  tick={{ fill: "hsl(var(--muted-foreground))" }}
                />
                <YAxis
                  className="text-[10px]"
                  tick={{ fill: "hsl(var(--muted-foreground))" }}
                  tickFormatter={(value) => `$${value.toLocaleString()}`}
                />
                <ChartTooltip
                  content={<ChartTooltipContent />}
                  formatter={(value) => [
                    `$${Number(value).toLocaleString()}`,
                    "Monthly Cost",
                  ]}
                />
                <Bar
                  dataKey="cost"
                  fill="hsl(var(--foreground))"
                  radius={[4, 4, 0, 0]}
                />
              </BarChart>
            </ChartContainer>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}