/* Stethos — interactive "how it works" explainer for the landing page.
Replaces the ambient animation with a guided, labeled, step-through story so a
non-technical visitor understands exactly what the product does. */
const DSF = window.LatentHealthDesignSystem_2f3a71;
const { Badge: FBadge } = DSF;
const { useState, useEffect, useRef, useMemo } = React;
const N = 96; // 4 days @ 24 ticks
const FLAG = 54; // predicted crosses the flag line here
const THRESH = 0.30;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const STAGES = [
{
end: 24,
tag: 'Day 1',
title: 'Everything looks fine.',
body: 'Margaret, 71, is admitted after a hip replacement. She talks with staff, presses her call bell when she needs something, and both lines sit high. Any dashboard today would show a normal patient.',
color: 'var(--status-nominal)',
},
{
end: 48,
tag: 'Day 2',
title: 'She goes quiet. That’s the warning.',
body: 'Overnight she stops pressing the call bell. Her voice flattens; her conversations get shorter. A staff member reads this as “settling in.” Stethos reads it as withdrawal, the strongest signal that a stay is going wrong.',
color: 'var(--status-warning)',
},
{
end: 60,
tag: 'Day 3',
title: 'The predicted line crosses the flag.',
body: 'Her current chart still looks acceptable, but the predicted discharge score drops below 0.30 and the patient is flagged. A satisfaction survey wouldn’t reveal any of this until ~40 days after she’s home.',
color: 'var(--status-flagged)',
},
{
end: 96,
tag: 'The point',
title: 'Caught in time, the outcome changes.',
body: 'Because the flag fires during the stay, a nurse can actually intervene. The green line is what happens when someone steps in. The faded line is what happens if no one ever sees it: the outcome every survey-based system quietly accepts.',
color: 'var(--status-nominal)',
},
];
function activeStage(t) {
for (let i = 0; i < STAGES.length; i++) if (t <= STAGES[i].end) return i;
return STAGES.length - 1;
}
/* ---- big annotated chart ---- */
function ExplainerChart({ t, series }) {
const W = 1000, H = 440, L = 56, R = 210, TOP = 30, BOT = 54;
const { observed, preCrater, withInt, without } = series;
const x = (i) => L + (i / (N - 1)) * (W - L - R);
const y = (v) => H - BOT - clamp(v, 0, 1) * (H - TOP - BOT);
const end = clamp(t, 1, N - 1);
const pts = (arr, from, to) => {
const o = [];
for (let i = from; i <= to; i++) o.push(x(i).toFixed(1) + ',' + y(arr[i]).toFixed(1));
return o.join(' ');
};
const preEnd = Math.min(end, FLAG);
const curPre = preCrater[Math.min(end, FLAG)];
const flagged = end >= FLAG;
const inIntervention = end > FLAG;
const preColor = flagged ? 'var(--status-flagged)' : 'var(--cyan-500)';
const dayX = (d) => x(d * 24);
return (
);
}
function FlowExplainer() {
const [t, setT] = useState(6);
const [target, setTarget] = useState(24);
const [playing, setPlaying] = useState(true);
const raf = useRef(null);
const series = useMemo(() => {
const observed = [], preCrater = [], withInt = [], without = [];
for (let i = 0; i < N; i++) {
const p = i / (N - 1);
observed.push(0.60 - 0.16 * p + 0.03 * Math.sin(p * 20));
preCrater.push(clamp(0.84 - 0.74 * Math.pow(clamp((p - 0.22) / 0.40, 0, 1), 1.5), 0.10, 0.9));
}
const base = preCrater[FLAG];
for (let i = 0; i < N; i++) {
const k = clamp((i - FLAG) / (N - 1 - FLAG), 0, 1);
withInt.push(base + (0.74 - base) * Math.pow(k, 0.7));
without.push(clamp(base - 0.12 * k, 0.08, 1));
}
return { observed, preCrater, withInt, without };
}, []);
// animate t toward target, dwelling at each day boundary so the story lands,
// then looping back to the start automatically when it reaches the end
const holdUntil = useRef(0);
const loopPending = useRef(false);
useEffect(() => {
let last = performance.now();
const speed = 15; // ticks/sec — slow enough to read
function step(now) {
const dt = (now - last) / 1000; last = now;
setT(prev => {
const tgt = playing ? N - 1 : target;
if (playing && now < holdUntil.current) return prev;
if (loopPending.current) { loopPending.current = false; setTarget(24); return 6; }
if (Math.abs(prev - tgt) < 0.6) {
if (playing && prev >= N - 1) { holdUntil.current = now + 2600; loopPending.current = true; }
return tgt;
}
const dir = tgt > prev ? 1 : -1;
const next = clamp(prev + dir * speed * dt, 0, N - 1);
if (playing && dir > 0) {
for (const s of STAGES) {
if (prev < s.end && next >= s.end && s.end < N - 1) { holdUntil.current = now + 2600; return s.end; }
}
}
return next;
});
raf.current = requestAnimationFrame(step);
}
raf.current = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf.current);
}, [target, playing]);
const ti = Math.round(t);
const stage = activeStage(ti);
const st = STAGES[stage];
const predNow = ti >= FLAG ? series.withInt[ti] : series.preCrater[ti];
const obsNow = series.observed[ti];
const statusVar = ti >= FLAG && ti <= 62 ? 'flagged' : (predNow < 0.5 ? 'warning' : 'nominal');
const dayLabel = ['Day 1', 'Day 2', 'Day 3', 'Day 4'][Math.min(3, Math.floor(ti / 24))];
const hh = String((Math.floor((ti % 24)) )).padStart(2, '0');
function goStage(i) { setPlaying(false); setTarget(STAGES[i].end); }
return (
{/* how-it-works strip */}
{[
['Signals you already collect', 'The call bell, the intercom mic, RTLS badges, the EMR: 16 signals your hospital already has.'],
['Our model, every hour', 'They collapse into four questions and one score, recomputed continuously for every patient.'],
['A discharge score, live', 'One number: how satisfied this patient will be at discharge, while you can still change it.'],
].map(([h, b], i) => (
{String(i + 1).padStart(2, '0')}
{h}
{b}
{i < 2 &&
→
}
))}
{/* chart card */}
{/* header: legend + live readout */}
One patient’s stay, hour by hour
What the ward sees today
What Stethos predicts
Predicted at discharge
{predNow.toFixed(2)}{statusVar}
{/* chart */}
{/* stage caption */}
{st.tag}{st.title}
{st.body}
{/* controls */}
{STAGES.map((s, i) => (
))}
{dayLabel} · {hh}:00
{ setPlaying(false); const v = parseInt(e.target.value, 10); setT(v); setTarget(v); }}
style={{ width: '100%', accentColor: 'var(--cyan-500)' }} aria-label="Scrub through the stay" />