// Hero Workflow Tape - plays one real KMO workflow row by row, ends in a
// concrete outcome, then cross-fades to the next. Three workflows total.
// Hero-safe per spec v2: no ERP / accounting / banking endpoints.
//
// Motion budget:
// beat tween 180ms, stagger 700ms, outcome appears 400ms after last beat,
// 1s hold, 240ms cross-fade. ~6s/cycle, 3 cycles = ~18s loop.
//
// prefers-reduced-motion: render workflow #1 in its end-state, no rotation.
const HeroWorkflowPanel = ({ lang }) => {
const workflows = (window.HERO_WORKFLOWS && window.HERO_WORKFLOWS[lang]) || [];
const reduced = React.useRef(
typeof window !== 'undefined' &&
window.matchMedia('(prefers-reduced-motion: reduce)').matches
);
const [wfIdx, setWfIdx] = React.useState(0);
const [beatIdx, setBeatIdx] = React.useState(reduced.current ? 5 : 0);
const [showOutcome, setShowOutcome] = React.useState(reduced.current);
const [fading, setFading] = React.useState(false);
const [paused, setPaused] = React.useState(false);
// restartTick increments every time the panel re-enters the viewport.
// Including it in the sequencer effect deps restarts the loop cleanly,
// fixing the 'panel stuck faded out' bug when the user scrolls away
// mid-cycle and comes back later (timers in-flight skipped their
// setFading(false) calls because inViewRef was false at the time).
const [restartTick, setRestartTick] = React.useState(0);
const inViewRef = React.useRef(true);
const wrapRef = React.useRef(null);
// Pause + restart when scrolling out of and back into the viewport
React.useEffect(() => {
if (!wrapRef.current) return;
const io = new IntersectionObserver(
([entry]) => {
const wasInView = inViewRef.current;
inViewRef.current = entry.isIntersecting;
// Edge: hidden -> visible. Bump the tick so the sequencer effect
// restarts cleanly from the current wfIdx instead of staying stuck
// on whatever half-faded state it was in.
if (!wasInView && entry.isIntersecting) {
setRestartTick(t => t + 1);
}
},
{ threshold: 0.2 }
);
io.observe(wrapRef.current);
return () => io.disconnect();
}, []);
// Sequencer
React.useEffect(() => {
if (reduced.current) return;
const wf = workflows[wfIdx];
if (!wf) return;
// PAUSED MODE (user hovered, focused, or clicked a dot while hovering)
// Don't leave the panel half-faded. Snap to the workflow's final state -
// all beats visible + outcome shown - so the user sees full content.
// When the user unhovers/unfocuses, this effect re-runs with paused=false
// and the normal sequence kicks in again.
if (paused) {
setBeatIdx(wf.beats.length);
setShowOutcome(true);
setFading(false);
return;
}
const timers = [];
// Reset to start of the new workflow
setBeatIdx(0);
setShowOutcome(false);
setFading(true);
// Fade-in delay: shorter than before (was 320ms) so the dark frame
// between workflows is barely perceptible. The wrapper opacity
// transition is 240ms; this gives enough time for the previous
// workflow's fade-out to commit without leaving a long blank.
const FADE_IN_DELAY = 180;
timers.push(setTimeout(() => {
if (inViewRef.current) setFading(false);
}, FADE_IN_DELAY));
// Beats
const BEAT_STEP = 700;
for (let i = 1; i <= wf.beats.length; i++) {
timers.push(setTimeout(() => {
if (inViewRef.current) setBeatIdx(i);
}, FADE_IN_DELAY + i * BEAT_STEP));
}
// Outcome strap
const outcomeAt = FADE_IN_DELAY + wf.beats.length * BEAT_STEP + 400;
timers.push(setTimeout(() => {
if (inViewRef.current) setShowOutcome(true);
}, outcomeAt));
// Hold + fade out
const fadeAt = outcomeAt + 1400;
timers.push(setTimeout(() => {
if (inViewRef.current) setFading(true);
}, fadeAt));
// Advance after the fade-out transition has fully committed
timers.push(setTimeout(() => {
if (inViewRef.current) {
setWfIdx((i) => (i + 1) % workflows.length);
}
}, fadeAt + 280));
return () => timers.forEach(clearTimeout);
}, [wfIdx, paused, workflows.length, restartTick]);
// Safety watchdog: if `fading` stays true for >700ms, force it back to
// false. Catches edge cases where state transitions get desynced (e.g.
// paused toggled mid-cycle and a previous effect's timers cleared
// before they could call setFading(false)). The normal fade dance is
// 180ms (in) + 240ms transition + 280ms advance = ~700ms max in 'true'
// state, so 700ms watchdog won't interfere with normal flow.
React.useEffect(() => {
if (!fading) return;
const watchdog = setTimeout(() => setFading(false), 900);
return () => clearTimeout(watchdog);
}, [fading]);
if (workflows.length === 0) return null;
const wf = workflows[wfIdx];
return (