);
}
/* Avatar de monograma — iniciales sobre fondo tintado de marca.
shape: "circle" | "tile". watermark dibuja la campana de fondo. */
const AV_SETS = [
["#2a211c", "#3a2e26", "#2DD4BF"],
["#0D9488", "#0F766E", "#ffffff"],
["#115E59", "#134E4A", "#ffffff"],
["#4a3f37", "#5e5046", "#F7F1E9"],
];
function Avatar({ name = "", shape = "circle", size, watermark }) {
/* si el nombre tiene foto registrada (repartidores con foto subida a
Supabase Storage), se muestra la foto en lugar de las iniciales;
window.TREEGO_FOTOS se llena al cargar los repartidores */
const foto = (window.TREEGO_FOTOS || {})[name];
const initials = name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
const idx = [...name].reduce((a, c) => a + c.charCodeAt(0), 0) % AV_SETS.length;
const [c1, c2, fg] = AV_SETS[idx];
return (
{foto ? (
) : (
{watermark && (
)}
{initials}
)}
);
}
/* Reveal en scroll: añade .in cuando entra al viewport */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll(".reveal:not(.in)");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
});
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
});
}
Object.assign(window, { Icon, Star, Placeholder, Avatar, useReveal });