/* global React, useSession, asViewer, Icons, Button, Input, IconButton, Card, Heading, Text, Avatar, AvatarGroup, Badge, Progress, Checkbox, Divider, AppShell, navigate, DATA, MiniCourseCard, Select, Tabs */ const CatalogPage = () => { const signedIn = useSession(); const [query, setQuery] = React.useState(""); const [tracks, setTracks] = React.useState(new Set()); const [levels, setLevels] = React.useState(new Set()); const [langs, setLangs] = React.useState(new Set()); const [cert, setCert] = React.useState(false); const [sort, setSort] = React.useState("available"); const toggle = (set, setter, val) => { const n = new Set(set); n.has(val) ? n.delete(val) : n.add(val); setter(n); }; const filtered = React.useMemo(() => { let list = DATA.COURSES.map(c => asViewer(c, signedIn)).filter(c => { if (query && !(c.title + " " + c.subtitle + " " + c.track).toLowerCase().includes(query.toLowerCase())) return false; if (tracks.size && !tracks.has(c.track)) return false; if (levels.size && !levels.has(c.level)) return false; if (cert && !c.cert) return false; return true; }); // Courses open for enrolment first; "Próximamente" entries after them. list = [...list].sort((a, b) => (a.comingSoon ? 1 : 0) - (b.comingSoon ? 1 : 0)); if (sort === "new") list = [...list].sort((a, b) => (b.new ? 1 : 0) - (a.new ? 1 : 0)); return list; }, [query, tracks, levels, cert, sort, signedIn]); const activeFilters = tracks.size + levels.size + (cert ? 1 : 0); return (
{/* Landing hero — navy (same as the app bar), content-sized, illustration along the bottom */}

Formación para quienes protegen la dignidad humana

Cursos y programas en derechos humanos, acción humanitaria y construcción de paz, para profesionales, organizaciones y personas comprometidas con su defensa.

Ilustración de personas diversas de distintas culturas, edades y orígenes