// CabinetReplay — animated Cabinet conversation hero section
const CABINET_EXCHANGES = [
{
counselor: 'Epictetus', initial: 'E',
messages: [
{ role: 'user', text: 'What should I be focusing on right now?' },
{ role: 'assistant', text: 'That question can sometimes be a way of avoiding a simpler, harder one: why are you not doing what you already know you should? What is actually stopping you?' },
],
},
{
counselor: 'Marcus Aurelius', initial: 'M',
messages: [
{ role: 'user', text: 'I lost my temper with my kid tonight. Over nothing. I hate myself for it.' },
{ role: 'assistant', text: 'Do not hate yourself. Examine yourself. There is a difference. What were you carrying into that moment that the child had no part in creating? The enemy was not them. The enemy arrived before they did.' },
],
},
{
counselor: 'Theodore Roosevelt', initial: 'T',
messages: [
{ role: 'user', text: "If I were certain I wouldn't fail — I'd go all in on my own thing. But I keep waiting." },
{ role: 'assistant', text: "The gap between 'soon' and 'now' is where intention goes to die quietly. You are not waiting for the right moment. You are waiting to feel certain. That feeling never comes. The arena does not care how ready you feel. It only cares whether you showed up." },
],
},
{
counselor: 'Marcus Aurelius', initial: 'M',
messages: [
{ role: 'user', text: "I was exhausted tonight. My kid pushed every button. I kept my mouth shut and said nothing. But I almost didn't." },
{ role: 'assistant', text: 'That is a victory. Small, unglamorous, invisible to everyone but you and the people you did not wound. The man you are becoming is not built in dramatic breakthroughs. He is built in exactly these moments.' },
],
},
];
// Static constellation dots computed once
const REPLAY_DOTS = Array.from({ length: 60 }, (_, i) => ({
cx: ((i * 137.508) % 100).toFixed(2) + '%',
cy: ((i * 97.3) % 100).toFixed(2) + '%',
r: i % 5 === 0 ? 1.5 : 1,
opacity: +(0.08 + (i % 4) * 0.05).toFixed(2),
}));
function CabinetReplay() {
const APP_URL = 'https://apps.apple.com/app/id6762371595';
const [exchangeIdx, setExchangeIdx] = React.useState(0);
const [visibleCount, setVisibleCount] = React.useState(0);
const [fading, setFading] = React.useState(false);
const timersRef = React.useRef([]);
function clearTimers() {
timersRef.current.forEach(clearTimeout);
timersRef.current = [];
}
function schedule(fn, delay) {
timersRef.current.push(setTimeout(fn, delay));
}
React.useEffect(() => {
const exchange = CABINET_EXCHANGES[exchangeIdx];
let elapsed = 0;
exchange.messages.forEach((msg, i) => {
elapsed += msg.role === 'user' ? 1000 : 3200;
const t = elapsed;
schedule(() => setVisibleCount(i + 1), t);
});
elapsed += 4500;
schedule(() => setFading(true), elapsed);
elapsed += 600;
schedule(() => {
setFading(false);
setVisibleCount(0);
setExchangeIdx(prev => (prev + 1) % CABINET_EXCHANGES.length);
}, elapsed);
return clearTimers;
}, [exchangeIdx]);
const exchange = CABINET_EXCHANGES[exchangeIdx];
return (
{/* Constellation */}
{/* Content */}