const { useState: useDashSt, useContext: useDashCtx } = React; /* ── Card dimensions (fixed per row type) ───────────────────────── */ const MODULE_CARD = { w: 148, h: 222 }; const LESSON_CARD = { w: 256, h: 144 }; /* ── Poster SVG backgrounds ─────────────────────────────────────── */ const posterBgs = [ ` `, ` `, ` `, ` `, ` `, ]; const svgUrl = idx => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(posterBgs[idx % posterBgs.length])}`; /* ── MODULE CARD (always poster shape) ──────────────────────────── */ const ModuleCard = ({ mod, modIdx, isSelected, completedLessons, onSelect }) => { const [hov, setHov] = useDashSt(false); const { w, h } = MODULE_CARD; const done = mod.lessons.filter(l => completedLessons.has(l.id)).length; const pct = Math.round((done / mod.lessons.length) * 100); const allDone = pct === 100; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: 'relative', flexShrink: 0, width: w, height: h, borderRadius: 10, overflow: 'hidden', cursor: 'pointer', border: `1.5px solid ${isSelected ? 'var(--gold)' : hov ? 'var(--border-h)' : 'var(--border)'}`, transform: hov && !isSelected ? 'scale(1.04)' : 'scale(1)', transition: 'transform 0.22s ease, border-color 0.18s', boxShadow: isSelected ? '0 0 0 1px var(--gold), 0 6px 24px rgba(0,0,0,0.5)' : hov ? '0 8px 28px rgba(0,0,0,0.45)' : 'none', }} >
{/* Module badge */}
M{mod.id}
{allDone && (
)} {/* Selected underline */} {isSelected && (
)}

{mod.title}

{allDone ? '✓ Concluído' : `${done} de ${mod.lessons.length} aulas`}

); }; /* ── LESSON CARD (always wide shape) ────────────────────────────── */ const LessonCard = ({ lesson, modIdx, isCompleted, isCurrent, onClick }) => { const [hov, setHov] = useDashSt(false); const { w, h } = LESSON_CARD; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: 'relative', flexShrink: 0, width: w, height: h, borderRadius: 8, overflow: 'hidden', cursor: 'pointer', border: `1px solid ${isCurrent ? 'var(--gold)' : hov ? 'var(--border-h)' : 'var(--border)'}`, transform: hov ? 'scale(1.03)' : 'scale(1)', transition: 'transform 0.2s ease, border-color 0.15s', boxShadow: hov ? '0 6px 22px rgba(0,0,0,0.45)' : 'none', }} >
{isCompleted && (
)} {isCurrent && (
ATUAL
)} {hov && (
)}

{lesson.title}

{lesson.duration}

); }; /* ── DASHBOARD ──────────────────────────────────────────────────── */ const Dashboard = ({ completedLessons, onEnterLesson, onViewCertificate }) => { const { user } = useDashCtx(UserCtx); const studentName = user?.name || COURSE.student; const firstName = studentName.split(' ')[0]; const pct = Math.round((completedLessons.size / COURSE.totalLessons) * 100); const nextLesson = COURSE.allLessons.find(l => !completedLessons.has(l.id)); const [selectedModId, setSelectedModId] = useDashSt( () => nextLesson ? nextLesson.moduleId : COURSE.modules[0].id ); const [animKey, setAnimKey] = useDashSt(0); const selectedMod = COURSE.modules.find(m => m.id === selectedModId); const handleSelectMod = id => { if (id === selectedModId) return; setSelectedModId(id); setAnimKey(k => k + 1); }; const stats = [ { label: 'Progresso geral', value: `${pct}%`, sub: `${completedLessons.size} de ${COURSE.totalLessons} aulas` }, { label: 'Aulas concluídas', value: completedLessons.size, sub: `de ${COURSE.totalLessons} no total` }, ]; return (
{/* WELCOME */}

Bem-vinda de volta

{firstName}

Continue de onde parou — você está indo muito bem.

{/* STATS + CONTINUE */}
{stats.map(s => (

{s.label}

{s.value}

{s.sub}

))} {nextLesson && (

Continuar aprendendo

{nextLesson.title}

Módulo {nextLesson.moduleId} · {nextLesson.duration}

)}
{/* ── ROW 1: MODULES (poster cards) ── */}

Módulos

{COURSE.modules.length} módulos
{COURSE.modules.map((mod, idx) => ( handleSelectMod(mod.id)} /> ))}
{/* ── ROW 2: LESSONS of selected module (wide cards) ── */} {selectedMod && (
{/* Arrow connector */}
Módulo {selectedMod.id}

{selectedMod.title}

{selectedMod.lessons.map((l, lIdx) => ( m.id === selectedModId)} isCompleted={completedLessons.has(l.id)} isCurrent={nextLesson && l.id === nextLesson.id} onClick={() => onEnterLesson({ ...l, moduleId: selectedMod.id, moduleTitle: selectedMod.title })} /> ))}
)} {/* CERTIFICATE BANNER */}
{pct === 100 ? (

Parabéns! Você concluiu o curso.

Seu certificado está pronto para download.

) : (

Certificado de conclusão

Disponível após concluir todas as {COURSE.totalLessons} aulas · {pct}% concluído

)}
); }; window.Dashboard = Dashboard;