import React, { useState, useMemo } from “react”; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from “recharts”; import { Search, Rocket, ShieldCheck, ExternalLink, Calendar, Phone, Mail, Globe, FileText, Home, Award, Lock, ChevronRight, Zap, Layout, Clock } from “lucide-react”; /* ─── BRAND DESIGN TOKENS ─── */ const C = { midnight: “#112030”, amber: “#FF9900”, amberHi: “#FFB740”, cyan: “#00D2D3”, white: “#FFFFFF”, textMuted: “#9BADC4”, divider: “rgba(255,255,255,0.1)” }; /* ─── CALCULATOR DATA ─── */ const NBS = [ { label: “South LA / Leimert Park”, hint: “Rising neighborhood”, rent: 1950, cost: 280, growth: 4.5 }, { label: “Baldwin Hills / Crenshaw”, hint: “Views & high demand”, rent: 2200, cost: 288, growth: 4.8 }, { label: “Inglewood / SoFi Area”, hint: “LA’s hottest zip codes”, rent: 2500, cost: 292, growth: 5.2 }, { label: “West Adams / Jefferson Pk”, hint: “Rapid appreciation”, rent: 2900, cost: 312, growth: 5.0 }, { label: “Compton / Watts”, hint: “Affordable building”, rent: 1800, cost: 275, growth: 4.2 }, ]; const SIZES = [ { label: “Studio”, sqft: 400, icon: “🛏️” }, { label: “1 Bedroom”, sqft: 600, icon: “🏠” }, { label: “2 Bedroom”, sqft: 850, icon: “🏘️” }, { label: “3 Bedroom (ADU28)”, sqft: 1150, icon: “🏰” }, ]; /* ─── FORMATTING ─── */ const fmt = (n) => “$” + Math.round(n).toLocaleString(); const fmtK = (n) => n >= 1000000 ? “$” + (n/1000000).toFixed(2) + “M” : “$” + Math.round(n/1000).toFixed(0) + “K”; const yrs = (n) => n > 30 ? “30+ yrs” : n.toFixed(1) + ” yrs”; const pct = (n) => n.toFixed(1) + “%”; const CustomTooltip = ({ active, payload, label }) => { if (!active || !payload || !payload.length) return null; return ( ); }; export default function App() { const [nbIdx, setNbIdx] = useState(0); const [sizeIdx, setSizeIdx] = useState(1); const [financed, setFinanced] = useState(true); const [downPct, setDownPct] = useState(30); const [rentAdj, setRentAdj] = useState(0); const [unlocked, setUnlocked] = useState(false); const [fullName, setFullName] = useState(“”); const [address, setAddress] = useState(“”); const nb = NBS[nbIdx]; const size = SIZES[sizeIdx]; const rent = nb.rent + rentAdj; const d = useMemo(() => { const construction = size.sqft * nb.cost; const soft = 33000; const total = construction + soft; const vac = 0.05; const exp = 0.20; const netMo = rent * (1 – vac) * (1 – exp); const netYr = netMo * 12; const cap = (netYr / total) * 100; const payback = total / Math.max(netYr, 1); const loan = total * ((100 – downPct) / 100); const down = total – loan; const r = 0.075 / 12; const n = 240; const debt = loan * (r * Math.pow(1+r,n)) / (Math.pow(1+r,n)-1); const cfMo = netMo – debt; const ret10 = (total * Math.pow(1 + nb.growth/100, 10)) + (netYr * 10); const proj = Array.from({length: 11}, (_, yr) => ({ year: “Yr ” + yr, “Property Value”: Math.round(total * Math.pow(1+nb.growth/100, yr)), “Cumulative Income”: Math.round(netYr * yr), })); return { construction, soft, total, netMo, netYr, cap, payback, loan, down, debt, cfMo, ret10, proj }; }, [nbIdx, sizeIdx, financed, downPct, rent, nb, size]); return ( ); }