// ModuleView — renders module content with sections, code blocks, tables function ModuleView({ module, currentSection, onSectionChange, previewMode = false }) { const [copied, setCopied] = React.useState(null); const [progress, setProgress] = React.useState(getProgress()); const sectionRefs = React.useRef({}); const exerciseRef = React.useRef(null); // Scroll to section React.useEffect(() => { if (!currentSection) return; if (currentSection === 'exercises') { if (exerciseRef.current) { const offset = exerciseRef.current.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: offset, behavior: 'smooth' }); } return; } if (sectionRefs.current[currentSection]) { const el = sectionRefs.current[currentSection]; const offset = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: offset, behavior: 'smooth' }); } }, [currentSection]); // Intersection observer React.useEffect(() => { if (!module) return; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) onSectionChange(entry.target.dataset.sectionId); }); }, { rootMargin: '-20% 0px -70% 0px' }); Object.values(sectionRefs.current).forEach(el => { if (el) observer.observe(el); }); return () => observer.disconnect(); }, [module]); function handleMarkComplete(sectionId) { markSectionComplete(module.id, sectionId); setProgress(getProgress()); } function handleCopy(code, id) { navigator.clipboard.writeText(code).then(() => { setCopied(id); setTimeout(() => setCopied(null), 1800); }); } if (!module) return null; const accentColor = module.accent === 'tech' ? '#3B82F6' : '#C9A84C'; const pct = getModuleProgress(module.id); const allDone = pct === 100; const completedSections = Object.keys(progress[module.id] || {}).length; // Estimate reading time (~200 words/min, code counts as 50 wpm equivalent) function readingTime(sec) { const words = (sec.content || '').split(/\s+/).length + (sec.code?.content || '').split(/\s+/).length * 0.25; return Math.max(1, Math.round(words / 200)); } return (
{/* Module header */}
Module {module.num}
{module.duration} {module.difficulty}

{module.title}

{module.subtitle}

{module.prereqs && (
PREREQS: {module.prereqs}
)} {/* Progress bar + stats */}
{allDone ? '✓ COMPLETE' : `${completedSections} / ${module.sections.length} sections`}
{/* Learning outcomes */}
Learning Outcomes — {module.outcomes.length} skills
    {module.outcomes.map((o, i) => (
  1. {o}
    2. ))}
{/* Sections */} {module.sections.map((sec, idx) => { const isDone = progress[module.id]?.[sec.id]; const mins = readingTime(sec); return (
sectionRefs.current[sec.id] = el} style={{ marginBottom:52, paddingTop:4 }}> {/* Section header */}
{String(idx+1).padStart(2,'0')}

{sec.title}

{mins} min
{sec.content && } {sec.table && } {sec.code && }
); })} {/* ── EXERCISES ── */} {module.exercises && module.exercises.length > 0 && (
Exercises
{module.exercises.filter((_,i) => { try { return JSON.parse(localStorage.getItem('bwc_exercises')||'{}')[`${module.id}_${i}`]; } catch { return false; } }).length}/{module.exercises.length} completed
Click any exercise to expand hints, starter code, and AI-powered code review.
{module.exercises.map((ex, i) => ( ))}
)} {/* Module completion card */} {pct === 100 && (
Module Complete ✓
You've completed all sections of {module.title}.
{!previewMode && MODULES_DATA.findIndex(m => m.id === module.id) < MODULES_DATA.length - 1 && ( )} {previewMode && ( Unlock modules 2–12 → )}
)} {/* Next/prev module nav */}
); } // ── Rich text renderer function RichText({ text, accentColor }) { const lines = text.split('\n'); const elements = []; let i = 0; while (i < lines.length) { const line = lines[i]; // Code fence if (line.trim().startsWith('```')) { const lang = line.trim().slice(3); const codeLines = []; i++; while (i < lines.length && !lines[i].trim().startsWith('```')) { codeLines.push(lines[i]); i++; } elements.push( 
          {codeLines.join('\n')}
); i++; continue; } // Blockquote — callout box if (line.startsWith('> ')) { const calloutLines = []; while (i < lines.length && lines[i].startsWith('> ')) { calloutLines.push(lines[i].slice(2)); i++; } const calloutText = calloutLines.join(' '); const isNote = calloutText.match(/^(NOTE|TIP|INFO):/i); const isWarn = calloutText.match(/^(WARNING|CAUTION|IMPORTANT):/i); const bg = isWarn ? '#1a0a00' : '#0a0d14'; const border = isWarn ? '#EF4444' : accentColor; const label = isWarn ? 'Warning' : 'Note'; elements.push(
{label}
); continue; } // Markdown table if (line.trim().startsWith('|')) { const tableLines = []; while (i < lines.length && lines[i].trim().startsWith('|')) { tableLines.push(lines[i]); i++; } const parseRow = (row) => row.split('|').filter((_,idx,arr) => idx>0 && idxc.trim()); const headers = parseRow(tableLines[0]); const dataRows = tableLines.slice(2).map(parseRow); elements.push(
{headers.map((h,hi) => )} {dataRows.map((row,ri) => ( {row.map((cell,ci) => )} ))}
{h}
{cell}
); continue; } // H3 if (line.startsWith('### ')) { elements.push(

