{cols.map((c, i) => {
const aHere = (i === 0 && aPhase === 0) || (i === 1 && aPhase === 1);
const bHere = (i === 2 && bPhase === 0) || (i === 3 && bPhase === 1);
const total = staticCards[i].length + (aHere ? 1 : 0) + (bHere ? 1 : 0);
// Decide which slots in this column need a placeholder for moving cards
const showSlotA = i === 0 || i === 1;
const showSlotB = i === 2 || i === 3;
return (
(colRefs.current[i] = el)}
style={{
background: "rgba(255,255,255,.02)",
border: "1px solid rgba(255,255,255,.08)",
borderRadius: 10, padding: 12,
display: "flex", flexDirection: "column", gap: 8,
}}
>
{c}
{total}
{staticCards[i].map((card, j) => (
))}
{/* Invisible placeholder slots that reserve vertical space for the moving cards.
These guarantee the moving card position == real column layout position. */}
{showSlotA && (
(slotRefsA.current[i] = el)}
style={{ height: 64, visibility: "hidden" }} />
)}
{showSlotB && (
(slotRefsB.current[i] = el)}
style={{ height: 64, visibility: "hidden" }} />
)}
);
})}
);
};
// ────────────────────────────────────────────────────────────────────────────
// Step 3 — 24h radar clock with sweeping line + dynamic activity log
// ────────────────────────────────────────────────────────────────────────────
const Step3Visual = () => {
const allEvents = [
["02:14", "Lead Maria S.", "atendido"],
["04:47", "Lead João R.", "qualificado"],
["07:30", "Cliente B.", "follow-up"],
["11:02", "Reunião conf.", "agendada"],
["15:18", "Lead Ana C.", "atendido"],
["21:55", "Contrato", "fechado"],
["23:08", "Lead Pedro L.", "atendido"],
["01:30", "Reunião conf.", "agendada"],
];
const [head, setHead] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setHead(h => (h + 1) % allEvents.length), 2200);
return () => clearInterval(id);
}, []);
// Show last 6 events ending at head (newest at top)
const visible = Array.from({ length: 6 }, (_, i) => allEvents[(head - i + allEvents.length) % allEvents.length]);
return (
{/* clock at left */}
00
06
12
18
{/* radar sweep — pie slice rotating */}
24h
SEM PAUSA
{/* event dots, pulsing */}
{[3, 7, 11, 14, 18, 21, 23, 1].map((h, i) => {
const a = (h / 24) * Math.PI * 2 - Math.PI / 2;
const x = Math.cos(a) * 120;
const y = Math.sin(a) * 120;
return
{/* activity log */}
LIVE · OPERAÇÃO
{visible.map((row, i) => {
if (!row) return null;
const opacity = 1 - (i / 7);
const isFresh = i === 0;
return (
{isFresh &&
{row[0]}
{row[1]}
→ {row[2]}
);
})}
);
};
// ────────────────────────────────────────────────────────────────────────────
// Step 4 — Dashboard with animated number tickers + drawing chart line
// ────────────────────────────────────────────────────────────────────────────
function useTicker(target, opts = {}) {
const { duration = 1800, format = (v) => Math.round(v).toLocaleString("pt-BR") } = opts;
const [val, setVal] = React.useState(0);
React.useEffect(() => {
let raf, start;
const tick = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(eased * target);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, duration]);
return format(val);
}
const Step4Visual = () => {
const leads = useTicker(1284);
const conv = useTicker(31, { format: (v) => `${Math.round(v)}%` });
const tk = useTicker(8.4, { format: (v) => `R$ ${v.toFixed(1)}k` });
const rev = useTicker(247800, { format: (v) => `R$ ${Math.round(v).toLocaleString("pt-BR")}` });
// Chart key cycles every 12s to re-trigger draw animation
const [chartKey, setChartKey] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setChartKey(k => k + 1), 12000);
return () => clearInterval(id);
}, []);
return (
{/* top stats */}
{[
{ lbl: "Leads/mês", val: leads, delta: "+18%" },
{ lbl: "Conversão", val: conv, delta: "+9pp" },
{ lbl: "Ticket méd.", val: tk, delta: "+12%" },
].map((s, i) => (
{s.lbl}
{s.val}
{s.delta}
))}
{/* chart */}
Receita prevista — próximos 30 dias
{rev}
{[20, 50, 80, 110].map((y) => (
))}
);
};
// ────────────────────────────────────────────────────────────────────────────
// Generic icons
// ────────────────────────────────────────────────────────────────────────────
const PainIcon = ({ kind }) => {
const props = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
switch (kind) {
case "target": return
;
case "magnet": return
;
case "chart": return
;
case "hourglass": return
;
case "megaphone": return
;
case "bolt": return
;
default: return null;
}
};
const CheckMark = () => (
);
const Plus = () => (
);
Object.assign(window, {
ScriptFlourish, ImageSlot,
Step1Visual, Step2Visual, Step3Visual, Step4Visual,
PainIcon, CheckMark, Plus,
});