export default function CalculatorPage({ branding, navigate, onContactSubmit }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [programsOpen, setProgramsOpen] = useState(false); const [activeTab, setActiveTab] = useState('payment'); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const t = setTimeout(() => setIsLoaded(true), 100); return () => clearTimeout(t); }, []); useEffect(() => { window.scrollTo(0, 0); }, []); const pc = branding.primaryColor || '#26324b'; const sc = branding.secondaryColor && branding.secondaryColor !== '#ffffff' ? branding.secondaryColor : '#4a5d7a'; const navLinks = [ { label: 'Home', path: '/' }, { label: 'About', path: '/about' }, { label: 'Our Team', path: '/team' }, { label: 'Calculator', path: '/calculator' }, { label: 'Contact', path: '/contact' } ]; const loanPrograms = [ { label: 'FHA Loans', path: '/fha-loans' }, { label: 'VA Loans', path: '/va-loans' }, { label: 'Conventional Loans', path: '/conventional-loans' }, { label: 'USDA Loans', path: '/usda-loans' }, { label: 'Jumbo Loans', path: '/jumbo-loans' }, { label: 'Down Payment Assistance', path: '/florida-down-payment-assistance' } ]; // PMI Notice Modal State const [showPmiNotice, setShowPmiNotice] = useState(false); // Monthly Payment Calculator State const [paymentInputs, setPaymentInputs] = useState({ homePrice: 300000, downPayment: 10500, downPaymentPercent: 3.5, loanTerm: 30, interestRate: 6.25, propertyTax: 2800, homeInsurance: 1800, hoa: 0, loanType: 'fha', vaUsage: 'first', pmiFactor: 0.55 }); // Affordability Calculator State const [affordInputs, setAffordInputs] = useState({ annualIncome: 100000, monthlyDebts: 1000, downPayment: 50000, interestRate: 6.5, loanTerm: 30, debtToIncome: 36 }); // Refinance Calculator State const [refiInputs, setRefiInputs] = useState({ currentBalance: 300000, currentRate: 7.5, newRate: 6.25, loanTerm: 30, closingCosts: 4000 }); // New Loan Amount state with manual override tracking const [newLoanAmount, setNewLoanAmount] = useState(304000); // currentBalance + closingCosts const [rollCostsIntoLoan, setRollCostsIntoLoan] = useState(true); const [isManualNewLoanAmount, setIsManualNewLoanAmount] = useState(false); // Update newLoanAmount when dependencies change (only if not manually overridden) useEffect(() => { if (!isManualNewLoanAmount) { const calculatedAmount = rollCostsIntoLoan ? refiInputs.currentBalance + refiInputs.closingCosts : refiInputs.currentBalance; setNewLoanAmount(calculatedAmount); } }, [refiInputs.currentBalance, refiInputs.closingCosts, rollCostsIntoLoan, isManualNewLoanAmount]); // Refinance visualization state const [refiTimePeriod, setRefiTimePeriod] = useState(120); // Default 10 years const [hoveredMonth, setHoveredMonth] = useState(null); // Email scenario state const [showEmailModal, setShowEmailModal] = useState(false); const [emailForm, setEmailForm] = useState({ name: '', email: '' }); const [emailStatus, setEmailStatus] = useState('idle'); // 'idle' | 'sending' | 'sent' | 'error' // Calculate PMI based on loan type and down payment const calculatePMI = () => { const homePrice = paymentInputs.homePrice || 0; const downPayment = paymentInputs.downPayment || 0; const downPaymentPercent = homePrice > 0 ? downPayment / homePrice : 0; const baseLoanAmount = Math.max(0, homePrice - downPayment); let pmiFactorAnnual = 0; switch (paymentInputs.loanType) { case 'fha': // FHA: 0.55% if <5% down, 0.50% if >=5% down pmiFactorAnnual = downPaymentPercent < 0.05 ? 0.0055 : 0.0050; break; case 'va': // VA: No PMI pmiFactorAnnual = 0; break; case 'usda': // USDA: 0.35% pmiFactorAnnual = 0.0035; break; case 'conventional': default: // Conventional: Use user-editable factor (default 0.55%) pmiFactorAnnual = paymentInputs.pmiFactor / 100; break; } const monthlyPMI = baseLoanAmount > 0 ? (baseLoanAmount * pmiFactorAnnual) / 12 : 0; return { pmiFactorAnnual, monthlyPMI }; }; // Calculate funding fee based on loan type and down payment const calculateFundingFee = () => { const homePrice = paymentInputs.homePrice || 0; const downPayment = paymentInputs.downPayment || 0; const downPaymentPercent = homePrice > 0 ? downPayment / homePrice : 0; const baseLoanAmount = Math.max(0, homePrice - downPayment); let fundingFeeRate = 0; switch (paymentInputs.loanType) { case 'fha': fundingFeeRate = 0.0175; // 1.75% break; case 'usda': fundingFeeRate = 0.01; // 1.00% break; case 'va': if (paymentInputs.vaUsage === 'first') { if (downPaymentPercent < 0.05) { fundingFeeRate = 0.0215; // 2.15% } else if (downPaymentPercent >= 0.10) { fundingFeeRate = 0.0125; // 1.25% } else { fundingFeeRate = 0.015; // 1.50% } } else { // Subsequent use if (downPaymentPercent < 0.05) { fundingFeeRate = 0.033; // 3.30% } else if (downPaymentPercent >= 0.10) { fundingFeeRate = 0.0125; // 1.25% } else { fundingFeeRate = 0.015; // 1.50% } } break; case 'conventional': default: fundingFeeRate = 0; break; } const fundingFeeAmount = baseLoanAmount * fundingFeeRate; const totalLoanAmount = baseLoanAmount + fundingFeeAmount; return { baseLoanAmount, fundingFeeRate, fundingFeeAmount, totalLoanAmount }; }; // Calculate monthly payment const calculateMonthlyPayment = () => { const { totalLoanAmount } = calculateFundingFee(); const { monthlyPMI } = calculatePMI(); const principal = totalLoanAmount; const monthlyRate = (paymentInputs.interestRate / 100) / 12; const numberOfPayments = paymentInputs.loanTerm * 12; const mortgagePayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)) / (Math.pow(1 + monthlyRate, numberOfPayments) - 1); // Split principal and interest for pie chart const monthlyRateOnly = (paymentInputs.interestRate / 100) / 12; const interestPayment = totalLoanAmount * monthlyRateOnly; const principalPayment = mortgagePayment - interestPayment; const monthlyTax = paymentInputs.propertyTax / 12; const monthlyInsurance = paymentInputs.homeInsurance / 12; return { principalAndInterest: mortgagePayment, principal: principalPayment, interest: interestPayment, tax: monthlyTax, insurance: monthlyInsurance, hoa: paymentInputs.hoa, pmi: monthlyPMI, total: mortgagePayment + monthlyTax + monthlyInsurance + paymentInputs.hoa + monthlyPMI }; }; // Calculate affordability const calculateAffordability = () => { const monthlyIncome = affordInputs.annualIncome / 12; const maxMonthlyPayment = (monthlyIncome * affordInputs.debtToIncome / 100) - affordInputs.monthlyDebts; const monthlyRate = (affordInputs.interestRate / 100) / 12; const numberOfPayments = affordInputs.loanTerm * 12; const loanAmount = maxMonthlyPayment * (Math.pow(1 + monthlyRate, numberOfPayments) - 1) / (monthlyRate * Math.pow(1 + monthlyRate, numberOfPayments)); return { maxHomePrice: loanAmount + affordInputs.downPayment, loanAmount: loanAmount, monthlyPayment: maxMonthlyPayment }; }; // Calculate refinance savings const calculateRefinance = () => { const currentMonthlyRate = (refiInputs.currentRate / 100) / 12; const newMonthlyRate = (refiInputs.newRate / 100) / 12; const numberOfPayments = refiInputs.loanTerm * 12; const currentPayment = refiInputs.currentBalance * (currentMonthlyRate * Math.pow(1 + currentMonthlyRate, numberOfPayments)) / (Math.pow(1 + currentMonthlyRate, numberOfPayments) - 1); // Use newLoanAmount instead of currentBalance for new payment calculation const newPayment = newLoanAmount * (newMonthlyRate * Math.pow(1 + newMonthlyRate, numberOfPayments)) / (Math.pow(1 + newMonthlyRate, numberOfPayments) - 1); const monthlySavings = currentPayment - newPayment; const totalSavings = (monthlySavings * numberOfPayments) - refiInputs.closingCosts; const breakEven = monthlySavings > 0 ? refiInputs.closingCosts / monthlySavings : Infinity; return { currentPayment, newPayment, monthlySavings, totalSavings, breakEven }; }; const paymentResult = calculateMonthlyPayment(); // Pie chart data const getPieData = () => { const data = [ { name: 'Principal & Interest', value: paymentResult.principalAndInterest, color: '#4f8a8b' }, { name: 'Property Tax', value: paymentResult.tax, color: '#d4a574' }, { name: 'Insurance', value: paymentResult.insurance, color: '#8fa878' }, ]; if (paymentResult.pmi > 0) { data.push({ name: 'PMI', value: paymentResult.pmi, color: '#c97b7b' }); } if (paymentResult.hoa > 0) { data.push({ name: 'HOA', value: paymentResult.hoa, color: '#9b8aa5' }); } return data.filter(d => d.value > 0); }; const pieData = getPieData(); const total = pieData.reduce((sum, d) => sum + d.value, 0) || 1; // Prevent division by zero // Generate SVG path for pie slice const getSlicePath = (startAngle, endAngle, innerRadius, outerRadius) => { const start = { x: Math.cos(startAngle) * outerRadius, y: Math.sin(startAngle) * outerRadius }; const end = { x: Math.cos(endAngle) * outerRadius, y: Math.sin(endAngle) * outerRadius }; const innerStart = { x: Math.cos(startAngle) * innerRadius, y: Math.sin(startAngle) * innerRadius }; const innerEnd = { x: Math.cos(endAngle) * innerRadius, y: Math.sin(endAngle) * innerRadius }; const largeArc = endAngle - startAngle > Math.PI ? 1 : 0; return [ `M ${start.x} ${start.y}`, `A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${end.x} ${end.y}`, `L ${innerEnd.x} ${innerEnd.y}`, `A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${innerStart.x} ${innerStart.y}`, 'Z' ].join(' '); }; const [hoveredSlice, setHoveredSlice] = useState(null); const fundingFeeResult = calculateFundingFee(); const pmiResult = calculatePMI(); const affordResult = calculateAffordability(); const refiResult = calculateRefinance(); // Currency formatter const formatCurrency = (num) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(num); const formatPercent = (num) => `${num.toFixed(2)}%`; // Build scenario email message based on active tab const buildScenarioMessage = () => { const date = new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); let message = `Mortgage Calculator Scenario - ${date}\n\n`; message += `Prepared by: ${branding.fullName} | ${branding.company}\n`; message += `Contact: ${branding.phone} | ${branding.email}\n`; message += `NMLS: ${branding.nmls}\n\n`; message += `═══════════════════════════════════════\n\n`; if (activeTab === 'payment') { const payment = calculateMonthlyPayment(); const funding = calculateFundingFee(); const pmi = calculatePMI(); message += `📊 MONTHLY PAYMENT CALCULATION\n\n`; message += `🏠 Home Price: ${formatCurrency(paymentInputs.homePrice)}\n`; message += `💰 Down Payment: ${formatCurrency(paymentInputs.downPayment)} (${paymentInputs.downPaymentPercent}%)\n`; message += `📋 Loan Type: ${paymentInputs.loanType.toUpperCase()}\n`; message += `⏱️ Loan Term: ${paymentInputs.loanTerm} years\n`; message += `📈 Interest Rate: ${paymentInputs.interestRate}%\n\n`; message += `LOAN DETAILS:\n`; message += ` • Base Loan Amount: ${formatCurrency(funding.baseLoanAmount)}\n`; message += ` • Funding Fee (${(funding.fundingFeeRate * 100).toFixed(2)}%): ${formatCurrency(funding.fundingFeeAmount)}\n`; message += ` • Total Loan Amount: ${formatCurrency(funding.totalLoanAmount)}\n\n`; message += `📅 ESTIMATED MONTHLY PAYMENT: ${formatCurrency(payment.total)}\n\n`; message += `Payment Breakdown:\n`; message += ` • Principal & Interest: ${formatCurrency(payment.principalAndInterest)}\n`; message += ` • Property Tax: ${formatCurrency(payment.tax)}\n`; message += ` • Home Insurance: ${formatCurrency(payment.insurance)}\n`; if (payment.pmi > 0) message += ` • PMI: ${formatCurrency(payment.pmi)}\n`; if (payment.hoa > 0) message += ` • HOA Dues: ${formatCurrency(payment.hoa)}\n`; } else if (activeTab === 'afford') { const afford = calculateAffordability(); message += `📊 AFFORDABILITY CALCULATION\n\n`; message += `💵 Annual Income: ${formatCurrency(affordInputs.annualIncome)}\n`; message += `💳 Monthly Debts: ${formatCurrency(affordInputs.monthlyDebts)}\n`; message += `💰 Down Payment: ${formatCurrency(affordInputs.downPayment)}\n`; message += `📈 Interest Rate: ${affordInputs.interestRate}%\n`; message += `⏱️ Loan Term: ${affordInputs.loanTerm} years\n`; message += `📊 Debt-to-Income Ratio: ${affordInputs.debtToIncome}%\n\n`; message += `🏠 MAXIMUM HOME PRICE: ${formatCurrency(afford.maxHomePrice)}\n\n`; message += `Results:\n`; message += ` • Loan Amount: ${formatCurrency(afford.loanAmount)}\n`; message += ` • Max Monthly Payment: ${formatCurrency(afford.monthlyPayment)}\n`; } else if (activeTab === 'refinance') { const refi = calculateRefinance(); message += `📊 REFINANCE SAVINGS CALCULATION\n\n`; message += `📋 New Loan Term: ${refiInputs.loanTerm} years\n`; message += `💵 Current Loan Balance: ${formatCurrency(refiInputs.currentBalance)}\n`; message += `💵 New Loan Amount: ${formatCurrency(newLoanAmount)}\n`; message += `📉 Current Rate: ${refiInputs.currentRate}%\n`; message += `📈 New Rate: ${refiInputs.newRate}%\n`; message += `💳 Closing Costs: ${formatCurrency(refiInputs.closingCosts)}\n\n`; message += `💰 MONTHLY SAVINGS: ${formatCurrency(refi.monthlySavings)}\n\n`; message += `Payment Comparison:\n`; message += ` • Current Payment: ${formatCurrency(refi.currentPayment)}\n`; message += ` • New Payment: ${formatCurrency(refi.newPayment)}\n\n`; message += `⏱️ Break-Even Point: ${refi.monthlySavings > 0 ? `${refi.breakEven.toFixed(1)} months` : 'N/A - No savings'}\n`; message += `💵 Total Savings (over loan term): ${formatCurrency(refi.totalSavings)}\n`; } message += `\n═══════════════════════════════════════\n\n`; message += `This is an estimate for informational purposes only. `; message += `Actual loan terms and payments may vary based on credit profile, `; message += `property approval, and underwriting requirements.\n\n`; message += `Ready to move forward? Contact me today:\n`; message += `📞 ${branding.phone}\n`; message += `✉️ ${branding.email}\n`; message += `🌐 ${branding.socialLinks?.website || 'www.buckmortgages.com'}\n`; if (branding.meetingLink) { message += `📅 Schedule a call: ${branding.meetingLink}\n`; } return message; }; const handleSendScenario = async (e) => { e.preventDefault(); if (!emailForm.name.trim() || !emailForm.email.trim()) return; setEmailStatus('sending'); try { await onContactSubmit({ name: emailForm.name, email: emailForm.email, phone: '', message: buildScenarioMessage(), }); setEmailStatus('sent'); setEmailForm({ name: '', email: '' }); setTimeout(() => { setShowEmailModal(false); setEmailStatus('idle'); }, 2000); } catch { setEmailStatus('error'); } }; return (