{line.slice(4)}

); i++; continue; } // H2 if (line.startsWith('## ')) { elements.push(

{line.slice(3)}

); i++; continue; } // Bullets if (line.startsWith('- ') || line.startsWith('* ')) { const bulletLines = []; while (i < lines.length && (lines[i].startsWith('- ') || lines[i].startsWith('* '))) { bulletLines.push(lines[i].slice(2)); i++; } elements.push( ); continue; } // Numbered list if (/^\d+\.\s/.test(line)) { const numLines = []; while (i < lines.length && /^\d+\.\s/.test(lines[i])) { numLines.push(lines[i].replace(/^\d+\.\s/,'')); i++; } elements.push(
    {numLines.map((nl,ni) =>
    2. )}
); continue; } // Horizontal rule if (line.trim() === '---') { elements.push(
); i++; continue; } // Empty line if (line.trim() === '') { i++; continue; } // Paragraph elements.push(

); i++; } return
{elements}
; } function InlineFormat({ text, accentColor }) { const parts = []; let remaining = text, key = 0; while (remaining.length > 0) { const boldIdx = remaining.indexOf('**'); const codeIdx = remaining.indexOf('`'); if (boldIdx === -1 && codeIdx === -1) { parts.push({remaining}); break; } if ((boldIdx !== -1 && boldIdx < (codeIdx === -1 ? Infinity : codeIdx))) { const end = remaining.indexOf('**', boldIdx+2); if (end === -1) { parts.push({remaining}); break; } if (boldIdx > 0) parts.push({remaining.slice(0,boldIdx)}); parts.push({remaining.slice(boldIdx+2,end)}); remaining = remaining.slice(end+2); } else if (codeIdx !== -1) { const end = remaining.indexOf('`', codeIdx+1); if (end === -1) { parts.push({remaining}); break; } if (codeIdx > 0) parts.push({remaining.slice(0,codeIdx)}); parts.push({remaining.slice(codeIdx+1,end)}); remaining = remaining.slice(end+1); } else { parts.push({remaining}); break; } } return <>{parts}; } function CodeBlock({ code, language, id, copied, onCopy, accentColor }) { const lines = code.split('\n'); return (
{language}
{lines.length} lines
{/* Line numbers */}
{lines.map((_,i) =>
{i+1}
)} 
          {code}
); } function DataTable({ table, accentColor }) { return (
{table.headers.map((h,i) => )} {table.rows.map((row,ri) => ( {row.map((cell,ci) => )} ))}
{h}
{cell}
); } function NextModuleNav({ module, accentColor, previewMode = false }) { const idx = MODULES_DATA.findIndex(m => m.id === module.id); const prev = idx > 0 ? MODULES_DATA[idx-1] : null; const next = idx < MODULES_DATA.length-1 ? MODULES_DATA[idx+1] : null; if (previewMode) { return (
Full course
Modules 2–12 include agents, RAG, deployment, industry tracks, and more.
Get lifetime access →
); } return (
{prev && } {next && }
); } Object.assign(window, { ModuleView, RichText, InlineFormat, CodeBlock, DataTable, NextModuleNav });