/* Clara v2 — Hero banner (carousel of 3 questions → CLARA. logo reveal) */
const { useEffect, useState, useRef, useMemo } = React;
const HERO_SLIDES = [
{
area: 'DIRECCIÓN FINANCIERA',
question:
'¿Sabes cuál es el margen real de tu negocio este mes, o el número cambia según qué sistema consultes?',
},
{
area: 'GERENCIA DE MARKETING',
question:
'¿Sabes qué campañas te están generando ventas reales después de devoluciones, descuentos y costos de adquisición?',
},
{
area: 'GERENCIA GENERAL',
question:
'¿Cuánto capital tienes dormido en inventario que lleva más de 90 días sin moverse? ¿Y cuánto te cuesta cada mes?',
},
];
const SLIDE_DURATION = 7000;
const FINAL_DURATION = 18000;
const WORD_STAGGER = 35; // ms per word
function HeroWordReveal({ text, run }) {
const words = useMemo(() => text.split(' '), [text]);
return (
{words.map((w, i) => (
{w}{i < words.length - 1 ? ' ' : ''}
))}
);
}
function HeroBanner() {
const [index, setIndex] = useState(0);
const [phase, setPhase] = useState('slides'); // 'slides' | 'final'
const [paused, setPaused] = useState(false);
const [progress, setProgress] = useState(0); // 0..1
const [wordsRun, setWordsRun] = useState(false);
const elapsedRef = useRef(0);
const startedAtRef = useRef(null);
const rafRef = useRef(null);
const beatRef = useBeatAnchor('beat-hero-final');
const duration = phase === 'final' ? FINAL_DURATION : SLIDE_DURATION;
// Restart word-reveal on slide / phase change
useEffect(() => {
setWordsRun(false);
const t = setTimeout(() => setWordsRun(true), 60);
return () => clearTimeout(t);
}, [index, phase]);
const resetTimer = () => {
elapsedRef.current = 0;
startedAtRef.current = null;
setProgress(0);
};
const goNext = () => {
resetTimer();
if (phase === 'final') {
setIndex(0);
setPhase('slides');
return;
}
if (index < HERO_SLIDES.length - 1) {
setIndex((i) => i + 1);
} else {
setPhase('final');
}
};
useEffect(() => {
resetTimer();
}, [index, phase]);
useEffect(() => {
if (paused) {
if (startedAtRef.current !== null) {
elapsedRef.current += performance.now() - startedAtRef.current;
startedAtRef.current = null;
}
if (rafRef.current) cancelAnimationFrame(rafRef.current);
return;
}
startedAtRef.current = performance.now();
const tick = () => {
if (startedAtRef.current === null) return;
const elapsed = elapsedRef.current + performance.now() - startedAtRef.current;
const p = Math.min(elapsed / duration, 1);
setProgress(p);
if (elapsed >= duration) { goNext(); return; }
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
}, [index, phase, paused, duration]);
// Fire a global "beat-hero" pulse on phase change to slides → final
useEffect(() => {
if (phase === 'final') BeatBus.fire('beat-hero-final');
}, [phase]);
const current = HERO_SLIDES[index];
return (
setPaused(true)}
onMouseLeave={() => setPaused(false)}
ref={beatRef}
>
{phase === 'slides' ? (
{current.area}
Clara sí lo sabe
→
) : (
reCLARA
Si la tienes clara te mueves.
Conecta con
{/* ERP SAP */}
{/* Shopify */}
{/* Google Sheets */}
{/* Meta Ads */}
{/* Contabilidad */}
Contabilidad
{/* Vtex */}
{/* Más */}
)}
{phase === 'slides' && (
{HERO_SLIDES.map((_, i) => (
))}
)}
);
}
window.HeroBanner = HeroBanner;