/* global React, Ic, Pill, Btn, ScoreRing, TopBar, Back, useState, useEffect, useRef */ /* Proben MVP 5 — practice modes: Chat simulation + Upload analysis. Blueprint skin. */ const STAKE = { name: 'Dana', role: 'VP Product', attitude: 'Skeptical', cares: 'Business impact, timing, team capacity', objection: '“Why now? We already have too many commitments.”', win: 'Dana agrees to a scoped next step' }; const COACH_KEYS = ['Clarity', 'Strategic context', 'Evidence', 'Stakeholder handling', 'Decision ask', 'Tone']; /* scripted role-play: dana reply + feedback per user turn */ const TURNS = [ { dana: 'Okay — but what makes the enterprise segment more important than the horizontal bet leadership wants?', worked: 'You acknowledged the capacity concern instead of arguing against it.', weakened: 'Still no business-impact number, and the ask sounds broad.', better: '“I agree we should avoid adding scope. My ask isn’t a roadmap change — it’s a two-week validation to decide whether this enterprise blocker is worth prioritizing.”', scores: [7.2, 5.8, 5.5, 6.6, 5.6, 7.0], }, { dana: 'And if the validation fails — what have we actually learned?', worked: 'You framed it as de-risking, which aligns with how Dana thinks.', weakened: 'You haven’t named a success threshold or an owner yet.', better: '“If activation doesn’t move by 12% in two weeks, we drop it and proceed with the pivot. Either way we stop guessing — I’ll own the validation.”', scores: [7.8, 6.9, 6.4, 7.4, 6.9, 7.2], }, ]; const SUGGESTIONS = [ '“I’m not asking to reopen the roadmap — just two weeks to validate the enterprise blocker.”', '“Enterprise is already blocked, that’s ~€1.2M/yr at risk. Two weeks tells us if a fix is worth it.”', '“If it doesn’t move activation by 12%, we drop it. I’ll own it and report next sprint.”', ]; function CoachMeter({ k, v, on }) { const col = !on ? 'var(--muted-2)' : v >= 7.5 ? 'var(--c-good)' : v >= 6 ? 'var(--c-mid)' : v >= 4.5 ? 'var(--c-warn)' : 'var(--c-bad)'; return (
{k}{on ? v.toFixed(1) : '—'}
); } /* ===== CHAT SIMULATION ===== */ function ChatSim({ onBack, onVoice, onUpload, onResults }) { const [msgs, setMsgs] = useState([{ who: 'dana', text: STAKE.objection.replace(/[“”]/g, '') }]); const [draft, setDraft] = useState(''); const [turn, setTurn] = useState(0); const [fb, setFb] = useState(null); const [ended, setEnded] = useState(false); const [showBench, setShowBench] = useState(false); const threadRef = useRef(null); const scores = turn === 0 ? null : TURNS[Math.min(turn, TURNS.length) - 1].scores; useEffect(() => { if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight; }, [msgs, fb]); const send = () => { if (!draft.trim() || turn >= TURNS.length) return; const t = TURNS[turn]; setMsgs((m) => [...m, { who: 'me', text: draft.trim() }]); setDraft(''); setFb(null); setTimeout(() => { setMsgs((m) => [...m, { who: 'dana', text: t.dana }]); setFb(t); setTurn((x) => x + 1); }, 550); }; return (
} center="PRACTICE · CHAT SIMULATION" right={ROLE-PLAY} /> {!ended ? (

Practice in chat

Proben plays the stakeholder. Answer the objection and move the meeting toward a clear next step.

{/* context bar */}
{[['MEETING', 'Strategy review'], ['GOAL', 'Approval for a narrow validation'], ['STAKEHOLDER', STAKE.name + ', ' + STAKE.role], ['WIN CONDITION', STAKE.win]].map((c, i) => (
{c[0]}
{c[1]}
))}
{/* left — stakeholder */}
STAKEHOLDER
{STAKE.name}
{STAKE.role}
{[['ATTITUDE', STAKE.attitude], ['CARES ABOUT', STAKE.cares], ['LIKELY OBJECTION', 'Why now?'], ['RISK', 'You may sound defensive or vague']].map((m, i) => (
{m[0]}
{m[1]}
))}
{/* center — thread */}
{msgs.map((m, i) => m.who === 'dana' ? (
{m.text}
) : (
{m.text}
))} {fb && (
COACHING
✓{fb.worked}
→{fb.weakened}
BETTER NEXT REPLY
{fb.better}
)} {turn >= TURNS.length && (
You’ve handled both objections — end the simulation to see your updated readiness.
)}
{/* input */}
{showBench &&
BENCHMARK ANSWER
{SUGGESTIONS[Math.min(turn, 2)]}
}