{ e.target.style.position = 'fixed'; e.target.style.width = 'auto'; e.target.style.height = 'auto'; e.target.style.padding = '8px 16px'; e.target.style.margin = '0'; e.target.style.overflow = 'visible'; e.target.style.clip = 'auto'; e.target.style.whiteSpace = 'normal'; }} onBlur={(e) => { e.target.style.position = 'absolute'; e.target.style.width = '1px'; e.target.style.height = '1px'; e.target.style.padding = '0'; e.target.style.margin = '-1px'; e.target.style.overflow = 'hidden'; e.target.style.clip = 'rect(0,0,0,0)'; e.target.style.whiteSpace = 'nowrap'; }}>Skip to main content {/* Navigation */}

navigate('/')}>{branding.logoUrl ?

: {branding.company || branding.fullName || 'Buck Mortgage'}}

setProgramsOpen(true)} onMouseLeave={() => setProgramsOpen(false)}> {programsOpen && }

{mobileMenuOpen &&

{navLinks.map((l) => )}

LOAN PROGRAMS

{loanPrograms.map((p) => )}

}

{/* PMI Notice Modal */} {showPmiNotice && (

ATTENTION | PMI NOTICE

Conventional loan PMI is based on down payment and credit score. Please consult your Mortgage Advisor for the PMI factor.

)} {/* Email Scenario Modal */} {showEmailModal && (

setShowEmailModal(false)}>

e.stopPropagation()}> {emailStatus === 'sent' ? (

Sent!

Your scenario has been emailed to {emailForm.email}

) : ( <>

Send Scenario to Myself

Enter your email and I'll send you a detailed summary of this {activeTab === 'payment' ? 'monthly payment' : activeTab === 'afford' ? 'affordability' : 'refinance'} calculation.

Your Name setEmailForm({ ...emailForm, name: e.target.value })} className="w-full px-4 py-3 rounded-xl border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb' }} placeholder="John Smith" />

Email Address setEmailForm({ ...emailForm, email: e.target.value })} className="w-full px-4 py-3 rounded-xl border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb' }} placeholder="john@example.com" />

