// ═══════════════════════════════════════════════════════════════════════════
// SOLUTION ROOM — five beats.
//
// The room closes the loop the Problem room opens. The buyer cannot see his
// stockouts, so he rationally over-orders; beat 3 is that blind spot being
// removed, and it is the peak of the deck. Reconciliation (beat 2) is
// plumbing and is deliberately given a fifth of the attention, not half.
//
// Same interaction model as before: auto-advance, click to advance early.
// ═══════════════════════════════════════════════════════════════════════════
const { useState: useFS, useEffect: useFE, useRef: useFR } = React;
// Beat 3 holds longest because it carries the argument.
// Beat 4 is the fifth panel and holds longest.
const FIX_HOLD = [4000, 5000, 4000, 6000, 4000, 4000];
function fixReduced() {
if (window.__STATIC) return true;
try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
catch (e) { return false; }
}
// ── shared atoms. No cards, borders or fills anywhere except the four
// readouts in beat 2, where the separation is the argument.
function FLabel({ children, tone }) {
return (
);
}
// ───────────────────────── BEATS 2, 3 and 4 · the original stage
// The four panel simulation is reused exactly as built. The room drives its
// phase; nothing about the panels or their copy is changed here.
function SimBeat({ phase, fifth, below }) {
return (
);
}
// ───────────────────────── BEAT 3 · what no system says
// The peak. Largest type, longest hold, most space.
function Beat3({ C }) {
return (
{C.label}
{C.hero}
{C.heroLabel}{C.body}{C.kicker}
);
}
// ───────────────────────── BEAT 4 · the decision, and the honesty
// The pairing is the point, so neither side outweighs the other.
function Beat4({ C, lang }) {
const [asked, setAsked] = useFS(false);
const askWhy = () => {
const q = lang === 'no'
? 'Hvorfor anbefaler dere 26 enheter av SKU 45821, og ikke et annet antall?'
: 'Why do you recommend 26 units of SKU 45821 rather than some other number?';
setAsked(true);
window.__track && window.__track('ask_why_qty', { qty: C.qty });
// A real query to the agent, streamed into the Ask Otto surface. Not a
// tooltip: this is the one thing in the deck that a printout cannot do.
if (window.__askDeck) window.__askDeck(q);
};
return (
);
}
// ───────────────────────── BEAT 5 · the human, then the money
// Without a visible human in the loop the deck claims autonomy we do not have.
function Beat5({ C }) {
const [done, setDone] = useFS(false);
return (
{C.label}
{!done && (
{C.override}
)}
{C.scope}
{C.hero}{C.heroUnit}
{C.rows.map((r, i) => (
{r.a}→{r.b}{r.k}
))}
);
}
// ───────────────────────── the room
function SolutionRoom() {
const lang = window.__useLang();
const T = window.TDATA[lang];
const C = T.sim.fix;
window.__useRoomTelemetry('simulation');
const reduced = fixReduced();
const [beat, setBeat] = useFS(0);
const [held, setHeld] = useFS(false); // a click stops the auto sequence
useFE(() => {
if (reduced || held || beat >= 5) return;
const id = setTimeout(() => setBeat(b => Math.min(5, b + 1)), FIX_HOLD[beat]);
return () => clearTimeout(id);
}, [beat, held, reduced]);
const go = (n) => { setHeld(true); setBeat(Math.max(0, Math.min(5, n))); };
// 1 item · 2 the four systems · 3 reconciliation · 4 the fifth panel
// · 5 the decision · 6 the human and the money
const frames = [
() => ,
() => ,
() => ,
() => (
{C.b3.body}{C.b3.kicker}
} />
),
() => ,
() => ,
];
return (
{/* Beat rail. Advancing is the same gesture the room always had. */}
{[0, 1, 2, 3, 4, 5].map(i => (
{/* Beat 3 gets the most room: the others sit centred in the same frame,
so the sequence never jumps. */}