Multi-week routines that fill your calendar. Pick one to preview and start.
{hasFilters && (
)}
{/* Search */}
setQ(e.target.value)} placeholder="Search programs…"
style={{ flex: 1, background: 'none', border: 'none', outline: 'none', color: 'var(--text)', fontFamily: 'var(--font-body)', fontSize: 15 }} />
{q && }
{/* Difficulty */}
Difficulty
{['All', ...LEVELS].map(f => setLevel(f)}>{f})}
{/* Plan tier */}
Plan
{['All', 'Free', 'Pro'].map(f => setAccess(f)}>{f})}
{/* Equipment 3-state */}
Equipment
Tap to require · tap again to exclude
{GEAR_TYPES.map(gear => {
const st = equipState[gear];
return (
);
})}
{hasFilters && (
{filtered.length} program{filtered.length !== 1 ? 's' : ''} match{filtered.length === 1 ? 'es' : ''} your filters
)}
{filtered.length === 0 ? (
No programs match your filters.
) : showGrouped ? (
goals.map(goal => (
{GOAL_LABEL[goal] || goal}
{filtered.filter(p => p.goal === goal).length}
{filtered.filter(p => p.goal === goal).map(card)}
))
) : (
{filtered.map(card)}
)}
);
}
// ── Program detail screen ────────────────────────────────────
function ProgramDetail({ program, activeProgram, startProgram, endProgram, go, entitled, openPaywall, todayKey }) {
const c = useTheme();
const [confirm, setConfirm] = React.useState(null); // 'start' | 'end' | null
if (!program) { React.useEffect(() => go('plan'), []); return null; }
const isActive = activeProgram && activeProgram.id === program.id;
const otherActive = activeProgram && activeProgram.id !== program.id;
const locked = program.pro && !entitled;
const eq = programEquipment(program);
const prog = isActive ? programProgress(activeProgram, todayKey) : null;
const weeks = program.weeks || 8;
const throughKey = addDaysKey(todayKey, weeks * 7 - 1);
const cycle = program.split;
const cycleLen = cycle.length;
const weekChunks = [];
for (let i = 0; i < cycleLen; i += 7) weekChunks.push(cycle.slice(i, i + 7));
const doStart = () => { setConfirm(null); startProgram(program); go('calendar'); };
const doEnd = () => { setConfirm(null); endProgram(); };
const dayBadge = (txt, accent) => (
{/* Header */}
{program.title}
{program.level} · {program.daysPerWeek} days/week · {weeks} weeks
{program.blurb}
{eq.map(g => (
{g}
))}
{/* Active progress */}
{isActive && prog && (
{prog.done ? 'Program complete' : 'In progress'}
{prog.done ? 'Finished' : 'Week ' + prog.week + ' / ' + prog.totalWeeks}
{!prog.done && (
)}
)}
{/* Weekly split */}
{cycleLen > 7 ? 'Training cycle' : 'Your training week'}
{weekChunks.map((chunk, wi) => (
{weekChunks.length > 1 && (
Week {wi + 1}
)}
{chunk.map((slot, di) => {
const dayNum = wi * 7 + di + 1;
if (slot === 'rest') {
return (
{dayBadge('Day ' + dayNum, false)}
Rest day
);
}
const w = program.workouts[slot];
if (!w) return null;
return (
{dayBadge('Day ' + dayNum, true)}
{w.title}
{w.subtitle} · {w.exercises.length} exercises
{w.exercises.map((e, ei) => {
const ex = window.exById ? window.exById(e.id) : { name: e.id };
const sets = e.sets.length;
const reps = e.sets[0] ? e.sets[0].reps : 0;
return (
{ex.name}
{ex.muscle || ''}{ex.gear ? ' · ' + ex.gear : ''}
{sets}×{reps}
);
})}
);
})}
))}
{/* Action */}
{isActive ? (
) : locked ? (
} onClick={() => openPaywall && openPaywall('plans')}>Unlock with Pro
) : (
} onClick={() => setConfirm('start')}>Add to Calendar
)}
{!isActive && !locked && (
Starts today · fills {weeks} weeks · logged days are kept
)}
{/* Confirm overlay */}
{confirm && (
setConfirm(null)}>
{confirm === 'start' ? (
{otherActive ? 'Switch program?' : 'Add to calendar?'}
{otherActive && }
Add to Calendar
) : (
End this program?
Upcoming program days from today onward will be cleared from your calendar. Workouts you\u2019ve already logged stay in your history.
)}
)}