{emailStatus === 'error' && (

Something went wrong. Please try again.

)}

)} {/* Hero Section */}

{branding.logoUrl && (

)}

Mortgage Calculator

Estimate your monthly payments, explore affordability, and see how much you could save by refinancing.

{/* Calculator Tabs */}

{[ { id: 'payment', label: 'Monthly Payment', icon: 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z' }, { id: 'refinance', label: 'Refinance Savings', icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' } ].map((tab) => ( ))}

{/* Calculator Content */} {/* Monthly Payment Calculator */} {activeTab === 'payment' && (

Loan Details

Home Price

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setPaymentInputs({ ...paymentInputs, homePrice: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setPaymentInputs({ ...paymentInputs, homePrice: Number(e.target.value) })} className="range-slider" />

Loan Type

{paymentInputs.loanType === 'va' && (

VA Usage

)}

Base Loan Amount

{formatCurrency(fundingFeeResult.baseLoanAmount)}

Total Loan Amount

{formatCurrency(fundingFeeResult.totalLoanAmount)}

Down Payment

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); const newDownPayment = Math.min(Number(rawValue), paymentInputs.homePrice); const newPercent = paymentInputs.homePrice > 0 ? (newDownPayment / paymentInputs.homePrice) * 100 : 0; setPaymentInputs({ ...paymentInputs, downPayment: newDownPayment, downPaymentPercent: Math.round(newPercent * 100) / 100 }); }} className="w-full pl-7 pr-4 py-3 rounded-xl border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb' }} />

