import React, { useState, useMemo } from ‘react’;
import { motion, AnimatePresence } from ‘motion/react’;
import {
Zap,
Car,
Gauge,
Calendar,
ShieldCheck,
DollarSign,
TrendingDown,
Info,
ChevronRight,
RefreshCw,
Share2
} from ‘lucide-react’;

type BodyState = ‘Excellent’ | ‘Good’ | ‘Fair’ | ‘Poor’;

interface CalculatorState {
newPrice: number;
age: number;
mileage: number;
bodyState: BodyState;
}

export default function App() {
const [state, setState] = useState({
newPrice: 35000,
age: 3,
mileage: 30000,
bodyState: ‘Good’
});

const calculation = useMemo(() => {
const { newPrice, age, mileage, bodyState } = state;

// 1. Age Depreciation
// 15% first year, 10% each year after
let ageFactor = 1;
if (age > 0) {
ageFactor *= 0.85; // First year
if (age > 1) {
ageFactor *= Math.pow(0.90, age – 1);
}
}

// 2. Mileage Depreciation
// Assume average 12k miles/year. Extra mileage hurts more.
// 0.5% per 1000 miles is a common rule of thumb
const mileageFactor = Math.max(0.2, 1 – (mileage * 0.000005));

// 3. Body State Factor
const bodyFactors: Record = {
‘Excellent’: 1.0,
‘Good’: 0.92,
‘Fair’: 0.80,
‘Poor’: 0.60
};
const bodyFactor = bodyFactors[bodyState];

const estimatedValue = newPrice * ageFactor * mileageFactor * bodyFactor;
const totalDepreciation = newPrice – estimatedValue;
const depreciationPercentage = (totalDepreciation / newPrice) * 100;

return {
estimatedValue: Math.round(estimatedValue),
totalDepreciation: Math.round(totalDepreciation),
depreciationPercentage: Math.round(depreciationPercentage),
ageFactor,
mileageFactor,
bodyFactor
};
}, [state]);

const formatCurrency = (val: number) =>
new Intl.NumberFormat(‘en-US’, { style: ‘currency’, currency: ‘USD’, maximumFractionDigits: 0 }).format(val);

return (

);
}