);
}
// ─── Return-to-habit card ────────────────────────────────────────────────────
// Shown on Inicio when it's been 3+ days since the last recorded session.
// Warm, never guilt-tripping. Dismissable — hidden for another 3 days if closed.
const HABIT_DISMISS_KEY = 'atlas.habit.dismissedAt';
function ReturnToHabitCard({ navigate, compact }) {
const { state } = useStore();
const last = (state.log || [])[0] || null;
const [hidden, setHidden] = React.useState(false);
const days = last?.dateTs ? Math.floor((Date.now() - last.dateTs) / 86400000) : null;
const dismissedAt = React.useMemo(() => {
try { return Number(localStorage.getItem(HABIT_DISMISS_KEY) || 0); } catch { return 0; }
}, []);
const recentlyDismissed = dismissedAt && (Date.now() - dismissedAt) < 3 * 86400000;
if (hidden || days === null || days < 3 || recentlyDismissed) return null;
const activeRoutine = (() => { try { return JSON.parse(localStorage.getItem('atlas.routine.active.v1') || 'null'); } catch { return null; } })();
const hasRoutine = activeRoutine && Array.isArray(activeRoutine.sessions) && activeRoutine.sessions.length;
// "el martes" within a week, otherwise "hace N días"
let when;
try {
when = days <= 7
? `el ${new Date(last.dateTs).toLocaleDateString('es-ES', { weekday: 'long' })}`
: `hace ${days} días`;
} catch { when = `hace ${days} días`; }
function dismiss() {
try { localStorage.setItem(HABIT_DISMISS_KEY, String(Date.now())); } catch {}
setHidden(true);
}
function go() {
if (hasRoutine) { navigate('/rutinas'); }
else { navigate('/coach'); }
}
return (
DE VUELTA
Tu última sesión fue {when}.
Cada vuelta cuenta más que cualquier racha. ¿Retomamos hoy?
);
}
// ─── Mobile Inicio dashboard ─────────────────────────────────────────────────
// One-column, utility-ordered: next workout / my routine → streak + recent
// sessions → Aula. Progreso and Aula live here since they're not in the tab bar.
function MdCard({ children, pad = 16 }) {
return (
{children}
);
}
function MdLabel({ children }) {
return
{children}
;
}
function MdAction({ label, onClick, primary, green, full }) {
return (
);
}
// ── One of the three clear "paths" offered on Inicio ──────────────────────────
function HomePathCard({ emoji, title, desc, onClick }) {
const [hover, setHover] = React.useState(false);
return (
);
}
// ── Featured carousel ─────────────────────────────────────────────────────────
// Fills the empty desktop space below the paths with a rotating, hand-navigable
// deck of REAL content: featured preset routines, the newest Aula article, a
// Builder shortcut, the user's next workout / activity / saved routines. Slides
// are built from live data, so new articles or routines surface here automatically.
// One category → an accent gradient for slides without their own photo.
const HF_GRAD = {
builder: ['#0f2744', '#2a6fdb'],
article: ['#120a2e', '#6d28d9'],
next: ['#08351f', '#16a34a'],
activity: ['#0F1A2E', '#1a4fa0'],
routines: ['#091a09', '#177a2e'],
};
// La portada del artículo destacado se lee de la ÚNICA fuente de verdad de las
// portadas del Aula (window.AULA_PHOTOS): misma categoría → misma imagen que en
// el Aula. Si la categoría no tiene foto, el slide muestra su degradado.
function hfArticlePhoto(category) {
try { return (window.AULA_PHOTOS || {})[category] || null; } catch (e) { return null; }
}
function homeBuildSlides({ presets, articles, state, activeRoutine, navigate }) {
const slides = [];
const savedRoutines = state.savedRoutines || [];
const log = state.log || [];
const hasRoutine = activeRoutine && Array.isArray(activeRoutine.sessions) && activeRoutine.sessions.length;
// Next workout — top priority when the user has an active routine.
if (hasRoutine) {
slides.push({ key:'next', kind:'next', icon:'▶', grad:HF_GRAD.next, badge:'Continúa',
title: activeRoutine.name || 'Tu rutina', subtitle:`${activeRoutine.sessions.length} ${activeRoutine.sessions.length===1?'sesión':'sesiones'} · listo para entrenar`,
cta:'Entrenar →', onClick:() => navigate('/rutinas') });
}
// Newest published Aula article (marked "Nuevo" when recent).
const art = (articles || [])[0];
if (art) {
const isNew = window.ArticlesService && window.ArticlesService.isNew ? window.ArticlesService.isNew(art) : false;
slides.push({ key:'art-'+art.id, kind:'article', icon:'📖', grad:HF_GRAD.article, badge: isNew ? 'Nuevo' : 'Aula', isNew,
image: art.coverImage || hfArticlePhoto(art.category),
title: art.title, subtitle:`${art.readTime || 6} min de lectura${art.subtitle ? ' · '+art.subtitle : ''}`,
cta:'Leer en el Aula →', onClick:() => navigate('/aula') });
}
// Featured preset routines — multi-day splits first, then the rest.
const order = ['preset-ppl-avanzado','preset-fullbody-principiante','preset-upperlower-intermedio'];
const featured = [...(presets || [])].sort((a,b) => {
const ia = order.indexOf(a.id), ib = order.indexOf(b.id);
return (ia<0?99:ia) - (ib<0?99:ib);
}).slice(0, 3);
featured.forEach(pr => {
const days = Array.isArray(pr.days) ? pr.days.length : 0;
slides.push({ key:'pr-'+pr.id, kind:'preset', icon:'🗂️', image:pr.image, grad:[pr.accent?.from||'#0f2744', pr.accent?.to||'#2a6fdb'],
badge: days>1 ? `${days} días` : (pr.objective || 'Rutina'),
title: pr.name, subtitle: pr.subtitle || '',
cta:'Ver rutina →', onClick:() => { try { localStorage.setItem('atlas.preset.open', pr.id); } catch {} navigate('/plantillas'); } });
});
// Builder shortcut — always available.
slides.push({ key:'builder', kind:'builder', icon:'🛠️', grad:HF_GRAD.builder, badge:'Builder',
title:'Crea tu rutina', subtitle:'Constrúyela ejercicio a ejercicio, con la ciencia detrás',
cta:'Abrir Builder →', onClick:() => navigate('/builder') });
// The user's own routines, if any.
if (savedRoutines.length) {
slides.push({ key:'routines', kind:'routines', icon:'📁', grad:HF_GRAD.routines, badge:'Tuyas',
title:'Mis rutinas', subtitle:`${savedRoutines.length} ${savedRoutines.length===1?'rutina guardada':'rutinas guardadas'}`,
cta:'Abrir →', onClick:() => navigate('/rutinas') });
}
// A nudge back to progress when there's history.
if (log.length) {
const aw = (typeof computeActiveWeeks === 'function') ? computeActiveWeeks(log).streak : 0;
slides.push({ key:'activity', kind:'activity', icon:'📈', grad:HF_GRAD.activity, badge:'Tu progreso',
title:'Revisa tu progreso', subtitle:`${state.sessions?.completed||log.length} sesiones${aw ? ' · '+aw+(aw===1?' semana activa':' semanas activas') : ''}`,
cta:'Ver progreso →', onClick:() => navigate('/progreso') });
}
return slides;
}
function HomeFeatSlide({ slide, isMobile, height }) {
const [imgOk, setImgOk] = React.useState(true);
const showImg = slide.image && imgOk;
const [from, to] = slide.grad || ['#0f2744', '#2a6fdb'];
return (
);
}
// Featured deck on Inicio. Native horizontal scroll (scroll-snap) so a finger
// swipe on mobile and a mouse drag on desktop both work, without blocking the
// page's vertical scroll (a mostly-vertical gesture keeps scrolling the page).
// Auto-advances every ~5s in a loop; pauses on interaction/hover, when the
// carousel is off-screen or the tab is backgrounded, and under reduced-motion.
function HomeFeaturedCarousel({ slides, isMobile }) {
const trackRef = React.useRef(null);
const n = slides.length;
const height = isMobile ? 188 : 360;
const reduce = React.useMemo(() => { try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; } }, []);
const [idx, setIdx] = React.useState(0);
// Autoplay gating — refs so the interval reads fresh values without resetting.
const interacting = React.useRef(false); // recent touch/drag/arrow/dot action
const hovering = React.useRef(false);
const visible = React.useRef(true);
const resumeT = React.useRef(null);
const scrollToIdx = React.useCallback((i, smooth = true) => {
const el = trackRef.current; if (!el) return;
el.scrollTo({ left: i * el.clientWidth, behavior: smooth && !reduce ? 'smooth' : 'auto' });
}, [reduce]);
// Active-dot tracking from the real scroll position.
const onScroll = React.useCallback(() => {
const el = trackRef.current; if (!el || !el.clientWidth) return;
const i = Math.round(el.scrollLeft / el.clientWidth);
setIdx(prev => (prev === i ? prev : Math.max(0, Math.min(i, n - 1))));
}, [n]);
// Interaction → pause autoplay now, resume after a few quiet seconds.
const bump = React.useCallback(() => {
interacting.current = true;
if (resumeT.current) clearTimeout(resumeT.current);
resumeT.current = setTimeout(() => { interacting.current = false; }, 6000);
}, []);
// Autoplay loop.
React.useEffect(() => {
if (reduce || n < 2) return;
const t = setInterval(() => {
if (interacting.current || hovering.current || !visible.current || document.hidden) return;
const el = trackRef.current; if (!el || !el.clientWidth) return;
const cur = Math.round(el.scrollLeft / el.clientWidth);
el.scrollTo({ left: ((cur + 1) % n) * el.clientWidth, behavior: 'smooth' });
}, 5000);
return () => clearInterval(t);
}, [reduce, n]);
// Pause when the carousel scrolls out of view.
React.useEffect(() => {
const el = trackRef.current; if (!el) return;
let io;
try { io = new IntersectionObserver(([e]) => { visible.current = e.isIntersecting; }, { threshold: 0.4 }); io.observe(el); } catch {}
return () => { if (io) io.disconnect(); };
}, []);
// Keep the index valid and the scroll pinned to start as data loads in.
React.useEffect(() => { if (idx > n - 1) { setIdx(0); scrollToIdx(0, false); } }, [n]);
// Desktop click-drag to scroll; suppress the slide's click after a real drag.
const drag = React.useRef({ active:false, startX:0, startScroll:0, moved:false });
const suppressClick = React.useRef(false);
const onPointerDown = (e) => {
bump();
if (!isMobile && e.pointerType === 'mouse' && e.button === 0 && trackRef.current) {
drag.current = { active:true, startX:e.clientX, startScroll:trackRef.current.scrollLeft, moved:false };
}
};
const onPointerMove = (e) => {
const d = drag.current; if (!d.active) return;
const dx = e.clientX - d.startX;
if (Math.abs(dx) > 4) d.moved = true;
trackRef.current.scrollLeft = d.startScroll - dx;
};
const endDrag = () => {
const el = trackRef.current;
if (drag.current.active && drag.current.moved && el) {
suppressClick.current = true;
el.scrollTo({ left: Math.round(el.scrollLeft / el.clientWidth) * el.clientWidth, behavior: reduce ? 'auto' : 'smooth' });
}
drag.current.active = false;
};
const onClickCapture = (e) => { if (suppressClick.current) { e.stopPropagation(); e.preventDefault(); suppressClick.current = false; } };
if (!n) return null;
const go = (d) => { bump(); const el = trackRef.current; if (!el) return; const cur = Math.round(el.scrollLeft / el.clientWidth); scrollToIdx((cur + d + n) % n); };
const arrow = (dir) => (
);
return (
{/* Mobile: arrows below (thumb-reachable), since side arrows are hidden */}
{n > 1 && isMobile && (
)}
);
}
// ── Inicio — a warm entry: welcome + one clear train action + three free paths.
// Heavy analytics (Atlas Score, weekly volume, the 4-module system, detailed
// metrics) live in Perfil/Progreso, not here. "Próximo entrenamiento" and
// "Últimas sesiones" are kept but pushed below the paths.
// Tarjeta destacada en Inicio → /coach-online. Navy con botón azul, coherente
// con el resto de Inicio. Nunca pop-up ni banner fijo; se muestra solo aquí.
function HomeCoachCard({ navigate, isMobile }) {
// Servicio de coaching desactivado tras el flag → no se muestra la tarjeta.
if (!(typeof ATLAS_FEATURE === 'function' && ATLAS_FEATURE('FEATURE_COACH_ONLINE'))) return null;
return (
Entrena con un coach
Atlas te da el plan. Un entrenador lo adapta a ti: te evalúa, te guía en las sesiones y ajusta tu progreso.
{/* Resume a paused session, if any */}
{/* Warm welcome */}
Hola{userName ? `, ${userName}` : ''} 👋
¿Entrenamos?
{/* One big, clear train action — only when there's a routine to train */}
{hasRoutine ? (
) : recent.length ? (
) : null}
{/* Three free paths — the user chooses, nothing is forced */}
{/* Coaching online — destacada, justo debajo del bloque principal */}
{/* Featured carousel — fills the desktop space with live content */}
{/* ── Secondary, below the fold: next workout + recent sessions ── */}
{hasRoutine ? (
Tu próximo entrenamiento
);
}
// ─── Inicio ───────────────────────────────────────────────────────────────────
// A warm, focused entry (welcome + train action + three free paths). The
// marketing landing (Hero / brand story / the 4-module "Sistema Atlas" / etc.)
// and the heavy analytics are intentionally NOT here — Inicio should read like a
// welcome, not a control panel. Same on mobile and desktop.
function HomePage() {
return ;
}
// Return-to-habit banner for desktop Inicio, in a container matching the context card.
function DesktopHabitBanner() {
const { navigate } = useRoute();
return (