Down Payment % { const newPercent = Number(e.target.value); const newDownPayment = Math.min((paymentInputs.homePrice * newPercent) / 100, paymentInputs.homePrice); setPaymentInputs({ ...paymentInputs, downPayment: Math.round(newDownPayment), downPaymentPercent: newPercent }); }} className="w-full px-4 py-3 rounded-xl border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb' }} />

Interest Rate

setPaymentInputs({ ...paymentInputs, interestRate: Number(e.target.value) })} className="w-20 px-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} /> %

setPaymentInputs({ ...paymentInputs, interestRate: Number(e.target.value) })} className="range-slider" />

Loan Term

Property Tax (Annual)

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setPaymentInputs({ ...paymentInputs, propertyTax: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setPaymentInputs({ ...paymentInputs, propertyTax: Number(e.target.value) })} className="range-slider" />

Home Insurance (Annual)

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setPaymentInputs({ ...paymentInputs, homeInsurance: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setPaymentInputs({ ...paymentInputs, homeInsurance: Number(e.target.value) })} className="range-slider" />

Private Mortgage Insurance (PMI) {paymentInputs.loanType !== 'conventional' && ( Auto )} {paymentInputs.loanType === 'conventional' ? (

Monthly PMI:

$ { const newMonthlyPMI = Number(e.target.value); const baseLoanAmount = Math.max(0, paymentInputs.homePrice - paymentInputs.downPayment); // Calculate new PMI factor from monthly PMI: factor = (monthlyPMI * 12) / baseLoanAmount * 100 const newPmiFactor = baseLoanAmount > 0 ? (newMonthlyPMI * 12 / baseLoanAmount) * 100 : 0; setPaymentInputs({ ...paymentInputs, pmiFactor: Math.min(Math.max(newPmiFactor, 0), 2) }); }} className="w-24 pl-5 pr-2 py-1 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

) : ( Monthly PMI: {formatCurrency(pmiResult.monthlyPMI)} )}

{paymentInputs.loanType === 'conventional' && (

PMI Factor

setPaymentInputs({ ...paymentInputs, pmiFactor: Number(e.target.value) })} className="w-16 px-2 py-1 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} /> %

setPaymentInputs({ ...paymentInputs, pmiFactor: Number(e.target.value) })} className="range-slider" />

)}

HOA Dues (Monthly)

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setPaymentInputs({ ...paymentInputs, hoa: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setPaymentInputs({ ...paymentInputs, hoa: Number(e.target.value) })} className="range-slider" />

Estimated Monthly Housing Payment

{/* Pie Chart Container */}

{/* SVG Pie Chart */}

{/* Center Circle with Total */}

Total {formatCurrency(paymentResult.total)}

{/* Legend / Breakdown */}

{hoveredSlice !== null ? ( // Show hovered slice details

{pieData[hoveredSlice].name}

{formatCurrency(pieData[hoveredSlice].value)}

{((pieData[hoveredSlice].value / total) * 100).toFixed(1)}% of payment

{pieData[hoveredSlice].name === 'Principal & Interest' && 'Your core mortgage payment — principal builds equity, interest is the cost of borrowing'} {pieData[hoveredSlice].name === 'Property Tax' && 'Annual taxes paid to local government'} {pieData[hoveredSlice].name === 'Insurance' && 'Protection for your home investment'} {pieData[hoveredSlice].name === 'PMI' && 'Private mortgage insurance required with less than 20% down'} {pieData[hoveredSlice].name === 'HOA' && 'Homeowners association monthly dues'}

) : ( // Show all items

{pieData.map((slice, index) => (

setHoveredSlice(index)} onMouseLeave={() => setHoveredSlice(null)} >

{slice.name}

{formatCurrency(slice.value)}

))}

)}

Hover over chart segments to see detailed breakdown

About {paymentInputs.loanType === 'conventional' ? 'Conventional' : paymentInputs.loanType === 'fha' ? 'FHA' : paymentInputs.loanType === 'va' ? 'VA' : 'USDA'} Loans

{paymentInputs.loanType === 'conventional' && (

Conventional loans are standard mortgage loans not backed by a government agency. They are typically best for borrowers with strong credit, stable income, and moderate to larger down payments.

Best For

Buyers with good to excellent credit
First Time Homebuyers putting less than 5% down
Those who want to avoid PMI if putting more than 20% down

Funding Fee

Conventional loans do not have an upfront government funding fee. The total loan amount equals the base loan amount unless mortgage insurance is required.

)} {paymentInputs.loanType === 'fha' && (

FHA loans are government-backed loans designed to help buyers with lower credit scores or smaller down payments qualify for home financing.

Best For

First-time homebuyers
Buyers with lower credit scores
Borrowers putting as little as 3.5% down

FHA Funding Fee (Upfront Mortgage Insurance Premium)

FHA loans include an upfront mortgage insurance premium of 1.75% of the base loan amount. This fee helps insure the lender in case of default and allows FHA to offer more flexible qualification guidelines.

Because this 1.75% fee is typically financed into the loan rather than paid out of pocket, the final loan amount shown at closing is higher than the base loan amount.

)} {paymentInputs.loanType === 'va' && (

VA loans are government-backed loans available to eligible veterans, active-duty service members, and certain surviving spouses.

Best For

Eligible military borrowers
Buyers wanting 0% down
Borrowers looking to avoid monthly mortgage insurance

VA Funding Fee

VA loans include a one-time funding fee. The percentage depends on down payment amount and whether it is {paymentInputs.vaUsage === 'first' ? 'first use' : 'subsequent use'}.

The funding fee helps keep the VA loan program self-sustaining and reduces cost to taxpayers.

Most borrowers choose to finance the funding fee into the loan. When this happens, the total loan amount becomes higher than the base loan amount.

)} {paymentInputs.loanType === 'usda' && (

USDA loans are government-backed loans designed to promote homeownership in eligible rural and suburban areas.

Best For

Buyers purchasing in USDA-eligible areas
Moderate-income households
Borrowers seeking 0% down options

USDA Funding Fee

USDA loans include a 1% upfront guarantee fee. This fee allows the USDA program to guarantee the loan and support affordable financing for eligible buyers.

Like FHA and VA loans, this fee is typically financed into the loan, which makes the final loan amount higher than the base loan amount.

)}

)} {/* Affordability Calculator */} {activeTab === 'afford' && (

Income & Debt

Annual Gross Household Income

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setAffordInputs({ ...affordInputs, annualIncome: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setAffordInputs({ ...affordInputs, annualIncome: Number(e.target.value) })} className="range-slider" />

Monthly Debts (Borrowed money including Mortgage Loans, Installment Loans, Student Loans, Credit Card minimum payments)

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setAffordInputs({ ...affordInputs, monthlyDebts: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setAffordInputs({ ...affordInputs, monthlyDebts: Number(e.target.value) })} className="range-slider" />

Down Payment

{affordResult.maxHomePrice > 0 ? Math.round((affordInputs.downPayment / affordResult.maxHomePrice) * 100) : 0}%

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setAffordInputs({ ...affordInputs, downPayment: Number(rawValue) }); }} className="w-28 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setAffordInputs({ ...affordInputs, downPayment: Number(e.target.value) })} className="range-slider" />

Interest Rate

setAffordInputs({ ...affordInputs, interestRate: Number(e.target.value) })} className="w-20 px-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} /> %

setAffordInputs({ ...affordInputs, interestRate: Number(e.target.value) })} className="range-slider" />

