const { createContext, useContext } = React;
const ThemeCtx = createContext({ theme: 'dark', toggleTheme: () => {} });
const TweaksCtx = createContext({ cardShape: 'poster', accent: '#C9A800', typeVoice: 'modern' });
const UserCtx = createContext({ user: null, logout: () => {} });
/* Helper para iniciais (usado no avatar) */
const getInitials = (name = '') =>
name.trim().split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase();
/* ── ICONS ─────────────────────────────────────────────────────── */
const IconPlay = ({ size = 16, color = 'currentColor' }) => (
);
const IconCheck = ({ size = 14, color = 'currentColor' }) => (
);
const IconSun = ({ size = 17 }) => (
);
const IconMoon = ({ size = 17 }) => (
);
const IconArrowLeft = ({ size = 16 }) => (
);
const IconAward = ({ size = 24, color = 'currentColor' }) => (
);
const IconChevron = ({ size = 14, dir = 'right' }) => {
const deg = { right: 0, down: 90, left: 180, up: 270 }[dir] || 0;
return (
);
};
const IconDownload = ({ size = 15 }) => (
);
const IconLogout = ({ size = 15 }) => (
);
/* ── PROGRESS BAR ───────────────────────────────────────────────── */
const ProgressBar = ({ value = 0, height = 3, style: s = {} }) => (
);
/* ── PROGRESS RING ──────────────────────────────────────────────── */
const ProgressRing = ({ value = 0, size = 72, stroke = 5 }) => {
const r = (size - stroke) / 2;
const circ = 2 * Math.PI * r;
const offset = circ - (value / 100) * circ;
return (
);
};
/* ── USER MENU ──────────────────────────────────────────────────── */
const UserMenu = ({ size = 33 }) => {
const { user, logout } = useContext(UserCtx);
const [open, setOpen] = React.useState(false);
const wrapRef = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const onDoc = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [open]);
if (!user) return null;
const initials = getInitials(user.name);
return (
{open && (
)}
);
};
/* ── NAV ────────────────────────────────────────────────────────── */
const Nav = ({ screen, onBack, completedCount, totalLessons }) => {
const { theme, toggleTheme } = useContext(ThemeCtx);
const pct = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;
return (
);
};
Object.assign(window, {
ThemeCtx, TweaksCtx, UserCtx, getInitials,
ProgressBar, ProgressRing, Nav, UserMenu,
IconPlay, IconCheck, IconSun, IconMoon, IconArrowLeft,
IconAward, IconChevron, IconDownload, IconLogout,
});