);
}
/* ============================================================
QRJoin — scan-to-participate panel for room-input workshops.
Uses a QR image service (phones need internet to reach the
participant page anyway); falls back to big code + URL.
============================================================ */
function participantURL() {
if (window.FYNCH_PARTICIPANT_URL) return window.FYNCH_PARTICIPANT_URL.replace("{code}", FynchStore.code());
try { return new URL("participant.html?code=" + FynchStore.code(), location.href).href; } catch (e) { return "participant.html"; }
}
function QRJoin({ compact }) {
const url = participantURL();
const [err, setErr] = useState(false);
const count = FynchStore.participantCount();
const qsrc = "https://api.qrserver.com/v1/create-qr-code/?size=320x320&margin=0&qzone=1&color=0f172a&data=" + encodeURIComponent(url);
return (
{!err ? setErr(true)} /> :
}
Scan to join & vote
{FynchStore.code()}
{url.replace(/^https?:\/\//, "")}
{count} in the room
);
}
/* ============================================================
ScreenSlot — labeled product-screenshot placeholder.
The user drops a real screenshot here later (or sends the
file and it's wired as ). Tagged with exactly what goes
in each slot so nothing is ambiguous.
============================================================ */
function ScreenSlot({ label, note, tab, src }) {
return (
{src ? : (
app.fynch.ai
PRODUCT SCREENSHOT
{label}
{tab &&
{tab}
}
{note &&
{note}
}
)}
);
}
/* ============================================================
DealJourney — self-playing, clickable deal-flow simulator.
A deal advances through 9 stages; metrics tween as it
transforms; click any stage to focus it. (Slide 20)
============================================================ */
function useTween(value, dur = 700) {
const [v, setV] = useState(value);
const from = useRef(value), raf = useRef(0);
useEffect(() => {
cancelAnimationFrame(raf.current);
const start = performance.now(), a = from.current, b = value;
const tick = (t) => { const p = Math.min(1, (t - start) / dur); const e = 1 - Math.pow(1 - p, 3); setV(a + (b - a) * e); if (p < 1) raf.current = requestAnimationFrame(tick); else from.current = b; };
raf.current = requestAnimationFrame(tick);
const safety = setTimeout(() => { from.current = b; setV(b); }, dur + 150);
return () => { cancelAnimationFrame(raf.current); clearTimeout(safety); };
}, [value, dur]);
return v;
}
function TweenNum({ to }) { const v = useTween(to); return {Math.round(v).toLocaleString()}; }
const DJ_STAGES = [
{ name: "Intake", icon: "mail", screen: 23, blurb: "Broker email, rent roll, T12 & sponsor docs land in one controlled pipeline — not a personal inbox.", m: [16, 0, 0, 0], chips: ["broker_email", "RentRoll_v4.xlsx", "T12.pdf"] },
{ name: "Package", icon: "grid", screen: 22, blurb: "The checklist scores whether the package is strong enough for this stage of the deal.", m: [16, 0, 0, 2], chips: ["8 sufficient", "2 weak", "1 blocking"] },
{ name: "Extraction", icon: "table", screen: 24, blurb: "PDFs & spreadsheets are parsed into ~150 structured CRE facts — no manual spreading.", m: [16, 150, 0, 2], chips: ["units 184", "occ 93.5%", "NOI $1.284M"] },
{ name: "Evidence", icon: "eye", screen: 26, blurb: "Each fact is linked back to a page, cell, table, or computed metric.", m: [16, 150, 142, 2], chips: ["match 0.94", "p.12", "fin.noi"] },
{ name: "Review", icon: "flag", screen: 27, blurb: "Conflicts & low-confidence values are routed to underwriters as exceptions.", m: [16, 150, 142, 3], chips: ["2 blocking", "3 warning"] },
{ name: "Policy", icon: "shield", screen: 28, blurb: "DSCR, LTV, debt yield & credit policy run from sourced facts.", m: [16, 150, 150, 1], chips: ["DSCR 1.38×", "LTV 65.0%", "DY 8.4%"] },
{ name: "Quote", icon: "spark", screen: 28, blurb: "Sizing & indicative terms are checked against eligibility.", m: [16, 150, 150, 1], chips: ["$15.275M", "within policy"] },
{ name: "Memo", icon: "doc", screen: 28, blurb: "Screening & credit memos are generated from approved facts and templates.", m: [16, 150, 150, 0], chips: ["screening memo", "credit memo"] },
{ name: "Audit", icon: "layers", screen: 28, blurb: "Full lineage — who changed what, where it came from, and what depends on it.", m: [16, 150, 150, 0], chips: ["lineage", "retention", "reconstructable"] },
];
const DJ_METRICS = [["Documents", "var(--ink-700)"], ["Facts extracted", "var(--brand-600)"], ["Evidence-linked", "var(--verified-fg)"], ["Open exceptions", "var(--conflict-fg)"]];
function DealJourney() {
const active = useActive();
const [i, setI] = useState(0);
const [playing, setPlaying] = useState(true);
useEffect(() => {
if (!active) { setI(0); setPlaying(true); return; }
if (!playing) return;
const t = setInterval(() => setI((p) => (p + 1) % DJ_STAGES.length), 2700);
return () => clearInterval(t);
}, [active, playing]);
const s = DJ_STAGES[i];
const pct = (i / (DJ_STAGES.length - 1)) * 100;
return (
setErr(true)} /> : 