Debt-to-Income Ratio

setAffordInputs({ ...affordInputs, debtToIncome: Number(e.target.value) })} className="w-20 px-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} /> %

setAffordInputs({ ...affordInputs, debtToIncome: Number(e.target.value) })} className="range-slider" />

Maximum Home Price

{formatCurrency(affordResult.maxHomePrice)}

Loan Amount{formatCurrency(affordResult.loanAmount)}

Max Monthly Payment{formatCurrency(affordResult.monthlyPayment)}

Down Payment{formatCurrency(affordInputs.downPayment)}

Affordability Guidelines

28%

Conservative

Housing costs ≤ 28% of gross income

36%

Moderate

Total debt ≤ 36% of gross income

43%

Maximum

Maximum DTI for most loan programs

)} {/* Refinance Calculator */} {activeTab === 'refinance' && (

Current vs. New Loan

{/* New Loan Term - Moved to top */}

New Loan Term

Current Loan Balance

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setRefiInputs({ ...refiInputs, currentBalance: Number(rawValue) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setRefiInputs({ ...refiInputs, currentBalance: Number(e.target.value) })} className="range-slider" />

{/* New Loan Amount */}

New Loan Amount

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); const newValue = Math.max(0, Number(rawValue)); setNewLoanAmount(newValue); setIsManualNewLoanAmount(true); }} onBlur={() => { if (newLoanAmount < 1000) { setNewLoanAmount(rollCostsIntoLoan ? refiInputs.currentBalance + refiInputs.closingCosts : refiInputs.currentBalance); setIsManualNewLoanAmount(false); } }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: isManualNewLoanAmount ? pc : '#e5e7eb', color: pc }} />

