const { useState, useMemo, useEffect, useRef, Fragment } = React; // ═══════════════════════════════════════════════════════════════ // DETAIL SLIDE-OVER // ═══════════════════════════════════════════════════════════════ function DetailPanel({ product, onClose, t, lang, dark, shortlist, toggleShortlist, profile, allProducts, onSelectProduct }) { const [amount, setAmount] = useState(product?.minimumInvestment.amount || 100000); useEffect(() => { if (product) setAmount(product.minimumInvestment.amount); }, [product?.id]); // ESC closes the panel useEffect(() => { if (!product) return; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [product, onClose]); const text = dark ? "#FAF7F3" : "#393433"; const muted = dark ? "#8A827F" : "#6B6361"; const faint = dark ? "#5A5654" : "#C1C1C1"; const border = dark ? "#2A2825" : "#E2E0DF"; const bg = dark ? "#1A1817" : "#FFFFFF"; const surface = dark ? "#0D0D0D" : "#FAF7F3"; const accent = "#4866B2"; const lime = "#EDFE38"; const show = !!product; // Determine check-size-aware slider max const checkMax = { "$50k-$100k": 100000, "$100k-$500k": 500000, "$500k-$1M": 1000000, "$1M+": 2000000 }; const profileCap = profile && profile.check ? checkMax[profile.check] : null; const sliderMax = product ? Math.max(product.minimumInvestment.amount * 2, profileCap || 2000000) : 2000000; const projectedExit = useMemo(() => { if (!product) return 0; const r = product.targetReturn; const [minY, maxY] = product.holdPeriodYears; const midY = (minY + maxY) / 2; if (r.multiple) return amount * ((r.multiple[0] + r.multiple[1]) / 2); if (r.irr) return amount * Math.pow(1 + ((r.irr[0] + r.irr[1]) / 2) / 100, midY); if (r.yield) return amount * (1 + ((r.yield[0] + r.yield[1]) / 2) / 100 * midY); return amount; }, [product, amount]); const tier = product ? window.productTier(product) : null; const tierIdx = tier ? TIER_ORDER.indexOf(tier) : -1; // Eligibility for current product const el = useMemo(() => product ? window.checkEligibility(product, profile || {}) : null, [product, profile]); const ineligibleWithReasons = el && !el.eligible && !el.unanswered && el.reasons && el.reasons.length > 0; // Other tranches in this same project const siblings = useMemo(() => { if (!product || !allProducts) return []; return allProducts.filter(p => p.project === product.project && p.id !== product.id); }, [product, allProducts]); return ( <> {/* Backdrop */}
{/* Panel */} ); } function Metric({ label, value, muted, text, lime }) { return (
{label}
{value}
); } window.DetailPanel = DetailPanel;