"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { formatPrice } from "@/lib/currency" import { DollarSign, Percent, Home, Calendar } from "lucide-react" export default function MortgageCalculator() { const [price, setPrice] = useState("450000") const [down, setDown] = useState("20") const [rate, setRate] = useState("6.5") const [years, setYears] = useState("30") const [result, setResult] = useState<{ monthly: number; total: number; interest: number } | null>(null) function calculate() { const p = Number(price) * (1 - Number(down) / 100) const r = Number(rate) / 100 / 12 const n = Number(years) * 12 const monthly = (p * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1) if (isFinite(monthly)) { setResult({ monthly: Math.round(monthly), total: Math.round(monthly * n), interest: Math.round(monthly * n - p) }) } } return (

Mortgage Calculator

Estimate your monthly payment.

Loan Details

Home Price

setPrice(e.target.value)} className="pl-9" />

Down Payment ({down}%)

setDown(e.target.value)} className="pl-9" />

Interest Rate (%)

setRate(e.target.value)} className="pl-9" />

Loan Term (years)

setYears(e.target.value)} className="pl-9" />

Your Estimate {result ? ( <>

Monthly Payment

{formatPrice(result.monthly)}

principal + interest

Loan Amount{formatPrice(Number(price) * (1 - Number(down) / 100))}

Total Interest Paid{formatPrice(result.interest)}

Total Payment{formatPrice(result.total)}

) : (

Enter your loan details and click Calculate to see your estimated monthly payment.

)}

) }