{ setNewLoanAmount(Number(e.target.value)); setIsManualNewLoanAmount(true); }} className="range-slider" /> { setRollCostsIntoLoan(e.target.checked); setIsManualNewLoanAmount(false); }} className="w-4 h-4 rounded border-gray-300 focus:ring-2" style={{ accentColor: pc }} /> Roll Closing Costs Into Loan {isManualNewLoanAmount && ( )}

Current Interest Rate

setRefiInputs({ ...refiInputs, currentRate: Number(e.target.value) })} className="w-20 px-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} /> %

setRefiInputs({ ...refiInputs, currentRate: Number(e.target.value) })} className="range-slider" />

New Interest Rate

setRefiInputs({ ...refiInputs, newRate: Number(e.target.value) })} className="w-20 px-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} /> %

setRefiInputs({ ...refiInputs, newRate: Number(e.target.value) })} className="range-slider" />

Closing Costs

$ { const rawValue = e.target.value.replace(/[^0-9]/g, ''); setRefiInputs({ ...refiInputs, closingCosts: Math.min(Number(rawValue), 20000) }); }} className="w-32 pl-5 pr-3 py-1.5 text-sm font-bold text-right rounded-lg border-2 focus:outline-none transition-colors" style={{ borderColor: '#e5e7eb', color: pc }} />

