/* ═══════════════════════════════════════════════════════════
Contador de entregas — o mostrador de marketing.
Lê o total acumulado em GET {API}/public/delivery-counter (backend do
cerrado-express: uma linha só no banco, somada uma vez por dia) e anima
os dígitos do zero até o total, rolo a rolo, no estilo caça-níquel.
Depende de site-primitives.jsx (CE, Eyebrow).
Uso: (seção pronta)
(só os rolos)
═══════════════════════════════════════════════════════════ */
var CE_API_URL = window.CE_API_URL || 'https://cerrado-express.onrender.com/api';
var CE_CONTADOR_CACHE = 'ce_entregas_total';
var CE_ROLO_H = 1.12; // altura de cada dígito, em "em" (deixa respiro para o glifo)
function ceLerCache() {
try {
var raw = localStorage.getItem(CE_CONTADOR_CACHE);
if (!raw) return null;
var j = JSON.parse(raw);
return typeof j.total === 'number' ? j.total : null;
} catch (e) { return null; }
}
function ceGravarCache(total) {
try { localStorage.setItem(CE_CONTADOR_CACHE, JSON.stringify({ total: total, em: Date.now() })); } catch (e) {}
}
function ceReduzMovimento() {
try { return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { return false; }
}
/* Busca o total no backend; devolve Promise. */
function ceBuscarTotal() {
return fetch(CE_API_URL + '/public/delivery-counter', { headers: { Accept: 'application/json' } })
.then(function(r) { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
.then(function(j) {
if (typeof j.total !== 'number') throw new Error('resposta sem total');
return j.total;
});
}
/* Um rolo (um dígito). Monta a faixa partindo do dígito anterior, dá `voltas`
completas e para no dígito novo; a faixa começa parada no primeiro item e,
quando `iniciar` liga, desliza até o último com uma curva que desacelera
como o rolo de um caça-níquel. */
function Rolo({ digito, de, voltas, duracao, iniciar, semMovimento }) {
var faixa = React.useMemo(function() {
var arr = [];
for (var d = de; d <= 9; d++) arr.push(d);
for (var v = 0; v < voltas; v++) for (var k = 0; k <= 9; k++) arr.push(k);
for (var f = 0; f <= digito; f++) arr.push(f);
return arr;
}, [digito, de, voltas]);
var fim = faixa.length - 1;
var st = React.useState(0), pos = st[0], setPos = st[1];
React.useEffect(function() {
if (semMovimento) { setPos(fim); return; }
setPos(0);
if (!iniciar) return;
// dois quadros: o navegador pinta a posição 0 antes de a transição começar
var r1 = requestAnimationFrame(function() { r1 = requestAnimationFrame(function() { setPos(fim); }); });
return function() { cancelAnimationFrame(r1); };
}, [faixa, fim, iniciar, semMovimento]);
var animando = pos > 0 && !semMovimento;
return (
{faixa.map(function(d, i) {
return {d};
})}
{/* sombra do cilindro: escurece o topo e a base do rolo */}
);
}
/* Rolo girando sem parar — usado enquanto o total ainda não chegou. */
function RoloGirando() {
var faixa = [0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9];
return (
{faixa.map(function(d, i) {
return {d};
})}
);
}
/* O painel de rolos. `valor` null = ainda carregando (rolos girando).
`iniciar` segura a animação até a seção aparecer na tela. */
function Odometro({ valor, iniciar, digitosCarregando, fontSize, color }) {
var anterior = React.useRef(0);
var atual = React.useRef(0);
if (valor != null && valor !== atual.current) { anterior.current = atual.current; atual.current = valor; }
var semMovimento = ceReduzMovimento();
var estilo = { fontFamily: CE.disp, fontWeight: 800, fontStyle: 'italic', fontVariantNumeric: 'tabular-nums',
fontSize: fontSize || 'clamp(46px, 9vw, 104px)', lineHeight: 1, color: color || CE.sun, letterSpacing: '-.01em',
display: 'inline-flex', alignItems: 'center', gap: '.07em', whiteSpace: 'nowrap' };
if (valor == null) {
var n = Math.max(3, digitosCarregando || 5), rolos = [];
for (var i = 0; i < n; i++) rolos.push();
return {rolos};
}
var str = Math.max(0, Math.round(valor)).toLocaleString('pt-BR');
var digitosDe = String(Math.max(0, Math.round(anterior.current))).split('').map(Number); // só os dígitos, sem separador
var totalDigitos = str.replace(/\D/g, '').length;
var idx = 0; // índice do dígito, da esquerda para a direita
return (
{str.split('').map(function(ch, i) {
if (!/\d/.test(ch)) {
return {ch};
}
var posEsq = idx++; // 0 = dígito mais à esquerda
var posDir = totalDigitos - 1 - posEsq; // 0 = unidade
var kDe = digitosDe.length - 1 - posDir; // dígito anterior na mesma casa
var de = kDe >= 0 ? digitosDe[kDe] : 0;
return (
);
})}
);
}
/* Seção pronta: faixa escura com o odômetro no centro. */
function ContadorEntregas({ eyebrow, titulo, legenda, id }) {
var cache = ceLerCache();
var stV = React.useState(cache), valor = stV[0], setValor = stV[1];
var stE = React.useState(false), falhou = stE[0], setFalhou = stE[1];
var stI = React.useState(false), visivel = stI[0], setVisivel = stI[1];
var ref = React.useRef(null);
// busca o total; se nada chegar em 25 s e não houver cache, a seção some
React.useEffect(function() {
var vivo = true, timer = null;
ceBuscarTotal().then(function(t) {
if (!vivo) return;
ceGravarCache(t); setValor(t); if (timer) clearTimeout(timer);
}).catch(function() { if (vivo && cache == null) setFalhou(true); });
if (cache == null) timer = setTimeout(function() { if (vivo) setFalhou(true); }, 25000);
return function() { vivo = false; if (timer) clearTimeout(timer); };
}, []);
// só começa a girar quando a seção entra na tela
React.useEffect(function() {
var el = ref.current;
if (!el || !('IntersectionObserver' in window)) { setVisivel(true); return; }
var io = new IntersectionObserver(function(entries) {
if (entries.some(function(e) { return e.isIntersecting; })) { setVisivel(true); io.disconnect(); }
}, { threshold: .35 });
io.observe(el);
return function() { io.disconnect(); };
}, []);
if (falhou && valor == null) return null;
return (