// Success Fee animated chart — fixed cost crosses success-fee revenue at break-even const { useEffect, useState, useRef } = React; function FeeChart() { const ref = useRef(null); const [p, setP] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { let start = performance.now(); const dur = 2200; const tick = (t) => { const v = Math.min(1, (t - start) / dur); // ease const eased = v < 0.5 ? 2 * v * v : 1 - Math.pow(-2 * v + 2, 2) / 2; setP(eased); if (v < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); io.disconnect(); } }, { threshold: 0.4 } ); io.observe(el); return () => io.disconnect(); }, []); const W = 720, H = 540; const PAD_L = 70, PAD_R = 40, PAD_T = 50, PAD_B = 70; const innerW = W - PAD_L - PAD_R; const innerH = H - PAD_T - PAD_B; // X = months 0..12, Y = $K const months = ['М0','М2','М4','М6','М8','М10','М12']; const x = (m) => PAD_L + (m / 12) * innerW; const y = (v) => PAD_T + innerH - (v / 100) * innerH; // Investment phase (fixed): flat ~30K, ramps down after break-even (M6) const fixedPath = (() => { const pts = []; for (let m = 0; m <= 12; m += 0.5) { let val = m < 6 ? 30 : Math.max(0, 30 - (m - 6) * 6); pts.push([x(m), y(val)]); } return pts; })(); // Success fee curve: starts 0, climbs (S-curve) const feePath = (() => { const pts = []; for (let m = 0; m <= 12; m += 0.5) { // S-curve: val = 90 / (1+exp(-(m-6)*0.7)) const v = 90 / (1 + Math.exp(-(m - 6) * 0.7)); pts.push([x(m), y(v)]); } return pts; })(); // Partnership total = success fee minus fixed (cumulative net) const partnerPath = (() => { const pts = []; for (let m = 0; m <= 12; m += 0.5) { const fee = 90 / (1 + Math.exp(-(m - 6) * 0.7)); const fix = m < 6 ? 30 : Math.max(0, 30 - (m - 6) * 6); const net = fee - fix; pts.push([x(m), y(Math.max(-10, net))]); } return pts; })(); const drawTo = (pts, prog) => { const cut = Math.max(1, Math.floor(pts.length * prog)); return pts.slice(0, cut).map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(' '); }; // Break-even at M6 const beX = x(6); const beY = y(36); return (

); } window.FeeChart = FeeChart;