setRefiInputs({ ...refiInputs, closingCosts: Number(e.target.value) })} className="range-slider" />

{/* Dynamic Refinance Savings Visualization */}

{/* Monthly Savings Highlight */}

Monthly Savings

0 ? '#86efac' : '#fca5a5', textShadow: '0 2px 10px rgba(0,0,0,0.2)' }}> {formatCurrency(refiResult.monthlySavings)}

Current P&I Payment {formatCurrency(refiResult.currentPayment)}

New P&I Payment {formatCurrency(refiResult.newPayment)}

{/* Key Metrics Grid */}

Closing Costs {formatCurrency(refiInputs.closingCosts)}

Break-Even Point {refiResult.monthlySavings <= 0 ? 'N/A' : `${refiResult.breakEven.toFixed(1)} mo`}

{/* Time Period Toggle */}

{[ { value: 60, label: '5 Years' }, { value: 120, label: '10 Years' }, { value: refiInputs.loanTerm * 12, label: 'Full Term' } ].map((period) => ( ))}

{/* Cumulative Savings Timeline */}

Cumulative Savings Over Time {refiResult.monthlySavings <= 0 ? 'No savings with current rates' : `Total: ${formatCurrency(refiResult.monthlySavings * refiTimePeriod - refiInputs.closingCosts)}` }

{refiResult.monthlySavings > 0 ? ( <> {/* Timeline Bar */}

{/* Break-even marker line */} {refiResult.breakEven < refiTimePeriod && (

Break Even

)} {/* Pre break-even zone (red/negative) */} {refiResult.breakEven > 0 && (

Building Equity

)} {/* Post break-even zone (green/positive) */} {refiResult.breakEven < refiTimePeriod && (

Net Savings

)} {/* Hover indicator */} {hoveredMonth !== null && (

Month {hoveredMonth}: {formatCurrency(refiResult.monthlySavings * hoveredMonth - refiInputs.closingCosts)}

)}

{/* Interactive timeline slider */}

setHoveredMonth(Number(e.target.value))} onMouseUp={() => setHoveredMonth(null)} className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer" style={{ background: `linear-gradient(to right, rgba(248, 113, 113, 0.6) 0%, rgba(248, 113, 113, 0.6) ${(refiResult.breakEven / refiTimePeriod) * 100}%, rgba(74, 222, 128, 0.6) ${(refiResult.breakEven / refiTimePeriod) * 100}%, rgba(74, 222, 128, 0.6) 100%)` }} />

Month 0 Year {Math.floor(refiTimePeriod / 12 / 2)} Year {Math.floor(refiTimePeriod / 12)}

) : (

Adjust rates to see savings potential

)}

