{bars.map((h, i) => {
const hot = i === bars.length - 1;
return (
{hot && +29%}
{days[i]}
);
})}
{metrics.map((m) => (
{m.k}{m.v}{m.d}
))}
);
}
function HeroCoach() {
const rootRef = useRef(null);
const [started, setStarted] = useState(false);
const [revealed, setRevealed] = useState(0);
const [typed, setTyped] = useState(0);
const [thoughtReady, setThoughtReady] = useState(false);
const [aPhase, setAPhase] = useState("idle"); // idle | type | wait | loading | done
const [stats, setStats] = useState(INIT);
const [fx, setFx] = useState(null);
const [burst, setBurst] = useState(0);
const reset = useCallback(() => {
setRevealed(0); setTyped(0); setThoughtReady(false); setAPhase("idle"); setStats(INIT); setFx(null);
}, []);
const applyFeedback = useCallback((ai) => {
if (ai === 0) setStats((s) => ({ ...s, ventas: 12, actividad: 88, meta: 68 }));
else if (ai === 1) setStats((s) => ({ ...s, ventas: 13, actividad: 92, meta: 78 }));
else setStats((s) => ({ ...s, ventas: 14, actividad: 96, racha: 6, meta: 88 }));
setFx("hit");
setBurst((b) => b + 1);
}, []);
// Arranca recién cuando el bloque entra en viewport (tras scrollear un poco)
useEffect(() => {
const el = rootRef.current;
if (!el) return;
if (!("IntersectionObserver" in window)) { setStarted(true); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setStarted(true); io.disconnect(); } });
}, { threshold: 0.3, rootMargin: "0px 0px -25% 0px" });
io.observe(el);
return () => io.disconnect();
}, []);
// Driver de texto/resumen (la acción la maneja el bloque de abajo)
useEffect(() => {
if (!started) return;
const beat = BEATS[revealed];
if (!beat) { const t = setTimeout(reset, LOOP_MS); return () => clearTimeout(t); }
if (beat.type === "action") return;
if (beat.type === "summary") { const t = setTimeout(() => setRevealed((r) => r + 1), PAUSE_SUMMARY); return () => clearTimeout(t); }
if (beat.type === "rinus" && beat.think && !thoughtReady) {
const t = setTimeout(() => setThoughtReady(true), THINK_MS);
return () => clearTimeout(t);
}
if (typed < beat.text.length) { const t = setTimeout(() => setTyped((c) => c + 1), TYPE_MS); return () => clearTimeout(t); }
const t = setTimeout(() => { setRevealed((r) => r + 1); setTyped(0); setThoughtReady(false); }, PAUSE_TEXT);
return () => clearTimeout(t);
}, [started, revealed, typed, thoughtReady, reset]);
// Entrada al beat de acción
useEffect(() => {
if (!started) return;
if (BEATS[revealed] && BEATS[revealed].type === "action" && aPhase === "idle") { setTyped(0); setAPhase("type"); }
}, [started, revealed, aPhase]);
// Tipeo del título de la acción
useEffect(() => {
const b = BEATS[revealed];
if (!(b && b.type === "action") || aPhase !== "type") return;
const full = ACTIONS[b.ai].title;
if (typed < full.length) { const t = setTimeout(() => setTyped((c) => c + 1), TYPE_MS); return () => clearTimeout(t); }
const t = setTimeout(() => setAPhase("wait"), 220);
return () => clearTimeout(t);
}, [revealed, aPhase, typed]);
useEffect(() => {
if (aPhase !== "wait") return;
const t = setTimeout(() => setAPhase("loading"), AUTO_MS);
return () => clearTimeout(t);
}, [aPhase]);
useEffect(() => {
if (aPhase !== "loading") return;
const b = BEATS[revealed];
const t = setTimeout(() => { applyFeedback(b && b.ai); setAPhase("done"); }, LOADING_MS);
return () => clearTimeout(t);
}, [aPhase, revealed, applyFeedback]);
useEffect(() => {
if (aPhase !== "done") return;
const t = setTimeout(() => { setRevealed((r) => r + 1); setTyped(0); setThoughtReady(false); setAPhase("idle"); setFx(null); }, DONE_MS);
return () => clearTimeout(t);
}, [aPhase]);
const accept = () => {
const b = BEATS[revealed];
if (!b || b.type !== "action") return;
if (aPhase === "type" || aPhase === "wait") { setTyped(ACTIONS[b.ai].title.length); setAPhase("loading"); }
};
const curBeat = BEATS[revealed];
const live = aPhase === "loading" || aPhase === "done";
// La tarjeta "Próxima acción" del teléfono solo existe mientras hay una acción
// sugerida en el chat: aparece con la acción (show), corre la barra al aceptarla
// (progress) y festeja al terminar (success -> toast que se va).
let boxState = null, boxTitle = "", boxDone = "";
if (curBeat && curBeat.type === "action") {
const A = ACTIONS[curBeat.ai];
boxTitle = A.title; boxDone = A.doneLabel;
// aparece recién cuando terminó de tipear (fase "wait"), no durante el tipeo
boxState = aPhase === "loading" ? "progress"
: aPhase === "done" ? "success"
: aPhase === "wait" ? "show"
: null;
}
const renderActionBeat = (active, ai) => {
const A = ACTIONS[ai];
const done = aPhase === "done" || !active;
const p = done ? "done" : aPhase;
const shownTitle = (active && p === "type") ? A.title.slice(0, typed) : A.title;
return (
);
};
const renderBeat = (beat, i) => {
const active = i === revealed;
if (beat.type === "summary") {
return
;
}
if (beat.type === "action") return renderActionBeat(active, beat.ai);
// pensando: solo los 3 puntos naranjas, sin globo
if (beat.type === "rinus" && beat.think && active && !thoughtReady) {
return (
);
}
const text = active ? beat.text.slice(0, typed) : beat.text;
const typing = active && typed < beat.text.length && (!beat.think || thoughtReady);
return (
;
}
const Check = ({ s = 13, w = 3.1 }) => (
);
/* ── Confetti burst ────────────────────────────────────────────── */
function Confetti({ id }) {
const bits = [];
const colors = ["#E8613C", "#2D5442", "#4A7860", "#B8421F", "#7CA892"];
for (let i = 0; i < 14; i++) {
const ang = (i / 14) * Math.PI * 2 + (id % 3);
const dist = 46 + (i % 4) * 12;
bits.push({ x: Math.cos(ang) * dist, y: Math.sin(ang) * dist - 10, c: colors[i % colors.length], d: (i % 5) * 40 });
}
return (