{/* Summary Box */}

{refiResult.monthlySavings > 0 ? ( <>

You break even in {refiResult.breakEven.toFixed(1)} months.

After that, you save approximately {formatCurrency(refiResult.monthlySavings)} per month. {refiResult.breakEven <= 30 && ' This is an excellent timeframe for refinancing.'} {refiResult.breakEven > 30 && refiResult.breakEven <= 36 && ' This is within the typical target range.'} {refiResult.breakEven > 36 && ' Consider if you plan to stay in the home long-term.'}

) : (

Based on current inputs, refinancing would not provide monthly savings. Consider waiting for lower rates or if you have other goals like eliminating PMI.

)}

Is Refinancing Right for You?

Current rate is at least 0.5% higher than new rate

You plan to stay in your home for 3+ years

Your credit score has improved since purchase

You want to switch from ARM to fixed rate

You want to eliminate PMI

)}

{/* Refinance Break Even Analysis Section - Only visible on refinance tab */} {activeTab === 'refinance' && (

Refinance Break Even Analysis

{/* What Is a Break Even Point? */}

What Is a Break Even Point?

The break even point is the number of months it takes for the monthly savings from refinancing to recover the total closing costs paid for the refinance.

{/* Formula */}

Break Even Calculation:

Break Even Months = Total Refinance Closing Costs ÷ Monthly Payment Savings

Monthly Savings = Current total monthly payment minus New total monthly payment

Closing Costs = Net Closing Costs (excludes escrows due to escrow credits or refunds)

{/* Current Calculation Display */}

Monthly Savings

{formatCurrency(refiResult.monthlySavings)}

Net Closing Costs

{formatCurrency(refiInputs.closingCosts)}

Break Even Point

{refiResult.monthlySavings <= 0 ? 'No savings' : `${refiResult.breakEven.toFixed(1)} months`}

{/* Guidance Language */}

When Should You Consider Refinancing?

We typically suggest refinancing when one or more of the following is true:

{/* Break Even < 36 months */}

0 ? '#dcfce7' : '#f3f4f6' }}>

Break even point is less than 36 months

If you plan to keep the home beyond the break even timeframe, you will likely realize meaningful long-term savings.

{refiResult.breakEven <= 36 && refiResult.monthlySavings > 0 && ( Within typical refinance target range )}

{/* Eliminating PMI */}

You are eliminating PMI

Removing Private Mortgage Insurance can create immediate monthly savings and improve long-term cost efficiency, even if the break-even period is longer.

{/* ARM to Fixed */}

Converting from ARM to fixed rate

Moving from an adjustable rate to a fixed rate increases long-term payment stability and protects against future rate increases, which can justify refinancing beyond strict break-even math.

{/* No Financial Break Even Warning */} {refiResult.monthlySavings <= 0 && (

No Financial Break Even

Based on the current inputs, the new payment equals or exceeds your current payment. Refinancing may not provide monthly savings in this scenario.

)}

)} {/* ── Optimal Blue Rate Widget + Get my Rate CTA ── */} {(() => { const [rateEmail, setRateEmail] = useState(''); const [rateStatus, setRateStatus] = useState('idle'); const [rateError, setRateError] = useState(''); const handleRateSubmit = useCallback(async (e) => { e.preventDefault(); setRateError(''); if (!rateEmail.trim()) { setRateError('Please enter your email.'); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rateEmail.trim())) { setRateError('Please enter a valid email.'); return; } setRateStatus('sending'); try { const res = await fetch('/api/website-builder/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ websiteId: '50259813-5ba2-41b4-b4a6-02c76b56f1d7', name: 'Rate Widget Lead', email: rateEmail.trim(), message: 'This visitor requested their personalized rate via the Rate Widget.', }), }); if (!res.ok) throw new Error('Failed'); setRateStatus('sent'); } catch { setRateError('Something went wrong. Please try again.'); setRateStatus('idle'); } }, [rateEmail]); return (

Current Mortgage Rates

Live market data powered by Optimal Blue. See how rates are trending and get your personalized quote.

Buck Mortgage Solutions