code-crispies/src/app.js

import { LessonEngine } from "./impl/LessonEngine.js";
import { CodeEditor, crispyEditorTheme } from "./impl/CodeEditor.js";
import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar, renderDifficultyBadge } from "./helpers/renderer.js";
import { loadModules } from "./config/lessons.js";
import { initI18n, t, getLanguage, setLanguage, applyTranslations } from "./i18n.js";
import { parseHash, updateHash, replaceHash, getShareableUrl, RouteType, navigateTo } from "./helpers/router.js";
import { sections, getSection, getModuleSection, getModulesBySection } from "./config/sections.js";
import { getRandomTemplate } from "./config/playground-templates.js";
import { initAuth, handleOAuthCallback } from "./auth.js";

// CodeMirror imports for syntax highlighting
import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";

// Analytics tracking helper (Umami v2.13.2)
function track(eventName, eventData = {}) {
	if (typeof umami !== "undefined" && umami.track) {
		umami.track(eventName, eventData);
		console.debug("Track:", eventName, eventData);
	} else {
		console.debug("Track blocked (umami unavailable):", eventName, eventData);
	}
}

// Simplified state - LessonEngine now manages lesson state and progress
const state = {
	userSettings: {
		disableFeedbackErrors: false,
		skipResetCodeConfirmation: false
	},
	showExpected: false,
	animationTimeout: null,
	lastPlaygroundTemplate: null
};

// Track CodeMirror views for cleanup
let sectionCodeViews = [];

// Read-only CodeMirror theme for code examples
const readOnlyTheme = EditorView.theme(
	{
		"&": {
			fontSize: "13px"
		},
		".cm-content": {
			fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
			padding: "12px 0"
		},
		".cm-line": {
			padding: "0 12px"
		},
		".cm-gutters": {
			display: "none"
		}
	},
	{ dark: true }
);

/**
 * Highlight all code blocks in the section page using CodeMirror
 */
function highlightSectionCodeBlocks() {
	// Clean up previous views
	sectionCodeViews.forEach((view) => view.destroy());
	sectionCodeViews = [];

	// Find all code blocks in section page
	const codeBlocks = elements.sectionIntro?.querySelectorAll(".code-block") || [];

	codeBlocks.forEach((block) => {
		const pre = block.querySelector("pre");
		const code = block.querySelector("code");
		if (!pre || !code) return;

		const content = code.textContent || "";

		// Detect language from content
		const isHTML = content.includes("<") && content.includes(">");
		const langExtension = isHTML ? html() : css();

		// Create read-only CodeMirror view
		const state = EditorState.create({
			doc: content,
			extensions: [langExtension, crispyEditorTheme, readOnlyTheme, EditorState.readOnly.of(true), EditorView.lineWrapping]
		});

		const view = new EditorView({
			state,
			parent: block
		});

		// Remove original pre/code
		pre.remove();

		sectionCodeViews.push(view);
	});
}

// DOM elements - updated for new layout
const elements = {
	// Header
	menuBtn: document.getElementById("menu-btn"),
	logoLink: document.getElementById("logo-link"),
	langSelect: document.getElementById("lang-select"),
	helpBtn: document.getElementById("help-btn"),
	mainNav: document.getElementById("main-nav"),

	// Page containers
	landingPage: document.getElementById("landing-page"),
	sectionPage: document.getElementById("section-page"),
	gameLayout: document.getElementById("main-content"),

	// Section page elements
	sectionTitle: document.getElementById("section-title"),
	sectionDescription: document.getElementById("section-description"),
	sectionProgressFill: document.getElementById("section-progress-fill"),
	sectionProgressText: document.getElementById("section-progress-text"),
	sectionIntro: document.getElementById("section-intro"),

	// Reference page elements
	referencePage: document.getElementById("reference-page"),
	referenceNav: document.getElementById("reference-nav"),
	referenceBody: document.getElementById("reference-body"),

	// Left panel
	instructionsSection: document.querySelector(".instructions"),
	editorSection: document.querySelector(".editor-section"),
	modulePill: document.getElementById("module-pill"),
	moduleName: document.querySelector(".module-name"),
	lessonTitle: document.getElementById("lesson-title"),
	lessonTitleRow: document.querySelector(".lesson-title-row"),
	lessonDescription: document.getElementById("lesson-description"),
	taskInstruction: document.getElementById("task-instruction"),
	codeInput: document.getElementById("code-input"),
	runBtn: document.getElementById("run-btn"),
	undoBtn: document.getElementById("undo-btn"),
	redoBtn: document.getElementById("redo-btn"),
	resetCodeBtn: document.getElementById("reset-code-btn"),
	randomTemplateBtn: document.getElementById("random-template-btn"),
	hintArea: document.getElementById("hint-area"),
	editorContent: document.querySelector(".editor-content"),
	codeEditor: document.querySelector(".code-editor"),

	// Right panel
	previewArea: document.getElementById("preview-area"),
	showExpectedBtn: document.getElementById("show-expected-btn"),
	expectedOverlay: document.getElementById("expected-overlay"),
	previewWrapper: document.querySelector(".preview-wrapper"),
	previewSection: document.querySelector(".preview-section"),
	prevBtn: document.getElementById("prev-btn"),
	nextBtn: document.getElementById("next-btn"),
	gameControls: document.querySelector(".game-controls"),
	levelIndicator: document.getElementById("level-indicator"),
	headerLevelPill: document.getElementById("header-level-pill"),

	// Sidebar
	sidebarDrawer: document.getElementById("sidebar-drawer"),
	sidebarBackdrop: document.getElementById("sidebar-backdrop"),
	closeSidebar: document.getElementById("close-sidebar"),
	moduleList: document.getElementById("module-list"),
	footerLessonLinks: document.getElementById("footer-lesson-links"),
	refFooterLessonLinks: document.getElementById("ref-footer-lesson-links"),
	sectionFooterLessonLinks: document.getElementById("section-footer-lesson-links"),
	progressFill: document.getElementById("progress-fill"),
	progressCurrent: document.getElementById("progress-current"),
	progressTotal: document.getElementById("progress-total"),
	milestonesContainer: document.getElementById("milestones"),
	resetBtn: document.getElementById("reset-btn"),
	disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),

	// Dialogs
	helpDialog: document.getElementById("help-dialog"),
	helpDialogClose: document.getElementById("help-dialog-close"),
	resetDialog: document.getElementById("reset-dialog"),
	resetDialogClose: document.getElementById("reset-dialog-close"),
	cancelReset: document.getElementById("cancel-reset"),
	confirmReset: document.getElementById("confirm-reset"),
	resetCodeDialog: document.getElementById("reset-code-dialog"),
	resetCodeDialogClose: document.getElementById("reset-code-dialog-close"),
	cancelResetCode: document.getElementById("cancel-reset-code"),
	confirmResetCode: document.getElementById("confirm-reset-code"),
	resetCodeDontShow: document.getElementById("reset-code-dont-show"),

	// Share dialog
	shareBtn: document.getElementById("share-btn"),
	shareDialog: document.getElementById("share-dialog"),
	shareDialogClose: document.getElementById("share-dialog-close"),
	shareUrlInput: document.getElementById("share-url-input"),
	copyUrlBtn: document.getElementById("copy-url-btn"),
	copyFeedback: document.getElementById("copy-feedback")
};

// Initialize the lesson engine - now the single source of truth
const lessonEngine = new LessonEngine();

// Code editor instance (initialized later)
let codeEditor = null;
let currentMode = "css";

// ================= SIDEBAR FUNCTIONS =================

// Track element that opened sidebar for focus return
let sidebarTrigger = null;

function openSidebar() {
	track("sidebar_open");
	// Store trigger element for focus return
	sidebarTrigger = document.activeElement;

	elements.sidebarDrawer.classList.add("open");
	elements.sidebarBackdrop.classList.add("visible");

	// Move focus to close button for keyboard users
	elements.closeSidebar.focus();
}

function closeSidebar() {
	elements.sidebarDrawer.classList.remove("open");
	elements.sidebarBackdrop.classList.remove("visible");

	// Return focus to trigger element
	if (sidebarTrigger && typeof sidebarTrigger.focus === "function") {
		sidebarTrigger.focus();
		sidebarTrigger = null;
	}
}

// ================= EXPECTED RESULT TOGGLE =================

function toggleExpectedResult() {
	state.showExpected = !state.showExpected;

	const engineState = lessonEngine.getCurrentState();
	track("expected_toggle", {
		show: state.showExpected,
		module: engineState.module?.id,
		lesson: engineState.lessonIndex
	});

	if (state.showExpected) {
		elements.expectedOverlay.classList.add("visible");
		elements.showExpectedBtn.textContent = t("hideExpected");
		elements.showExpectedBtn.classList.add("btn-primary");
	} else {
		elements.expectedOverlay.classList.remove("visible");
		elements.showExpectedBtn.textContent = t("showExpected");
		elements.showExpectedBtn.classList.remove("btn-primary");
	}
}

// ================= LANGUAGE TOGGLE =================

function changeLanguage(newLang) {
	track("language_change", { language: newLang });

	// Add transition class before any updates
	elements.editorSection?.classList.add("transitioning");

	setLanguage(newLang);
	applyTranslations();

	// Reload lessons in new language
	const engineState = lessonEngine.getCurrentState();
	const currentModuleId = engineState.module?.id;
	const currentLessonIndex = engineState.lessonIndex;

	const modules = loadModules(newLang);
	lessonEngine.setModules(modules);
	renderModuleList(elements.moduleList, modules, selectModule, selectLesson);

	// Restore position in current module/lesson
	if (currentModuleId) {
		lessonEngine.setModuleById(currentModuleId);
		lessonEngine.setLessonByIndex(currentLessonIndex);
		loadCurrentLesson();
	}

	updateProgressDisplay();

	// Remove transition class after all updates
	requestAnimationFrame(() => {
		elements.editorSection?.classList.remove("transitioning");
	});
}

// ================= HINT SYSTEM =================

function showHint(message, step, total, isSuccess = false) {
	const hintClass = isSuccess ? "hint hint-success" : "hint";
	elements.hintArea.innerHTML = `
		<div class="${hintClass}">
			<span class="hint-progress">${step}/${total}</span>
			<span class="hint-message">${message}</span>
		</div>
	`;
}

function clearHint() {
	elements.hintArea.innerHTML = "";
}

function showSuccessHint(message) {
	elements.hintArea.innerHTML = `
		<div class="hint hint-success">
			<span class="hint-progress">✓</span>
			<span class="hint-message">${message}</span>
		</div>
	`;
}

// ================= PROGRESS DISPLAY =================

// Track last milestone to detect new achievements
let lastMilestoneReached = 0;

function updateProgressDisplay() {
	const stats = lessonEngine.getProgressStats();

	// Update progress bar - shows progress towards next milestone
	// CSS variable scales gradient so only first X% of colors show
	const progressPercent = stats.progressToNext || 1;
	elements.progressFill.style.width = `${progressPercent}%`;
	elements.progressFill.style.setProperty('--progress-percent', progressPercent);

	// Update progress current - show progress towards next milestone
	elements.progressCurrent.textContent = `${stats.totalCompleted}/${stats.nextMilestone}`;

	// Update progress total - show total lessons
	elements.progressTotal.textContent = t("progressTotal", {
		total: stats.totalLessons
	});

	// Update milestone indicators
	if (elements.milestonesContainer) {
		const milestoneEls = elements.milestonesContainer.querySelectorAll(".milestone");
		milestoneEls.forEach((el) => {
			const value = parseInt(el.dataset.value, 10);
			el.classList.remove("reached", "current", "next", "just-reached");

			if (stats.milestonesReached.includes(value)) {
				el.classList.add("reached");
				// Check if this milestone was just reached
				if (value > lastMilestoneReached && value === stats.currentMilestone) {
					el.classList.add("just-reached");
				}
			} else if (value === stats.nextMilestone) {
				el.classList.add("next");
			}

			if (value === stats.currentMilestone) {
				el.classList.add("current");
			}
		});
	}

	// Update last milestone for celebration detection
	if (stats.currentMilestone > lastMilestoneReached) {
		lastMilestoneReached = stats.currentMilestone;
	}
}

// ================= USER SETTINGS =================

function loadUserSettings() {
	const savedSettings = localStorage.getItem("codeCrispies.settings");
	if (savedSettings) {
		try {
			const settings = JSON.parse(savedSettings);
			state.userSettings = { ...state.userSettings, ...settings };
			elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
		} catch (e) {
			console.error("Error loading user settings:", e);
		}
	}
}

function saveUserSettings() {
	localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
}

// ================= LESSON CACHE =================

let cachedUserCode = null;

function restoreLessonCache() {
	try {
		const cached = localStorage.getItem("codeCrispies.lessonCache");
		if (cached) {
			const data = JSON.parse(cached);
			if (data.moduleTitle && elements.moduleName) {
				elements.moduleName.textContent = data.moduleTitle;
				// Remove data-i18n so applyTranslations won't overwrite
				elements.moduleName.removeAttribute("data-i18n");
			}
			if (data.lessonTitle && elements.lessonTitle) {
				elements.lessonTitle.textContent = data.lessonTitle;
				elements.lessonTitle.removeAttribute("data-i18n");
			}
			if (data.lessonDescription && elements.lessonDescription) {
				elements.lessonDescription.innerHTML = data.lessonDescription;
			}
			if (data.taskInstruction && elements.taskInstruction) {
				elements.taskInstruction.innerHTML = data.taskInstruction;
			}
			if (data.levelIndicator && elements.levelIndicator) {
				elements.levelIndicator.innerHTML = data.levelIndicator;
			}
			// Store userCode to apply after editor init
			if (data.userCode) {
				cachedUserCode = data.userCode;
			}
		}
	} catch (e) {
		// Ignore cache errors
	}
}

// ================= MODULE INITIALIZATION =================

let loadingTimeout = null;

function showLoadingFallback() {
	// Only show if no lesson is loaded yet
	if (!elements.lessonTitle.textContent) {
		elements.lessonDescription.innerHTML = `
			<div class="loading-fallback">
				<p>${t("loadingFallbackText")}</p>
				<button class="btn btn-text" onclick="document.getElementById('help-btn').click()">
					${t("help")}
				</button>
			</div>
		`;
	}
}

function clearLoadingTimeout() {
	if (loadingTimeout) {
		clearTimeout(loadingTimeout);
		loadingTimeout = null;
	}
}

function initializeModules() {
	try {
		const modules = loadModules(getLanguage());
		lessonEngine.setModules(modules);

		// Use the new renderModuleList function with both callbacks
		renderModuleList(elements.moduleList, modules, selectModule, selectLesson);

		// Render footer lesson links (for all pages)
		renderFooterLessonLinks();

		// Handle route (home, section, or lesson)
		handleRoute(false);

		updateProgressDisplay();
		clearLoadingTimeout();
	} catch (error) {
		console.error("Failed to load modules:", error);
		showLoadingFallback();
	}
}

// ================= MODULE/LESSON SELECTION =================

function selectModule(moduleId) {
	const success = lessonEngine.setModuleById(moduleId);
	if (!success) return;

	track("module_start", { module: moduleId });

	// Show lesson UI
	showLessonUI();

	// Update URL
	const engineState = lessonEngine.getCurrentState();
	updateHash(moduleId, engineState.lessonIndex);

	// Update module list UI to highlight the active module
	const moduleItems = elements.moduleList.querySelectorAll(".module-header");
	moduleItems.forEach((item) => {
		item.classList.remove("active");
		if (item.dataset.moduleId === moduleId) {
			item.classList.add("active");
		}
	});

	loadCurrentLesson();
	resetSuccessIndicators();

	// Close sidebar after selection on mobile
	if (window.innerWidth <= 768) {
		closeSidebar();
	}
}

function selectLesson(moduleId, lessonIndex) {
	const currentState = lessonEngine.getCurrentState();
	if (!currentState.module || currentState.module.id !== moduleId) {
		lessonEngine.setModuleById(moduleId);
	}

	lessonEngine.setLessonByIndex(lessonIndex);
	track("lesson_select", { module: moduleId, lesson: lessonIndex });

	// Show lesson UI
	showLessonUI();

	// Update URL
	updateHash(moduleId, lessonIndex);

	loadCurrentLesson();

	// Update section color coding (after loadCurrentLesson to ensure content is loaded first)
	const newState = lessonEngine.getCurrentState();
	updateSectionColor(getModuleSection(newState.module));

	// Update nav highlight
	updateNavHighlight({ type: RouteType.LESSON, moduleId, lessonIndex });

	// Close sidebar after selection on mobile
	if (window.innerWidth <= 768) {
		closeSidebar();
	}
}

// ================= LESSON LOADING =================

function resetSuccessIndicators() {
	// Clear any pending animation timeout
	if (state.animationTimeout) {
		clearTimeout(state.animationTimeout);
		state.animationTimeout = null;
	}
	elements.codeEditor.classList.remove("success-highlight");
	elements.lessonTitle.classList.remove("success-text");
	elements.nextBtn.classList.remove("success");
	elements.taskInstruction.classList.remove("success-instruction");
	elements.runBtn.classList.remove("success");
	elements.previewWrapper?.classList.remove("matched");
	elements.previewWrapper?.classList.remove("completed-glow");
	elements.previewSection?.classList.remove("matched");
	elements.previewSection?.classList.remove("completed-glow");

	// Remove completion badge if present
	const badge = document.querySelector(".completion-badge");
	if (badge) badge.remove();

	// Reset Run button text
	const runBtnText = elements.runBtn.querySelector("span");
	if (runBtnText) runBtnText.textContent = t("run");
}

function updateEditorForMode(mode) {
	const editorLabel = document.querySelector(".editor-label");

	const modeConfig = {
		html: {
			placeholder: "Type HTML here... Try: nav>ul>li*3 then press Tab",
			label: "HTML Editor",
			cmMode: "html"
		},
		tailwind: {
			placeholder: t("tailwindPlaceholder"),
			label: "Tailwind Classes",
			cmMode: "css"
		},
		css: {
			placeholder: "Enter your CSS code here...",
			label: "CSS Editor",
			cmMode: "css"
		},
		markdown: {
			placeholder: "# Heading\n\nWrite your **Markdown** here...",
			label: "Markdown Editor",
			cmMode: "markdown"
		},
		javascript: {
			placeholder: "// Write your JavaScript here...",
			label: "JavaScript Editor",
			cmMode: "javascript"
		},
		playground: {
			placeholder: "<style>\n  /* CSS here */\n</style>\n\n<!-- HTML here -->",
			label: "HTML & CSS",
			cmMode: "html"
		}
	};

	const config = modeConfig[mode] || modeConfig.css;
	if (editorLabel) editorLabel.textContent = config.label;

	// Update CodeMirror mode if needed
	if (codeEditor && currentMode !== config.cmMode) {
		currentMode = config.cmMode;
		codeEditor.setMode(config.cmMode);
	}
}

function loadCurrentLesson() {
	const engineState = lessonEngine.getCurrentState();

	if (!engineState.module || !engineState.lesson) {
		return;
	}

	const lesson = engineState.lesson;
	const mode = lesson.mode || engineState.module?.mode || "css";
	const isPlayground = lesson.mode === "playground";

	// Handle playground mode - hide instructions, full height editor, show random button
	if (isPlayground) {
		elements.instructionsSection?.classList.add("hidden");
		elements.editorSection?.classList.add("playground-mode");
		elements.randomTemplateBtn?.classList.remove("hidden");
		elements.showExpectedBtn?.classList.add("hidden");
	} else {
		elements.instructionsSection?.classList.remove("hidden");
		elements.editorSection?.classList.remove("playground-mode");
		elements.randomTemplateBtn?.classList.add("hidden");
		elements.showExpectedBtn?.classList.remove("hidden");
	}

	// Add transition class for smooth content swap
	elements.editorSection?.classList.add("transitioning");

	// Update UI based on mode
	updateEditorForMode(mode);

	// Update module name in pill
	if (elements.moduleName && engineState.module) {
		elements.moduleName.textContent = engineState.module.title;
	}

	// Reset any success indicators
	resetSuccessIndicators();

	// Clear hints
	clearHint();

	// Hide expected overlay
	state.showExpected = false;
	elements.expectedOverlay.classList.remove("visible");
	elements.showExpectedBtn.textContent = t("showExpected");
	elements.showExpectedBtn.classList.remove("btn-primary");

	// Update UI
	renderLesson(
		elements.lessonTitle,
		elements.lessonDescription,
		elements.taskInstruction,
		elements.previewArea,
		null, // editorPrefix no longer used
		null, // codeInput no longer used (using CodeMirror)
		null, // editorSuffix no longer used
		lesson
	);

	// Render difficulty badge
	renderDifficultyBadge(elements.lessonTitleRow, lesson);

	// Set user code in CodeMirror (clear history to prevent undo/redo across lessons)
	// Pass codePrefix/codeSuffix as read-only zones for CSS mode
	if (codeEditor) {
		const prefix = lesson.codePrefix || "";
		const suffix = lesson.codeSuffix || "";
		codeEditor.setValueAndClearHistory(engineState.userCode, prefix, suffix);
	}

	// Update Run button text based on completion status
	if (engineState.isCompleted) {
		elements.runBtn.querySelector("span").textContent = t("rerun");

		// Add completion badge to difficulty-wrapper if not present
		const wrapper = document.querySelector(".difficulty-wrapper");
		if (wrapper && !wrapper.querySelector(".completion-badge")) {
			const badge = document.createElement("span");
			badge.className = "completion-badge";
			badge.textContent = t("completed");
			wrapper.appendChild(badge);
		}

		// Show gradient border and glow for completed lessons
		elements.previewWrapper?.classList.add("completed-glow");
		elements.previewSection?.classList.add("completed-glow");
	} else {
		elements.runBtn.querySelector("span").textContent = t("run");

		// Remove completion badge if exists
		const badge = document.querySelector(".completion-badge");
		if (badge) badge.remove();
		elements.previewWrapper?.classList.remove("completed-glow");
		elements.previewSection?.classList.remove("completed-glow");
	}

	// Update level indicator (hide in playground mode)
	if (isPlayground) {
		elements.levelIndicator.classList.add("hidden");
	} else {
		elements.levelIndicator.classList.remove("hidden");
		renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
	}
	// Header pill shows module name + level (clickable link to return to lesson)
	if (elements.headerLevelPill && engineState.module) {
		if (isPlayground) {
			// Playground: just show title, no lesson count
			elements.headerLevelPill.innerHTML = `<span class="header-module-name">${engineState.module.title}</span>`;
		} else {
			const label = t("lessonLabel");
			elements.headerLevelPill.innerHTML = `<span class="header-module-name">${engineState.module.title}</span> <span class="header-level">${label} ${engineState.lessonIndex + 1} / ${engineState.totalLessons}</span>`;
		}
		elements.headerLevelPill.href = `#${engineState.module.id}/${engineState.lessonIndex}`;
	}

	// Update active lesson in sidebar
	updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);

	// Update navigation buttons
	updateNavigationButtons();

	// Update progress display
	updateProgressDisplay();

	// Focus on the code editor
	if (codeEditor) {
		codeEditor.focus();
	}

	// Render the expected/solution preview
	lessonEngine.renderExpectedPreview();

	// Remove transition class after content is updated
	requestAnimationFrame(() => {
		elements.editorSection?.classList.remove("transitioning");
	});

	// Cache lesson display data for instant restore on reload
	try {
		localStorage.setItem(
			"codeCrispies.lessonCache",
			JSON.stringify({
				moduleTitle: engineState.module?.title,
				lessonTitle: lesson.title,
				lessonDescription: lesson.description,
				taskInstruction: lesson.task,
				levelIndicator: elements.levelIndicator?.innerHTML,
				userCode: engineState.userCode,
				mode: mode
			})
		);
	} catch (e) {
		// Ignore storage errors
	}
}

// ================= LIVE PREVIEW =================

let previewTimer = null;

function handleEditorChange(code) {
	if (previewTimer) {
		clearTimeout(previewTimer);
	}

	previewTimer = setTimeout(() => {
		runCode();
	}, 800);
}

// ================= NAVIGATION =================

function updateNavigationButtons() {
	const engineState = lessonEngine.getCurrentState();
	const isPlayground = engineState.lesson?.mode === "playground";

	// Update button states
	elements.prevBtn.disabled = !engineState.canGoPrev;
	elements.nextBtn.disabled = isPlayground || !engineState.canGoNext;
	elements.prevBtn.classList.toggle("btn-disabled", !engineState.canGoPrev);
	elements.nextBtn.classList.toggle("btn-disabled", isPlayground || !engineState.canGoNext);
}

function nextLesson() {
	const prevModuleId = lessonEngine.getCurrentState().module?.id;
	const success = lessonEngine.nextLesson();
	if (success) {
		const newState = lessonEngine.getCurrentState();
		track("lesson_nav", { direction: "next", module: newState.module.id, lesson: newState.lessonIndex });
		// Update URL
		updateHash(newState.module.id, newState.lessonIndex);

		const moduleChanged = newState.module.id !== prevModuleId;
		if (moduleChanged) {
			updateModuleHighlight(newState.module.id);
		}
		loadCurrentLesson();
		if (moduleChanged) {
			updateSectionColor(getModuleSection(newState.module));
			updateNavHighlight({ type: RouteType.LESSON, moduleId: newState.module.id, lessonIndex: newState.lessonIndex });
		}
	}
}

function prevLesson() {
	const engineState = lessonEngine.getCurrentState();
	const prevModuleId = engineState.module?.id;
	const success = lessonEngine.previousLesson();
	if (success) {
		const newState = lessonEngine.getCurrentState();
		track("lesson_nav", { direction: "prev", module: newState.module.id, lesson: newState.lessonIndex });
		// Update URL
		updateHash(newState.module.id, newState.lessonIndex);

		const moduleChanged = newState.module.id !== prevModuleId;
		if (moduleChanged) {
			updateModuleHighlight(newState.module.id);
		}
		loadCurrentLesson();
		if (moduleChanged) {
			updateSectionColor(getModuleSection(newState.module));
			updateNavHighlight({ type: RouteType.LESSON, moduleId: newState.module.id, lessonIndex: newState.lessonIndex });
		}
	}
}

function updateModuleHighlight(moduleId) {
	const moduleItems = elements.moduleList.querySelectorAll(".module-header");
	moduleItems.forEach((item) => {
		item.classList.remove("active");
		if (item.dataset.moduleId === moduleId) {
			item.classList.add("active");
		}
	});
}

// ================= CODE EXECUTION =================

function resetCode() {
	// Reset editor to initial code for current lesson
	lessonEngine.reset();
	const engineState = lessonEngine.getCurrentState();
	const isPlayground = engineState.lesson?.mode === "playground";
	track("reset_code", { module: engineState.module?.id, lesson: engineState.lessonIndex });

	if (codeEditor && engineState.lesson) {
		// In playground mode, restore the last template if available
		if (isPlayground && state.lastPlaygroundTemplate) {
			codeEditor.setValue(state.lastPlaygroundTemplate.code);
			lessonEngine.applyUserCode(state.lastPlaygroundTemplate.code, true);
		} else {
			codeEditor.setValue(engineState.lesson.initialCode || "");
		}
	}
	// Clear hints and success indicators
	clearHint();
	resetSuccessIndicators();

	// Update sidebar to remove completed status from this lesson
	const sidebarItem = document.querySelector(
		`.lesson-list-item[data-module-id="${engineState.module?.id}"][data-lesson-index="${engineState.lessonIndex}"]`
	);
	if (sidebarItem) {
		sidebarItem.classList.remove("completed");
	}

	// Update progress display
	updateProgressDisplay();
}

function loadRandomTemplate() {
	const template = getRandomTemplate();
	if (codeEditor && template) {
		track("playground_template", { template: template.name });
		state.lastPlaygroundTemplate = template;
		codeEditor.setValue(template.code);
		// Apply the code to the preview
		lessonEngine.applyUserCode(template.code, true);
	}
}

function runCode() {
	const userCode = codeEditor ? codeEditor.getEditableValue() : "";
	const engineState = lessonEngine.getCurrentState();
	const isPlayground = engineState.lesson?.mode === "playground";

	track("run_code", { module: engineState.module?.id, lesson: engineState.lessonIndex, playground: isPlayground });

	// Rotate the Run button icon
	const runButtonImg = document.querySelector("#run-btn img");
	if (runButtonImg) {
		const currentRotation = parseInt(runButtonImg.style.transform?.match(/\d+/)?.[0] || "0");
		runButtonImg.style.transform = `rotate(${currentRotation + 180}deg)`;
	}

	// Apply the code to the preview via LessonEngine
	lessonEngine.applyUserCode(userCode, true);

	// Skip validation for playground mode
	if (isPlayground) {
		return;
	}

	// Validate code using LessonEngine
	const validationResult = lessonEngine.validateCode();

	if (validationResult.isValid) {
		// Track lesson completion
		track("lesson_complete", {
			module: engineState.module?.id,
			lesson: engineState.lessonIndex
		});

		// Show success hint
		showSuccessHint(validationResult.message || t("successMessage"));

		// Update Run button
		elements.runBtn.querySelector("span").textContent = t("rerun");
		elements.runBtn.classList.add("success");

		// Add completion badge
		if (!document.querySelector(".completion-badge")) {
			const badge = document.createElement("span");
			badge.className = "completion-badge";
			badge.textContent = t("completed");
			elements.lessonTitleRow.appendChild(badge);
		}

		// Add success visual indicators
		elements.codeEditor.classList.add("success-highlight");
		elements.lessonTitle.classList.add("success-text");
		elements.nextBtn.classList.add("success");
		elements.taskInstruction.classList.add("success-instruction");

		// Show match animation (rotating gradient glow)
		const crispyQuotes = [
			"Crissssssssspy!",
			"You did it!",
			"Good job!",
			"Nailed it!",
			"Perfect!",
			"Well done!",
			"Awesome!",
			"Nice work!",
			//"0x2B 0x31",
			"+1"
		];
		const randomQuote = crispyQuotes[Math.floor(Math.random() * crispyQuotes.length)];
		elements.previewWrapper?.style.setProperty("--crispy-quote", `"${randomQuote}"`);
		elements.previewWrapper?.classList.add("matched");
		elements.previewSection?.classList.add("matched");
		state.animationTimeout = setTimeout(() => {
			elements.previewWrapper?.classList.remove("matched");
			elements.previewSection?.classList.remove("matched");
			// Keep the gradient border and glow visible after animation
			elements.previewWrapper?.classList.add("completed-glow");
			elements.previewSection?.classList.add("completed-glow");
			state.animationTimeout = null;
		}, 3500);

		updateNavigationButtons();
		updateProgressDisplay();
	} else {
		// Reset success indicators
		resetSuccessIndicators();

		// Show hint with step progress
		const step = validationResult.validCases + 1;
		const total = validationResult.totalCases;

		// Only show hints if enabled
		if (!state.userSettings.disableFeedbackErrors) {
			showHint(validationResult.message || t("keepTrying"), step, total);
		}
	}
}

// ================= DIALOGS =================

function showHelp() {
	track("help_open");
	elements.helpDialog.showModal();
}

function closeHelpDialog() {
	elements.helpDialog.close();
}

function showResetConfirmation() {
	elements.resetDialog.showModal();
}

function closeResetDialog() {
	elements.resetDialog.close();
}

function handleResetConfirm() {
	track("reset_progress");
	lessonEngine.clearProgress();
	closeResetDialog();
	closeSidebar();

	// Reload first module
	const modules = lessonEngine.modules;
	if (modules.length > 0) {
		selectModule(modules[0].id);
	}

	updateProgressDisplay();
}

function showResetCodeConfirmation() {
	// Reset the checkbox state each time dialog is shown
	elements.resetCodeDontShow.checked = false;
	elements.resetCodeDialog.showModal();
}

function closeResetCodeDialog() {
	elements.resetCodeDialog.close();
}

function handleResetCodeConfirm() {
	// Save preference if checkbox is checked
	if (elements.resetCodeDontShow.checked) {
		state.userSettings.skipResetCodeConfirmation = true;
		saveUserSettings();
	}

	closeResetCodeDialog();
	resetCode();
}

function handleResetCodeClick() {
	if (state.userSettings.skipResetCodeConfirmation) {
		resetCode();
	} else {
		showResetCodeConfirmation();
	}
}

// ================= SHARE DIALOG =================

function showShareDialog() {
	track("share_open");
	const engineState = lessonEngine.getCurrentState();
	if (engineState.module && engineState.lesson !== null) {
		const shareUrl = getShareableUrl(engineState.module.id, engineState.lessonIndex);
		elements.shareUrlInput.value = shareUrl;
		elements.copyFeedback.hidden = true;
	}
	elements.shareDialog.showModal();
}

function closeShareDialog() {
	elements.shareDialog.close();
}

async function copyShareUrl() {
	track("share_copy");
	try {
		await navigator.clipboard.writeText(elements.shareUrlInput.value);
		elements.copyFeedback.hidden = false;
		setTimeout(() => {
			elements.copyFeedback.hidden = true;
		}, 2000);
	} catch (err) {
		// Fallback for older browsers
		elements.shareUrlInput.select();
		document.execCommand("copy");
		elements.copyFeedback.hidden = false;
		setTimeout(() => {
			elements.copyFeedback.hidden = true;
		}, 2000);
	}
}

// ================= SECTION EDUCATIONAL CONTENT =================

const sectionContent = {
	css: `
		<div class="section-overview">
			<p><strong>CSS (Cascading Style Sheets)</strong> is a stylesheet language that controls the visual presentation of HTML documents. While HTML defines the structure and content, CSS handles colors, typography, spacing, and layout. The "cascading" in CSS means rules can override each other based on specificity—allowing you to set defaults and then refine them for specific elements.</p>
			<p>Introduced in 1996 to separate content from presentation, CSS enables one stylesheet to style multiple HTML pages, keeping design consistent and maintainable. Modern CSS includes powerful layout systems like Flexbox and Grid, custom properties (variables), and animations—all without JavaScript.</p>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Selectors & Properties</h2>
				<p>CSS uses selectors to target HTML elements and apply styles. The most common selector is the class selector (<code>.classname</code>), which targets elements with a specific class attribute. You can also use element selectors (<code>p</code>, <code>div</code>), ID selectors (<code>#id</code>), and combinators to select nested elements.</p>
				<p>Properties define what aspect of the element to style. Common properties include <code>color</code> for text color, <code>background</code> for backgrounds, <code>padding</code> for internal spacing, and <code>margin</code> for external spacing. Each property accepts specific value types like colors, lengths, or keywords.</p>
				<a href="#css-basic-selectors/0" class="topic-link">Practice CSS Selectors</a>
				<a href="#reference/selectors" class="topic-ref">Selectors Reference →</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>.button {
  background: steelblue;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.button:hover {
  background: darkslateblue;
}</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>The Box Model</h2>
				<p>Every HTML element is rendered as a rectangular box with four distinct layers. The <code>content</code> area holds your text or images. <code>padding</code> creates space inside the element between the content and border. The <code>border</code> wraps around the padding. Finally, <code>margin</code> creates space outside the element, separating it from neighbors.</p>
				<p>By default, <code>width</code> only sets the content width. Adding padding and border increases the total size. Use <code>box-sizing: border-box</code> to include padding and border in the declared width, making layouts much more predictable.</p>
				<a href="#box-model/0" class="topic-link">Learn the CSS Box Model</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>.card {
  width: 300px;
  padding: 1rem;
  border: 2px solid gray;
  margin: 1rem;
  box-sizing: border-box;
}
/* Total width stays 300px */</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Flexbox Layout</h2>
				<p>Flexbox is a one-dimensional layout system for arranging items in rows or columns. Apply <code>display: flex</code> to a container to enable it. Child elements become flex items that can grow, shrink, and align automatically.</p>
				<p>Control alignment with <code>justify-content</code> (main axis: <code>flex-start</code>, <code>center</code>, <code>space-between</code>) and <code>align-items</code> (cross axis: <code>stretch</code>, <code>center</code>, <code>flex-end</code>). The <code>gap</code> property adds consistent spacing between items without margins.</p>
				<a href="#flexbox/0" class="topic-link">Master CSS Flexbox Layout</a>
				<a href="#reference/flexbox" class="topic-ref">Flexbox Reference →</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>CSS Grid</h2>
				<p>CSS Grid is a two-dimensional layout system for creating complex row and column layouts. Enable it with <code>display: grid</code>, then define columns using <code>grid-template-columns</code>. The <code>repeat()</code> function creates multiple tracks, and <code>fr</code> units distribute available space proportionally.</p>
				<p>Grid excels at page layouts and card grids. Use <code>grid-template-columns: repeat(3, 1fr)</code> for three equal columns, or <code>repeat(auto-fill, minmax(250px, 1fr))</code> for responsive columns that wrap automatically.</p>
				<a href="#grid/0" class="topic-link">Explore CSS Grid Layout</a>
				<a href="#reference/grid" class="topic-ref">Grid Reference →</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.responsive-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(250px, 1fr));
}</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Units & Variables</h2>
				<p>CSS supports multiple unit types for different use cases. Use <code>px</code> for fixed sizes, <code>rem</code> for scalable typography (relative to root font size), <code>%</code> for parent-relative sizing, and <code>vh</code>/<code>vw</code> for viewport-relative dimensions. Prefer <code>rem</code> for accessibility—it respects user font preferences.</p>
				<p>CSS custom properties (variables) store reusable values. Define them with <code>--name: value</code> in <code>:root</code> for global access, then use them anywhere with <code>var(--name)</code>. This makes themes and consistent design systems easy to maintain.</p>
				<a href="#units-variables/0" class="topic-link">Study CSS Units & Variables</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>:root {
  --primary: steelblue;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --radius: 8px;
}

.card {
  background: var(--primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}</code></pre>
				</div>
			</div>
		</div>
	`,

	html: `
		<div class="section-overview">
			<p><strong>HTML (HyperText Markup Language)</strong> is not a programming language—it's a markup language that describes the structure and content of web documents. Invented by Tim Berners-Lee in 1989, HTML uses tags like <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>, and <code>&lt;a&gt;</code> to define paragraphs, headings, and links. The browser reads this markup and renders it as a visual page.</p>
			<p>HTML documents form a hierarchical tree called the DOM (Document Object Model). Elements have parent-child relationships: a <code>&lt;ul&gt;</code> contains <code>&lt;li&gt;</code> children, a <code>&lt;form&gt;</code> contains <code>&lt;input&gt;</code> elements. Modern HTML5 includes native interactive elements like <code>&lt;dialog&gt;</code>, <code>&lt;details&gt;</code>, and form validation—features that previously required JavaScript.</p>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Semantic Structure</h2>
				<p>HTML5 introduced semantic elements that convey meaning about content structure. Use <code>&lt;header&gt;</code> for introductory content, <code>&lt;nav&gt;</code> for navigation links, <code>&lt;main&gt;</code> for primary content, <code>&lt;article&gt;</code> for self-contained compositions, <code>&lt;section&gt;</code> for thematic groupings, and <code>&lt;footer&gt;</code> for closing content.</p>
				<p>Semantic markup improves accessibility—screen readers announce element roles. It also helps SEO as search engines better understand your content hierarchy. Replace generic <code>&lt;div&gt;</code> containers with appropriate semantic elements whenever possible.</p>
				<a href="#html-elements/0" class="topic-link">Learn HTML Semantic Elements</a>
				<a href="#reference/html" class="topic-ref">HTML Reference →</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;article&gt;
  &lt;header&gt;
    &lt;h1&gt;Article Title&lt;/h1&gt;
    &lt;time datetime="2024-01-15"&gt;
      January 15, 2024
    &lt;/time&gt;
  &lt;/header&gt;
  &lt;p&gt;Article content...&lt;/p&gt;
  &lt;footer&gt;
    &lt;p&gt;Written by Author&lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Forms & Validation</h2>
				<p>HTML forms collect user input with elements like <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;button&gt;</code>. Always pair inputs with <code>&lt;label&gt;</code> elements using matching <code>for</code> and <code>id</code> attributes—this is crucial for accessibility and usability.</p>
				<p>Native validation attributes eliminate JavaScript for common cases: <code>required</code> prevents empty submissions, <code>type="email"</code> validates email format, <code>minlength</code>/<code>maxlength</code> control text length, and <code>pattern</code> accepts custom regex patterns. The browser handles error messages automatically.</p>
				<a href="#html-forms-basic/0" class="topic-link">Build HTML Forms</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;form&gt;
  &lt;label for="email"&gt;Email&lt;/label&gt;
  &lt;input type="email" id="email"
         name="email" required
         placeholder="you@example.com"&gt;

  &lt;label for="phone"&gt;Phone&lt;/label&gt;
  &lt;input type="tel" id="phone"
         pattern="[0-9]{3}-[0-9]{4}"&gt;

  &lt;button type="submit"&gt;Send&lt;/button&gt;
&lt;/form&gt;</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Interactive Elements</h2>
				<p>Modern HTML includes powerful interactive components that work without JavaScript. The <code>&lt;details&gt;</code> element creates native accordions—click <code>&lt;summary&gt;</code> to toggle visibility. Add the <code>open</code> attribute to start expanded. Multiple details elements create FAQ-style interfaces instantly.</p>
				<p>The <code>&lt;dialog&gt;</code> element creates accessible modal dialogs. Call <code>.showModal()</code> in JavaScript to open it with backdrop and focus trapping built-in. Use <code>&lt;datalist&gt;</code> with inputs to provide autocomplete suggestions from a predefined list.</p>
				<a href="#html-details-summary/0" class="topic-link">Try Interactive HTML Elements</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;details&gt;
  &lt;summary&gt;What is HTML?&lt;/summary&gt;
  &lt;p&gt;HTML is the standard markup
     language for web pages.&lt;/p&gt;
&lt;/details&gt;

&lt;dialog id="confirm"&gt;
  &lt;h2&gt;Confirm Action&lt;/h2&gt;
  &lt;p&gt;Are you sure?&lt;/p&gt;
  &lt;button onclick="this.closest('dialog').close()"&gt;
    Close
  &lt;/button&gt;
&lt;/dialog&gt;</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Tables & Lists</h2>
				<p>Use <code>&lt;table&gt;</code> exclusively for tabular data, never for page layout. Structure tables with <code>&lt;thead&gt;</code> for header rows, <code>&lt;tbody&gt;</code> for data rows, and optionally <code>&lt;tfoot&gt;</code> for summaries. Mark header cells with <code>&lt;th&gt;</code> (not <code>&lt;td&gt;</code>) and add <code>scope="col"</code> or <code>scope="row"</code> for accessibility.</p>
				<p>Lists come in three flavors: <code>&lt;ul&gt;</code> for unordered bullet lists, <code>&lt;ol&gt;</code> for numbered sequences, and <code>&lt;dl&gt;</code> for definition lists (term/description pairs). Nest lists for hierarchical content like navigation menus or category trees.</p>
				<a href="#html-tables/0" class="topic-link">Structure Data with HTML Tables</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;Product&lt;/th&gt;
      &lt;th scope="col"&gt;Price&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Widget&lt;/td&gt;
      &lt;td&gt;$9.99&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
				</div>
			</div>
		</div>
	`,

	tailwind: `
		<div class="section-overview">
			<p><strong>Tailwind CSS</strong> is a utility-first CSS framework that takes a radically different approach to styling. Instead of writing custom CSS classes like <code>.card</code> or <code>.button</code>, you compose designs using small, single-purpose utility classes directly in your HTML: <code>class="p-4 bg-white rounded shadow"</code>.</p>
			<p>This approach solves common CSS problems: no more specificity battles, no unused styles, no inventing class names. Tailwind's consistent spacing scale (<code>p-1</code> through <code>p-12</code>), color palette (<code>blue-500</code>, <code>gray-100</code>), and responsive prefixes (<code>md:</code>, <code>lg:</code>) make building consistent, responsive interfaces fast and predictable.</p>
			<p class="section-see-also">For the underlying CSS concepts, see the <a href="#css">CSS Section</a> and <a href="#reference/css">CSS Reference</a>.</p>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Utility-First Basics</h2>
				<p>Tailwind CSS uses small, single-purpose utility classes applied directly in HTML. Instead of writing <code>.btn { background: blue; padding: 1rem; }</code> in a stylesheet, you write <code>class="bg-blue-500 p-4"</code> on the element. Each class does exactly one thing, making styles predictable and composable.</p>
				<p>This approach eliminates context-switching between HTML and CSS files. Common utilities include <code>text-lg</code> for font size, <code>font-bold</code> for weight, <code>rounded</code> for border radius, and <code>shadow</code> for box shadows. Hover states use the <code>hover:</code> prefix like <code>hover:bg-blue-600</code>.</p>
				<span class="topic-link topic-link-disabled">Start with Tailwind CSS Basics <span class="coming-soon-badge">Coming Soon</span></span>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;button class="bg-blue-500 text-white
               px-4 py-2 rounded-lg
               font-semibold shadow
               hover:bg-blue-600
               active:bg-blue-700"&gt;
  Click me
&lt;/button&gt;</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Spacing & Sizing</h2>
				<p>Tailwind's spacing scale is consistent and memorable. The pattern is simple: <code>p-4</code> means padding of 1rem (16px), <code>p-2</code> is 0.5rem, <code>p-8</code> is 2rem. The same numbers work for margin (<code>m-4</code>), gap (<code>gap-4</code>), and space utilities. Use directional variants like <code>px-4</code> (horizontal) or <code>pt-2</code> (top only).</p>
				<p>Width and height follow patterns too: <code>w-full</code> for 100%, <code>w-1/2</code> for 50%, <code>w-64</code> for fixed 16rem, <code>h-screen</code> for viewport height. Combine <code>max-w-xl</code> with <code>mx-auto</code> for centered containers with maximum widths.</p>
				<span class="topic-link topic-link-disabled">Learn Tailwind Spacing & Sizing <span class="coming-soon-badge">Coming Soon</span></span>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;div class="max-w-xl mx-auto p-6"&gt;
  &lt;div class="space-y-4"&gt;
    &lt;div class="w-full h-32 bg-gray-200
                rounded-lg"&gt;
      Full width card
    &lt;/div&gt;
    &lt;div class="w-1/2 p-4 bg-gray-100"&gt;
      Half width, padded
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Flexbox & Grid</h2>
				<p>Tailwind's layout utilities map directly to CSS flexbox and grid. Enable flex with <code>flex</code>, then control direction (<code>flex-row</code>, <code>flex-col</code>), alignment (<code>items-center</code>, <code>justify-between</code>), and wrapping (<code>flex-wrap</code>). The <code>gap-4</code> utility adds consistent spacing between items.</p>
				<p>For grid layouts, use <code>grid</code> with column definitions like <code>grid-cols-3</code> for three equal columns or <code>grid-cols-[200px_1fr]</code> for custom track sizes. The <code>col-span-2</code> utility makes items span multiple columns.</p>
				<span class="topic-link topic-link-disabled">Build Layouts with Tailwind <span class="coming-soon-badge">Coming Soon</span></span>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;nav class="flex justify-between
            items-center p-4"&gt;
  &lt;a href="/" class="font-bold"&gt;Logo&lt;/a&gt;
  &lt;ul class="flex gap-6"&gt;
    &lt;li&gt;Home&lt;/li&gt;
    &lt;li&gt;About&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;

&lt;div class="grid grid-cols-3 gap-4"&gt;
  &lt;div class="col-span-2"&gt;Wide&lt;/div&gt;
  &lt;div&gt;Normal&lt;/div&gt;
&lt;/div&gt;</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Responsive Design</h2>
				<p>Tailwind uses mobile-first responsive prefixes. Unprefixed utilities apply to all screen sizes. Add <code>sm:</code> (640px+), <code>md:</code> (768px+), <code>lg:</code> (1024px+), or <code>xl:</code> (1280px+) prefixes to apply styles at specific breakpoints and above.</p>
				<p>Build responsive layouts by starting with mobile styles, then adding larger-screen overrides. For example, <code>flex-col md:flex-row</code> stacks items vertically on mobile and horizontally on medium screens. Use <code>hidden md:block</code> to show/hide elements at different sizes.</p>
				<span class="topic-link topic-link-disabled">Tailwind Responsive Design <span class="coming-soon-badge">Coming Soon</span></span>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>&lt;div class="flex flex-col md:flex-row
            gap-4 p-4"&gt;
  &lt;aside class="w-full md:w-64
               bg-gray-100 p-4"&gt;
    Sidebar (top on mobile)
  &lt;/aside&gt;
  &lt;main class="flex-1"&gt;
    Main content
  &lt;/main&gt;
&lt;/div&gt;

&lt;p class="text-sm md:text-base lg:text-lg"&gt;
  Responsive typography
&lt;/p&gt;</code></pre>
				</div>
			</div>
		</div>
	`,
	markdown: `
		<div class="section-overview">
			<p><strong>Markdown</strong> is a lightweight markup language created by John Gruber in 2004. It lets you write formatted text using plain text syntax that's easy to read and write. Markdown is used everywhere—from GitHub READMEs to documentation, note-taking apps, and content management systems.</p>
			<p>The beauty of Markdown is its simplicity: <code># Heading</code> creates a heading, <code>**bold**</code> makes text bold, and <code>[link](url)</code> creates a link. No complex HTML tags needed. Markdown files can be converted to HTML, PDF, or many other formats.</p>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Headings & Structure</h2>
				<p>Create document structure with headings using <code>#</code> symbols. One <code>#</code> for h1, two <code>##</code> for h2, up to six levels. This creates a clear hierarchy in your documents.</p>
				<p>
					<a href="#markdown-basics/0" class="topic-link">Practice headings →</a>
				</p>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code># Main Title
## Section
### Subsection
#### Detail</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Text Formatting</h2>
				<p>Emphasize text with <code>**bold**</code> or <code>*italic*</code>. Combine them with <code>***bold italic***</code>. Use backticks for <code>\`inline code\`</code> to highlight commands or code snippets in your text.</p>
				<p>
					<a href="#markdown-basics/2" class="topic-link">Practice formatting →</a>
				</p>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>This is **bold** text.
This is *italic* text.
This is \`inline code\`.</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Lists</h2>
				<p>Create bullet lists with <code>-</code>, <code>*</code>, or <code>+</code>. Numbered lists use <code>1.</code>, <code>2.</code>, etc. Indent items with spaces to create nested lists for complex outlines.</p>
				<p>
					<a href="#markdown-basics/4" class="topic-link">Practice lists →</a>
				</p>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>- First item
- Second item
  - Nested item

1. Step one
2. Step two
3. Step three</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Links & Images</h2>
				<p>Create links with <code>[text](url)</code> syntax. Images use the same format with an exclamation mark: <code>![alt text](image-url)</code>. The alt text describes the image for accessibility.</p>
				<p>
					<a href="#markdown-basics/6" class="topic-link">Practice links →</a>
				</p>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>[Visit Google](https://google.com)

![Logo](https://example.com/logo.png)</code></pre>
				</div>
			</div>
		</div>
	`,
	javascript: `
		<div class="section-overview">
			<p><strong>JavaScript</strong> is the programming language of the web. It adds interactivity to HTML pages—responding to clicks, updating content dynamically, validating forms, and much more. Every modern browser includes a JavaScript engine, making it the most widely deployed programming language in the world.</p>
			<p>These beginner lessons cover the fundamentals: declaring variables, selecting and modifying DOM elements, and handling user events. Each concept builds on the previous one, giving you the tools to make any web page interactive.</p>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Variables & Data Types</h2>
				<p>JavaScript uses <code>const</code> for values that won't change and <code>let</code> for values that will. Template literals with backticks make it easy to embed expressions in strings using <code>\${...}</code> syntax.</p>
				<p>Arrays store ordered collections in square brackets. Objects store key-value pairs in curly braces. These are the building blocks of every JavaScript program.</p>
				<a href="#js-variables/0" class="topic-link">Learn JS Variables</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>const name = "Alice";
let count = 0;
count = count + 1;

const msg = \`Hello, \${name}!\`;
const colors = ["red", "green"];</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>DOM Manipulation</h2>
				<p>The DOM (Document Object Model) is how JavaScript sees your HTML. Use <code>document.querySelector()</code> to find elements by CSS selector, then modify them with properties like <code>textContent</code>, <code>style</code>, and <code>classList</code>.</p>
				<a href="#js-dom/0" class="topic-link">Practice DOM Methods</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>const title = document.querySelector('h1');
title.textContent = "New Title";
title.style.color = "coral";
title.classList.add("active");</code></pre>
				</div>
			</div>
		</div>

		<div class="topic-row">
			<div class="topic-text">
				<h2>Event Handling</h2>
				<p>Events let your code respond to user actions. Use <code>addEventListener()</code> to run a function when something happens—a click, a keystroke, or an input change. The callback receives an event object with details about what happened.</p>
				<a href="#js-events/0" class="topic-link">Handle Events</a>
			</div>
			<div class="topic-code">
				<div class="code-block">
					<pre><code>const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  alert('Clicked!');
});</code></pre>
				</div>
			</div>
		</div>
	`
};

// ================= REFERENCE CHEATSHEET CONTENT =================

const referenceContent = {
	css: `
		<h1>CSS Properties Reference</h1>
		<p class="ref-intro">Quick reference for commonly used CSS properties. Click any property to see syntax and examples.</p>

		<section class="ref-section">
			<h2>Colors & Backgrounds</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>color</code></td><td>named, hex, rgb(), hsl()</td><td><code>color: steelblue;</code></td></tr>
					<tr><td><code>background</code></td><td>color, image, gradient</td><td><code>background: #f0f0f0;</code></td></tr>
					<tr><td><code>background-color</code></td><td>color value</td><td><code>background-color: white;</code></td></tr>
					<tr><td><code>background-image</code></td><td>url(), gradient</td><td><code>background-image: url(bg.png);</code></td></tr>
					<tr><td><code>opacity</code></td><td>0 to 1</td><td><code>opacity: 0.8;</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Typography</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>font-family</code></td><td>font name, generic</td><td><code>font-family: system-ui, sans-serif;</code></td></tr>
					<tr><td><code>font-size</code></td><td>px, rem, em, %</td><td><code>font-size: 1rem;</code></td></tr>
					<tr><td><code>font-weight</code></td><td>normal, bold, 100-900</td><td><code>font-weight: 600;</code></td></tr>
					<tr><td><code>line-height</code></td><td>number, length, %</td><td><code>line-height: 1.5;</code></td></tr>
					<tr><td><code>text-align</code></td><td>left, center, right, justify</td><td><code>text-align: center;</code></td></tr>
					<tr><td><code>text-decoration</code></td><td>none, underline, line-through</td><td><code>text-decoration: none;</code></td></tr>
					<tr><td><code>text-transform</code></td><td>none, uppercase, lowercase, capitalize</td><td><code>text-transform: uppercase;</code></td></tr>
					<tr><td><code>letter-spacing</code></td><td>length</td><td><code>letter-spacing: 0.05em;</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Box Model</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>width</code></td><td>length, %, auto, fit-content</td><td><code>width: 100%;</code></td></tr>
					<tr><td><code>height</code></td><td>length, %, auto</td><td><code>height: 200px;</code></td></tr>
					<tr><td><code>min-width</code></td><td>length, %, auto</td><td><code>min-width: 200px;</code></td></tr>
					<tr><td><code>min-height</code></td><td>length, %, auto</td><td><code>min-height: 100vh;</code></td></tr>
					<tr><td><code>max-width</code></td><td>length, %, none</td><td><code>max-width: 600px;</code></td></tr>
					<tr><td><code>padding</code></td><td>length (1-4 values)</td><td><code>padding: 1rem 2rem;</code></td></tr>
					<tr><td><code>margin</code></td><td>length, auto (1-4 values)</td><td><code>margin: 0 auto;</code></td></tr>
					<tr><td><code>border</code></td><td>width style color</td><td><code>border: 1px solid gray;</code></td></tr>
					<tr><td><code>border-radius</code></td><td>length (1-4 values)</td><td><code>border-radius: 8px;</code></td></tr>
					<tr><td><code>border-collapse</code></td><td>separate, collapse</td><td><code>border-collapse: collapse;</code></td></tr>
					<tr><td><code>box-sizing</code></td><td>content-box, border-box</td><td><code>box-sizing: border-box;</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Layout</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>display</code></td><td>block, inline, flex, grid, none</td><td><code>display: flex;</code></td></tr>
					<tr><td><code>position</code></td><td>static, relative, absolute, fixed, sticky</td><td><code>position: relative;</code></td></tr>
					<tr><td><code>top/right/bottom/left</code></td><td>length, %, auto</td><td><code>top: 0; left: 50%;</code></td></tr>
					<tr><td><code>z-index</code></td><td>integer, auto</td><td><code>z-index: 10;</code></td></tr>
					<tr><td><code>overflow</code></td><td>visible, hidden, scroll, auto</td><td><code>overflow: auto;</code></td></tr>
					<tr><td><code>float</code></td><td>none, left, right</td><td><code>float: left;</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Visual Effects</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>box-shadow</code></td><td>x y blur spread color</td><td><code>box-shadow: 0 4px 8px rgba(0,0,0,0.1);</code></td></tr>
					<tr><td><code>text-shadow</code></td><td>x y blur color</td><td><code>text-shadow: 1px 1px 2px gray;</code></td></tr>
					<tr><td><code>transform</code></td><td>translate, rotate, scale</td><td><code>transform: translateY(-2px);</code></td></tr>
					<tr><td><code>cursor</code></td><td>pointer, default, text, grab</td><td><code>cursor: pointer;</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Transitions & Animations</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>transition</code></td><td>property duration easing</td><td><code>transition: all 0.3s ease;</code></td></tr>
					<tr><td><code>transition-property</code></td><td>all, none, specific</td><td><code>transition-property: opacity;</code></td></tr>
					<tr><td><code>transition-duration</code></td><td>time (s, ms)</td><td><code>transition-duration: 0.3s;</code></td></tr>
					<tr><td><code>transition-timing-function</code></td><td>ease, linear, ease-in-out</td><td><code>transition-timing-function: ease-out;</code></td></tr>
					<tr><td><code>animation</code></td><td>name duration timing delay</td><td><code>animation: fade 1s ease-in;</code></td></tr>
					<tr><td><code>animation-name</code></td><td>@keyframes name</td><td><code>animation-name: slide;</code></td></tr>
					<tr><td><code>animation-duration</code></td><td>time (s, ms)</td><td><code>animation-duration: 2s;</code></td></tr>
					<tr><td><code>animation-iteration-count</code></td><td>number, infinite</td><td><code>animation-iteration-count: infinite;</code></td></tr>
					<tr><td><code>animation-fill-mode</code></td><td>none, forwards, backwards, both</td><td><code>animation-fill-mode: forwards;</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>CSS Variables</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Description</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>--name</code></td><td>Define custom property</td><td><code>--primary: steelblue;</code></td></tr>
					<tr><td><code>var(--name)</code></td><td>Use custom property</td><td><code>color: var(--primary);</code></td></tr>
					<tr><td><code>var(--name, fallback)</code></td><td>With fallback value</td><td><code>color: var(--accent, blue);</code></td></tr>
					<tr><td><code>:root { }</code></td><td>Global scope</td><td><code>:root { --gap: 1rem; }</code></td></tr>
				</tbody>
			</table>
		</section>

		<p class="ref-see-also">See also: <a href="#reference/flexbox">Flexbox Reference</a> | <a href="#reference/grid">Grid Reference</a> | <a href="#reference/selectors">Selectors Reference</a></p>
	`,

	selectors: `
		<h1>CSS Selectors Reference</h1>
		<p class="ref-intro">Selectors determine which HTML elements your styles apply to. More specific selectors override less specific ones.</p>

		<section class="ref-section">
			<h2>Basic Selectors</h2>
			<table class="ref-table">
				<thead><tr><th>Selector</th><th>Description</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>element</code></td><td>All elements of type</td><td><code>p { ... }</code></td></tr>
					<tr><td><code>.class</code></td><td>Elements with class</td><td><code>.btn { ... }</code></td></tr>
					<tr><td><code>#id</code></td><td>Element with ID</td><td><code>#header { ... }</code></td></tr>
					<tr><td><code>*</code></td><td>All elements</td><td><code>* { box-sizing: border-box; }</code></td></tr>
					<tr><td><code>[attr]</code></td><td>Elements with attribute</td><td><code>[disabled] { ... }</code></td></tr>
					<tr><td><code>[attr="value"]</code></td><td>Attribute equals value</td><td><code>[type="text"] { ... }</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Combinators</h2>
			<table class="ref-table">
				<thead><tr><th>Selector</th><th>Description</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>A B</code></td><td>B inside A (descendant)</td><td><code>nav a { ... }</code></td></tr>
					<tr><td><code>A > B</code></td><td>B direct child of A</td><td><code>ul > li { ... }</code></td></tr>
					<tr><td><code>A + B</code></td><td>B immediately after A</td><td><code>h2 + p { ... }</code></td></tr>
					<tr><td><code>A ~ B</code></td><td>B after A (sibling)</td><td><code>h2 ~ p { ... }</code></td></tr>
					<tr><td><code>A, B</code></td><td>A or B (grouping)</td><td><code>h1, h2, h3 { ... }</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Pseudo-classes</h2>
			<table class="ref-table">
				<thead><tr><th>Selector</th><th>Description</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>:hover</code></td><td>Mouse over element</td><td><code>a:hover { color: blue; }</code></td></tr>
					<tr><td><code>:focus</code></td><td>Element has focus</td><td><code>input:focus { outline: 2px solid; }</code></td></tr>
					<tr><td><code>:active</code></td><td>Being clicked</td><td><code>button:active { transform: scale(0.98); }</code></td></tr>
					<tr><td><code>:first-child</code></td><td>First child element</td><td><code>li:first-child { ... }</code></td></tr>
					<tr><td><code>:last-child</code></td><td>Last child element</td><td><code>li:last-child { ... }</code></td></tr>
					<tr><td><code>:nth-child(n)</code></td><td>nth child (1-based)</td><td><code>tr:nth-child(odd) { ... }</code></td></tr>
					<tr><td><code>:not(sel)</code></td><td>Elements not matching</td><td><code>:not(.hidden) { ... }</code></td></tr>
					<tr><td><code>:checked</code></td><td>Checked inputs</td><td><code>input:checked { ... }</code></td></tr>
					<tr><td><code>:disabled</code></td><td>Disabled form elements</td><td><code>button:disabled { opacity: 0.5; }</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Pseudo-elements</h2>
			<table class="ref-table">
				<thead><tr><th>Selector</th><th>Description</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>::before</code></td><td>Insert before content</td><td><code>.icon::before { content: "→"; }</code></td></tr>
					<tr><td><code>::after</code></td><td>Insert after content</td><td><code>.link::after { content: "↗"; }</code></td></tr>
					<tr><td><code>::first-letter</code></td><td>First letter of text</td><td><code>p::first-letter { font-size: 2em; }</code></td></tr>
					<tr><td><code>::first-line</code></td><td>First line of text</td><td><code>p::first-line { font-weight: bold; }</code></td></tr>
					<tr><td><code>::placeholder</code></td><td>Input placeholder text</td><td><code>input::placeholder { color: gray; }</code></td></tr>
					<tr><td><code>::selection</code></td><td>Selected/highlighted text</td><td><code>::selection { background: yellow; }</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Specificity (Highest to Lowest)</h2>
			<ol class="ref-list">
				<li><strong>Inline styles</strong> - <code>style="..."</code> attribute (1000 points)</li>
				<li><strong>ID selectors</strong> - <code>#id</code> (100 points)</li>
				<li><strong>Class/pseudo-class/attribute</strong> - <code>.class</code>, <code>:hover</code>, <code>[attr]</code> (10 points)</li>
				<li><strong>Element/pseudo-element</strong> - <code>div</code>, <code>::before</code> (1 point)</li>
				<li><strong>Universal selector</strong> - <code>*</code> (0 points)</li>
			</ol>
		</section>

		<p class="ref-see-also">Practice: <a href="#css-basic-selectors/0">Basic Selectors Lessons</a> | <a href="#css-advanced-selectors/0">Advanced Selectors</a></p>
	`,

	flexbox: `
		<h1>Flexbox Reference</h1>
		<p class="ref-intro">Flexbox is a one-dimensional layout system. Apply <code>display: flex</code> to a container, and its children become flex items.</p>

		<section class="ref-section">
			<h2>Container Properties</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Description</th></tr></thead>
				<tbody>
					<tr><td><code>display</code></td><td>flex, inline-flex</td><td>Enable flex container</td></tr>
					<tr><td><code>flex-direction</code></td><td>row, row-reverse, column, column-reverse</td><td>Main axis direction</td></tr>
					<tr><td><code>flex-wrap</code></td><td>nowrap, wrap, wrap-reverse</td><td>Allow items to wrap</td></tr>
					<tr><td><code>justify-content</code></td><td>flex-start, flex-end, center, space-between, space-around, space-evenly</td><td>Main axis alignment</td></tr>
					<tr><td><code>align-items</code></td><td>stretch, flex-start, flex-end, center, baseline</td><td>Cross axis alignment</td></tr>
					<tr><td><code>align-content</code></td><td>stretch, flex-start, flex-end, center, space-between, space-around</td><td>Multi-line alignment</td></tr>
					<tr><td><code>gap</code></td><td>length</td><td>Space between items</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Item Properties</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Description</th></tr></thead>
				<tbody>
					<tr><td><code>flex-grow</code></td><td>number (default: 0)</td><td>How much item grows</td></tr>
					<tr><td><code>flex-shrink</code></td><td>number (default: 1)</td><td>How much item shrinks</td></tr>
					<tr><td><code>flex-basis</code></td><td>length, auto</td><td>Initial size before grow/shrink</td></tr>
					<tr><td><code>flex</code></td><td>grow shrink basis</td><td>Shorthand (e.g., <code>flex: 1</code>)</td></tr>
					<tr><td><code>align-self</code></td><td>auto, flex-start, flex-end, center, stretch</td><td>Override align-items</td></tr>
					<tr><td><code>order</code></td><td>integer (default: 0)</td><td>Visual order of item</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Common Patterns</h2>
			<div class="code-block">
				<pre><code>/* Center horizontally and vertically */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Space items evenly */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Equal-width columns */
.columns {
  display: flex;
  gap: 1rem;
}
.columns > * {
  flex: 1;
}

/* Sticky footer */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main { flex: 1; }</code></pre>
			</div>
		</section>

		<p class="ref-see-also">Practice: <a href="#flexbox/0">Flexbox Lessons</a> | Compare: <a href="#reference/grid">CSS Grid</a></p>
	`,

	grid: `
		<h1>CSS Grid Reference</h1>
		<p class="ref-intro">CSS Grid is a two-dimensional layout system for complex row and column layouts. Apply <code>display: grid</code> to a container.</p>

		<section class="ref-section">
			<h2>Container Properties</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Description</th></tr></thead>
				<tbody>
					<tr><td><code>display</code></td><td>grid, inline-grid</td><td>Enable grid container</td></tr>
					<tr><td><code>grid-template-columns</code></td><td>track sizes</td><td>Define column widths</td></tr>
					<tr><td><code>grid-template-rows</code></td><td>track sizes</td><td>Define row heights</td></tr>
					<tr><td><code>gap</code></td><td>length</td><td>Space between cells</td></tr>
					<tr><td><code>justify-items</code></td><td>start, end, center, stretch</td><td>Horizontal alignment in cells</td></tr>
					<tr><td><code>align-items</code></td><td>start, end, center, stretch</td><td>Vertical alignment in cells</td></tr>
					<tr><td><code>justify-content</code></td><td>start, end, center, space-between, space-around</td><td>Horizontal grid alignment</td></tr>
					<tr><td><code>align-content</code></td><td>start, end, center, space-between, space-around</td><td>Vertical grid alignment</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Track Sizing</h2>
			<table class="ref-table">
				<thead><tr><th>Value</th><th>Description</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>px, rem, %</code></td><td>Fixed or relative sizes</td><td><code>200px 1rem 50%</code></td></tr>
					<tr><td><code>fr</code></td><td>Fraction of available space</td><td><code>1fr 2fr 1fr</code></td></tr>
					<tr><td><code>auto</code></td><td>Size to content</td><td><code>auto 1fr auto</code></td></tr>
					<tr><td><code>minmax(min, max)</code></td><td>Size range</td><td><code>minmax(100px, 1fr)</code></td></tr>
					<tr><td><code>repeat(n, size)</code></td><td>Repeat n times</td><td><code>repeat(3, 1fr)</code></td></tr>
					<tr><td><code>repeat(auto-fill, ...)</code></td><td>Fill available space</td><td><code>repeat(auto-fill, minmax(200px, 1fr))</code></td></tr>
					<tr><td><code>repeat(auto-fit, ...)</code></td><td>Fill and stretch</td><td><code>repeat(auto-fit, minmax(200px, 1fr))</code></td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Item Properties</h2>
			<table class="ref-table">
				<thead><tr><th>Property</th><th>Values</th><th>Description</th></tr></thead>
				<tbody>
					<tr><td><code>grid-column</code></td><td>start / end</td><td>Column span</td></tr>
					<tr><td><code>grid-row</code></td><td>start / end</td><td>Row span</td></tr>
					<tr><td><code>grid-area</code></td><td>row-start / col-start / row-end / col-end</td><td>Shorthand for both</td></tr>
					<tr><td><code>justify-self</code></td><td>start, end, center, stretch</td><td>Horizontal alignment</td></tr>
					<tr><td><code>align-self</code></td><td>start, end, center, stretch</td><td>Vertical alignment</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Common Patterns</h2>
			<div class="code-block">
				<pre><code>/* 3 equal columns */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Responsive auto-fill */
.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Holy grail layout */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Span multiple cells */
.wide {
  grid-column: 1 / -1; /* Full width */
}
.tall {
  grid-row: span 2; /* 2 rows */
}</code></pre>
			</div>
		</section>

		<p class="ref-see-also">Practice: <a href="#grid/0">Grid Lessons</a> | Compare: <a href="#reference/flexbox">Flexbox</a></p>
	`,

	html: `
		<h1>HTML Elements Reference</h1>
		<p class="ref-intro">Semantic HTML elements that describe their meaning to browsers and assistive technologies.</p>

		<section class="ref-section">
			<h2>Document Structure</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;html&gt;</code></td><td>Root element</td><td><code>&lt;html lang="en"&gt;</code></td></tr>
					<tr><td><code>&lt;head&gt;</code></td><td>Document metadata</td><td>Contains title, meta, links</td></tr>
					<tr><td><code>&lt;body&gt;</code></td><td>Document content</td><td>All visible content</td></tr>
					<tr><td><code>&lt;header&gt;</code></td><td>Introductory content</td><td>Logo, nav, title</td></tr>
					<tr><td><code>&lt;nav&gt;</code></td><td>Navigation links</td><td>Main site navigation</td></tr>
					<tr><td><code>&lt;main&gt;</code></td><td>Main content (one per page)</td><td>Primary page content</td></tr>
					<tr><td><code>&lt;footer&gt;</code></td><td>Footer content</td><td>Copyright, links</td></tr>
					<tr><td><code>&lt;aside&gt;</code></td><td>Sidebar/tangential content</td><td>Related links, ads</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Content Sectioning</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;article&gt;</code></td><td>Self-contained content</td><td>Blog post, comment</td></tr>
					<tr><td><code>&lt;section&gt;</code></td><td>Thematic grouping</td><td>Chapter, tab panel</td></tr>
					<tr><td><code>&lt;h1&gt;-&lt;h6&gt;</code></td><td>Headings (hierarchy)</td><td>One h1 per page, nest others</td></tr>
					<tr><td><code>&lt;p&gt;</code></td><td>Paragraph</td><td>Block of text</td></tr>
					<tr><td><code>&lt;div&gt;</code></td><td>Generic container</td><td>When no semantic element fits</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Text Content</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;a&gt;</code></td><td>Hyperlink</td><td><code>&lt;a href="url"&gt;Link&lt;/a&gt;</code></td></tr>
					<tr><td><code>&lt;strong&gt;</code></td><td>Important text (bold)</td><td><code>&lt;strong&gt;Warning&lt;/strong&gt;</code></td></tr>
					<tr><td><code>&lt;em&gt;</code></td><td>Emphasized text (italic)</td><td><code>&lt;em&gt;really&lt;/em&gt;</code></td></tr>
					<tr><td><code>&lt;code&gt;</code></td><td>Inline code</td><td><code>&lt;code&gt;const x&lt;/code&gt;</code></td></tr>
					<tr><td><code>&lt;pre&gt;</code></td><td>Preformatted text</td><td>Code blocks</td></tr>
					<tr><td><code>&lt;blockquote&gt;</code></td><td>Block quotation</td><td><code>&lt;blockquote cite="src"&gt;</code></td></tr>
					<tr><td><code>&lt;span&gt;</code></td><td>Generic inline container</td><td>Styling inline text</td></tr>
					<tr><td><code>&lt;br&gt;</code></td><td>Line break</td><td>Address, poem lines</td></tr>
					<tr><td><code>&lt;hr&gt;</code></td><td>Thematic break</td><td>Scene change, topic shift</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Semantic Inline</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;time&gt;</code></td><td>Date/time</td><td><code>&lt;time datetime="2024-01-15"&gt;</code></td></tr>
					<tr><td><code>&lt;mark&gt;</code></td><td>Highlighted text</td><td><code>&lt;mark&gt;important&lt;/mark&gt;</code></td></tr>
					<tr><td><code>&lt;small&gt;</code></td><td>Fine print</td><td>Legal text, copyright</td></tr>
					<tr><td><code>&lt;abbr&gt;</code></td><td>Abbreviation</td><td><code>&lt;abbr title="HyperText"&gt;HTML&lt;/abbr&gt;</code></td></tr>
					<tr><td><code>&lt;kbd&gt;</code></td><td>Keyboard input</td><td><code>&lt;kbd&gt;Ctrl+C&lt;/kbd&gt;</code></td></tr>
					<tr><td><code>&lt;sub&gt;</code></td><td>Subscript</td><td>H<sub>2</sub>O</td></tr>
					<tr><td><code>&lt;sup&gt;</code></td><td>Superscript</td><td>x<sup>2</sup></td></tr>
					<tr><td><code>&lt;ins&gt;</code></td><td>Inserted text</td><td>Shows additions</td></tr>
					<tr><td><code>&lt;del&gt;</code></td><td>Deleted text</td><td>Shows removals</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Lists</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;ul&gt;</code></td><td>Unordered list</td><td>Bulleted items</td></tr>
					<tr><td><code>&lt;ol&gt;</code></td><td>Ordered list</td><td>Numbered steps</td></tr>
					<tr><td><code>&lt;li&gt;</code></td><td>List item</td><td>Inside ul or ol</td></tr>
					<tr><td><code>&lt;dl&gt;</code></td><td>Description list</td><td>Term/definition pairs</td></tr>
					<tr><td><code>&lt;dt&gt;</code></td><td>Description term</td><td>The term being defined</td></tr>
					<tr><td><code>&lt;dd&gt;</code></td><td>Description details</td><td>Definition of the term</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Forms</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Key Attributes</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;form&gt;</code></td><td>Form container</td><td>action, method</td></tr>
					<tr><td><code>&lt;input&gt;</code></td><td>Input field</td><td>type, name, required, placeholder</td></tr>
					<tr><td><code>&lt;textarea&gt;</code></td><td>Multi-line text</td><td>rows, cols, name</td></tr>
					<tr><td><code>&lt;select&gt;</code></td><td>Dropdown menu</td><td>name, multiple</td></tr>
					<tr><td><code>&lt;option&gt;</code></td><td>Select option</td><td>value, selected</td></tr>
					<tr><td><code>&lt;button&gt;</code></td><td>Clickable button</td><td>type (submit/button/reset)</td></tr>
					<tr><td><code>&lt;label&gt;</code></td><td>Input label</td><td>for (matches input id)</td></tr>
					<tr><td><code>&lt;fieldset&gt;</code></td><td>Group form controls</td><td>With legend for title</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Media</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Key Attributes</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;img&gt;</code></td><td>Image</td><td>src, alt (required), width, height</td></tr>
					<tr><td><code>&lt;figure&gt;</code></td><td>Self-contained media</td><td>Contains img + figcaption</td></tr>
					<tr><td><code>&lt;figcaption&gt;</code></td><td>Figure caption</td><td>Description of figure</td></tr>
					<tr><td><code>&lt;video&gt;</code></td><td>Video player</td><td>src, controls, autoplay</td></tr>
					<tr><td><code>&lt;audio&gt;</code></td><td>Audio player</td><td>src, controls</td></tr>
					<tr><td><code>&lt;picture&gt;</code></td><td>Responsive images</td><td>Contains source + img</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Tables</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Notes</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;table&gt;</code></td><td>Table container</td><td>For tabular data only</td></tr>
					<tr><td><code>&lt;thead&gt;</code></td><td>Table header group</td><td>Contains header rows</td></tr>
					<tr><td><code>&lt;tbody&gt;</code></td><td>Table body group</td><td>Contains data rows</td></tr>
					<tr><td><code>&lt;tfoot&gt;</code></td><td>Table footer group</td><td>Summary row</td></tr>
					<tr><td><code>&lt;tr&gt;</code></td><td>Table row</td><td>Contains cells</td></tr>
					<tr><td><code>&lt;th&gt;</code></td><td>Header cell</td><td>scope="col" or "row"</td></tr>
					<tr><td><code>&lt;td&gt;</code></td><td>Data cell</td><td>colspan, rowspan for spanning</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Interactive Elements</h2>
			<table class="ref-table">
				<thead><tr><th>Element</th><th>Purpose</th><th>Key Attributes</th></tr></thead>
				<tbody>
					<tr><td><code>&lt;details&gt;</code></td><td>Expandable content</td><td>open (default expanded)</td></tr>
					<tr><td><code>&lt;summary&gt;</code></td><td>Details toggle label</td><td>First child of details</td></tr>
					<tr><td><code>&lt;dialog&gt;</code></td><td>Modal/popup dialog</td><td>open, use showModal()</td></tr>
					<tr><td><code>&lt;progress&gt;</code></td><td>Progress bar</td><td>value, max</td></tr>
					<tr><td><code>&lt;meter&gt;</code></td><td>Scalar measurement</td><td>value, min, max, low, high</td></tr>
					<tr><td><code>&lt;datalist&gt;</code></td><td>Input suggestions</td><td>id (link via input list attr)</td></tr>
				</tbody>
			</table>
		</section>

		<p class="ref-see-also">Learn: <a href="#html">HTML Section</a> | Style with: <a href="#reference/css">CSS Properties</a></p>
	`,

	markdown: `
		<h1>Markdown Syntax Reference</h1>
		<p class="ref-intro">A quick guide to Markdown syntax for formatting text documents. Markdown is used in GitHub, documentation, and note-taking apps.</p>

		<section class="ref-section">
			<h2>Text Formatting</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Result</th><th>Notes</th></tr></thead>
				<tbody>
					<tr><td><code>**bold**</code></td><td><strong>bold</strong></td><td>Or use __bold__</td></tr>
					<tr><td><code>*italic*</code></td><td><em>italic</em></td><td>Or use _italic_</td></tr>
					<tr><td><code>***bold italic***</code></td><td><strong><em>bold italic</em></strong></td><td>Combine both</td></tr>
					<tr><td><code>~~strikethrough~~</code></td><td><s>strikethrough</s></td><td>GFM extension</td></tr>
					<tr><td><code>\`inline code\`</code></td><td><code>inline code</code></td><td>Monospace font</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Headings</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Level</th><th>Usage</th></tr></thead>
				<tbody>
					<tr><td><code># Heading 1</code></td><td>h1</td><td>Document title</td></tr>
					<tr><td><code>## Heading 2</code></td><td>h2</td><td>Main sections</td></tr>
					<tr><td><code>### Heading 3</code></td><td>h3</td><td>Subsections</td></tr>
					<tr><td><code>#### Heading 4</code></td><td>h4</td><td>Minor sections</td></tr>
					<tr><td><code>##### Heading 5</code></td><td>h5</td><td>Rarely used</td></tr>
					<tr><td><code>###### Heading 6</code></td><td>h6</td><td>Smallest heading</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Lists</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Type</th><th>Notes</th></tr></thead>
				<tbody>
					<tr><td><code>- Item</code></td><td>Unordered</td><td>Or use * or +</td></tr>
					<tr><td><code>1. Item</code></td><td>Ordered</td><td>Numbers auto-increment</td></tr>
					<tr><td><code>  - Nested</code></td><td>Nested list</td><td>2-space indent</td></tr>
					<tr><td><code>- [x] Task</code></td><td>Task list</td><td>GFM extension</td></tr>
					<tr><td><code>- [ ] Task</code></td><td>Unchecked task</td><td>Interactive checkboxes</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Links & Images</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Purpose</th><th>Example</th></tr></thead>
				<tbody>
					<tr><td><code>[text](url)</code></td><td>Inline link</td><td>[Google](https://google.com)</td></tr>
					<tr><td><code>[text](url "title")</code></td><td>Link with tooltip</td><td>Hover text</td></tr>
					<tr><td><code>![alt](url)</code></td><td>Image</td><td>Alt text for accessibility</td></tr>
					<tr><td><code>&lt;url&gt;</code></td><td>Auto-link</td><td>URLs become clickable</td></tr>
					<tr><td><code>[ref]: url</code></td><td>Reference link</td><td>Define at doc bottom</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Code Blocks</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Purpose</th><th>Notes</th></tr></thead>
				<tbody>
					<tr><td><code>\`\`\`</code></td><td>Fenced code</td><td>3 backticks or tildes</td></tr>
					<tr><td><code>\`\`\`js</code></td><td>Syntax highlight</td><td>Add language identifier</td></tr>
					<tr><td><code>    code</code></td><td>Indented code</td><td>4-space indent</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Block Elements</h2>
			<table class="ref-table">
				<thead><tr><th>Syntax</th><th>Element</th><th>Notes</th></tr></thead>
				<tbody>
					<tr><td><code>> Quote</code></td><td>Blockquote</td><td>Nest with >></td></tr>
					<tr><td><code>---</code></td><td>Horizontal rule</td><td>Or *** or ___</td></tr>
					<tr><td><code>| A | B |</code></td><td>Table</td><td>GFM extension</td></tr>
				</tbody>
			</table>
		</section>

		<section class="ref-section">
			<h2>Tables (GFM)</h2>
			<div class="ref-example">
				<pre><code>| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |</code></pre>
			</div>
			<p>Use colons for alignment: <code>:---</code> (left), <code>:---:</code> (center), <code>---:</code> (right)</p>
		</section>

		<p class="ref-see-also">Learn: <a href="#markdown">Markdown Section</a> | Also try: <a href="#html">HTML Elements</a></p>
	`
};

// ================= URL ROUTING & PAGE SWITCHING =================

function initRouter() {
	// Handle browser back/forward
	window.addEventListener("popstate", handlePopState);
}

function handlePopState() {
	handleRoute(false);
}

/**
 * Strip HTML tags from a string for meta descriptions
 */
function stripHtml(html) {
	const tmp = document.createElement("div");
	tmp.innerHTML = html || "";
	return tmp.textContent || tmp.innerText || "";
}

/**
 * Update page meta tags based on current route for SEO
 */
function updatePageMeta(route) {
	const defaultTitle = "CODE CRISPIES - Learn HTML & CSS Interactively | Free Coding Practice";
	const defaultDesc =
		"Master HTML, CSS, and Tailwind through hands-on coding exercises. Free, open-source learning platform with instant feedback. No account required.";

	let title = defaultTitle;
	let description = defaultDesc;

	if (!route) {
		document.title = title;
		return;
	}

	switch (route.type) {
		case RouteType.HOME:
			// Use defaults
			break;

		case RouteType.SECTION: {
			const sectionNames = { css: "CSS", html: "HTML", tailwind: "Tailwind CSS", markdown: "Markdown" };
			const sectionName = sectionNames[route.sectionId] || route.sectionId;
			title = `${sectionName} Lessons - CODE CRISPIES | Learn ${sectionName}`;
			description = `Learn ${sectionName} through interactive coding exercises. Hands-on practice with instant feedback.`;
			break;
		}

		case RouteType.LESSON: {
			const module = lessonEngine.modules.find((m) => m.id === route.moduleId);
			const lesson = module?.lessons[route.lessonIndex];
			if (module && lesson) {
				title = `${lesson.title} - ${module.title} | CODE CRISPIES`;
				const lessonDesc = stripHtml(lesson.description || lesson.task);
				description = lessonDesc.length > 155 ? lessonDesc.slice(0, 152) + "..." : lessonDesc || defaultDesc;
			}
			break;
		}

		case RouteType.REFERENCE: {
			const refNames = {
				css: "CSS Properties",
				selectors: "CSS Selectors",
				flexbox: "Flexbox",
				grid: "CSS Grid",
				html: "HTML Elements",
				markdown: "Markdown Syntax"
			};
			const refName = refNames[route.refId] || "Reference";
			title = `${refName} Reference - CODE CRISPIES`;
			description = `Quick reference guide for ${refName}. Syntax, examples, and common patterns for web development.`;
			break;
		}
	}

	// Update document title
	document.title = title;

	// Update meta description
	const metaDesc = document.querySelector('meta[name="description"]');
	if (metaDesc) metaDesc.setAttribute("content", description);

	// Update Open Graph tags
	const ogTitle = document.querySelector('meta[property="og:title"]');
	const ogDesc = document.querySelector('meta[property="og:description"]');
	if (ogTitle) ogTitle.setAttribute("content", title.replace(" | CODE CRISPIES", "").replace(" - CODE CRISPIES", ""));
	if (ogDesc) ogDesc.setAttribute("content", description);

	// Update Twitter tags
	const twitterTitle = document.querySelector('meta[name="twitter:title"]');
	const twitterDesc = document.querySelector('meta[name="twitter:description"]');
	if (twitterTitle) twitterTitle.setAttribute("content", title.replace(" | CODE CRISPIES", "").replace(" - CODE CRISPIES", ""));
	if (twitterDesc) twitterDesc.setAttribute("content", description);
}

/**
 * Main route handler - switches between page types
 */
function handleRoute(shouldUpdateUrl = true) {
	const route = parseHash();

	if (!route) {
		// Invalid route - go to home
		navigateTo("");
		showLandingPage();
		return;
	}

	switch (route.type) {
		case RouteType.HOME:
			showLandingPage();
			break;
		case RouteType.SECTION:
			showSectionPage(route.sectionId);
			break;
		case RouteType.REFERENCE:
			showReferencePage(route.refId);
			break;
		case RouteType.LESSON:
			navigateToLesson(route.moduleId, route.lessonIndex, shouldUpdateUrl);
			break;
		case RouteType.LANGUAGE:
			// Switch language and redirect to home
			track("language_url", { language: route.lang });
			setLanguage(route.lang);
			applyTranslations();
			// Sync language dropdown
			if (elements.langSelect) {
				elements.langSelect.value = route.lang;
			}
			// Reload modules in new language and re-render sidebar
			const langModules = loadModules(route.lang);
			lessonEngine.setModules(langModules);
			renderModuleList(elements.moduleList, langModules, selectModule, selectLesson);
			updateProgressDisplay();
			history.replaceState(null, "", window.location.pathname);
			showLandingPage();
			return; // Skip updateNavHighlight/updatePageMeta since we're redirecting
		default:
			showLandingPage();
	}

	updateNavHighlight(route);
	updatePageMeta(route);
}

/**
 * Hide all page containers
 */
function hideAllPages() {
	elements.landingPage?.classList.add("hidden");
	elements.sectionPage?.classList.add("hidden");
	elements.referencePage?.classList.add("hidden");
	elements.gameLayout?.classList.add("hidden");
}

/**
 * Update section color coding on body
 * @param {string|null} sectionId - Section ID (css, html, tailwind) or null to reset
 */
function updateSectionColor(sectionId) {
	if (sectionId) {
		document.body.setAttribute("data-section", sectionId);
	} else {
		document.body.removeAttribute("data-section");
	}

	// Update code editor theme for section
	if (codeEditor) {
		codeEditor.setSection(sectionId);
	}
}

/**
 * Show home landing page
 */
function showLandingPage() {
	hideAllPages();
	elements.landingPage?.classList.remove("hidden");

	// Reset section color on landing page
	updateSectionColor(null);

	// Update section progress on landing page
	updateLandingProgress();

	// Render footer lesson links
	renderFooterLessonLinks();

	// Scroll to top after content is rendered
	requestAnimationFrame(() => window.scrollTo(0, 0));
}

/**
 * Render module links in the landing page footer, grouped by section
 */
function renderFooterLessonLinks() {
	const modules = lessonEngine.modules || [];
	const sectionGroups = { css: [], html: [], javascript: [] };

	modules.forEach((module) => {
		if (module.excludeFromProgress) return;
		const sectionId = getModuleSection(module);
		if (sectionId && sectionGroups[sectionId]) {
			sectionGroups[sectionId].push(module);
		}
	});

	let html = "";
	Object.entries(sectionGroups).forEach(([sectionId, sectionModules]) => {
		if (sectionModules.length === 0) return;
		const sectionName = sectionId.toUpperCase();
		html += `<div class="footer-section-group"><strong><a href="#${sectionId}">${sectionName}</a></strong>`;
		sectionModules.forEach((module) => {
			html += `<a href="#${module.id}/0">${module.title}</a>`;
		});
		html += "</div>";
	});

	// Update all footer lesson links
	if (elements.footerLessonLinks) {
		elements.footerLessonLinks.innerHTML = html;
	}
	if (elements.refFooterLessonLinks) {
		elements.refFooterLessonLinks.innerHTML = html;
	}
	if (elements.sectionFooterLessonLinks) {
		elements.sectionFooterLessonLinks.innerHTML = html;
	}
}

/**
 * Update progress indicators on landing page
 */
function updateLandingProgress() {
	["css", "html", "markdown", "javascript"].forEach((sectionId) => { // tailwind temporarily disabled
		const progressEl = document.getElementById(`${sectionId}-progress`);
		if (progressEl) {
			const sectionModules = getModulesBySection(lessonEngine.modules, sectionId);
			let completed = 0;
			let total = 0;
			sectionModules.forEach((m) => {
				total += m.lessons.length;
				const progress = lessonEngine.userProgress[m.id];
				if (progress?.completed) {
					completed += progress.completed.length;
				}
			});
			if (total > 0) {
				progressEl.textContent = `${total} lessons to explore`;
			} else {
				progressEl.textContent = "";
			}
		}
	});
}

/**
 * Show section landing page
 */
function showSectionPage(sectionId) {
	hideAllPages();
	elements.sectionPage?.classList.remove("hidden");

	// Update section color
	updateSectionColor(sectionId);

	// Track section page view
	track("section_view", { section: sectionId });

	const section = getSection(sectionId);
	if (!section) {
		showLandingPage();
		return;
	}

	// Update section header
	if (elements.sectionTitle) elements.sectionTitle.textContent = section.title;
	if (elements.sectionDescription) elements.sectionDescription.textContent = section.description;

	// Inject educational content (includes integrated module links)
	if (elements.sectionIntro && sectionContent[sectionId]) {
		elements.sectionIntro.innerHTML = sectionContent[sectionId];
		// Highlight code blocks with CodeMirror
		highlightSectionCodeBlocks();
	}

	// Get modules for this section to calculate progress
	const sectionModules = getModulesBySection(lessonEngine.modules, sectionId);

	// Calculate section progress
	let completed = 0;
	let total = 0;
	sectionModules.forEach((m) => {
		total += m.lessons.length;
		const progress = lessonEngine.userProgress[m.id];
		if (progress?.completed) {
			completed += progress.completed.length;
		}
	});

	// Update progress bar
	const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
	if (elements.sectionProgressFill) elements.sectionProgressFill.style.width = `${percent}%`;
	if (elements.sectionProgressText) elements.sectionProgressText.textContent = `${completed} of ${total} lessons complete`;

	// Scroll to top after content is rendered
	requestAnimationFrame(() => window.scrollTo(0, 0));
}

/**
 * Show reference/cheatsheet page
 */
function showReferencePage(refId) {
	hideAllPages();
	elements.referencePage?.classList.remove("hidden");

	// Default to CSS if no refId
	const activeRef = refId || "css";

	// Map reference to section for color coding
	const refToSection = { css: "css", selectors: "css", flexbox: "css", grid: "css", html: "html", markdown: "markdown" };
	updateSectionColor(refToSection[activeRef] || "css");

	// Track reference page view
	track("reference_view", { ref: activeRef });

	// Update nav highlighting
	const navLinks = elements.referenceNav?.querySelectorAll(".ref-nav-link");
	navLinks?.forEach((link) => {
		link.classList.toggle("active", link.dataset.ref === activeRef);
	});

	// Load reference content
	if (elements.referenceBody && referenceContent[activeRef]) {
		elements.referenceBody.innerHTML = referenceContent[activeRef];
		// Make large tables collapsible
		makeTablesCollapsible();
		// Highlight code blocks
		highlightReferenceCodeBlocks();
	} else if (elements.referenceBody) {
		elements.referenceBody.innerHTML = `<p>Reference for "${activeRef}" coming soon...</p>`;
	}

	// Scroll to top after content is rendered
	requestAnimationFrame(() => window.scrollTo(0, 0));
}

/**
 * Make reference tables with more than 5 rows collapsible
 */
function makeTablesCollapsible() {
	const tables = elements.referenceBody?.querySelectorAll(".ref-table");
	const ROW_LIMIT = 5;

	tables?.forEach((table) => {
		const tbody = table.querySelector("tbody");
		if (!tbody) return;

		const rows = Array.from(tbody.querySelectorAll("tr"));
		if (rows.length <= ROW_LIMIT) return;

		// Split rows: visible (first 5) and hidden (rest)
		const visibleRows = rows.slice(0, ROW_LIMIT);
		const hiddenRows = rows.slice(ROW_LIMIT);

		// Create new tbody with only visible rows
		tbody.innerHTML = "";
		visibleRows.forEach((row) => tbody.appendChild(row));

		// Create details/summary for hidden rows
		const details = document.createElement("details");
		details.className = "ref-table-more";

		const summary = document.createElement("summary");
		summary.textContent = `Show ${hiddenRows.length} more...`;
		details.appendChild(summary);

		// Create a wrapper table for hidden rows (same structure)
		const hiddenTable = document.createElement("table");
		hiddenTable.className = "ref-table ref-table-continuation";
		const hiddenTbody = document.createElement("tbody");
		hiddenRows.forEach((row) => hiddenTbody.appendChild(row));
		hiddenTable.appendChild(hiddenTbody);
		details.appendChild(hiddenTable);

		// Insert after the original table
		table.parentNode.insertBefore(details, table.nextSibling);
	});
}

/**
 * Highlight code blocks in reference pages with CodeMirror
 */
function highlightReferenceCodeBlocks() {
	// Clean up previous views
	sectionCodeViews.forEach((view) => view.destroy());
	sectionCodeViews = [];

	const codeBlocks = elements.referenceBody?.querySelectorAll("pre code");
	codeBlocks?.forEach((block) => {
		const code = block.textContent;
		const isHtml = block.classList.contains("language-html");
		const parent = block.parentElement;

		parent.innerHTML = "";
		parent.classList.add("cm-code-block");

		const view = new EditorView({
			state: EditorState.create({
				doc: code,
				extensions: [isHtml ? html() : css(), crispyEditorTheme, readOnlyTheme, EditorState.readOnly.of(true), EditorView.editable.of(false)]
			}),
			parent
		});
		sectionCodeViews.push(view);
	});
}

/**
 * Show lesson UI (game layout)
 */
function showLessonUI() {
	hideAllPages();
	elements.gameLayout?.classList.remove("hidden");
}

/**
 * Update nav link highlighting
 */
function updateNavHighlight(route) {
	if (!elements.mainNav) return;

	const navLinks = elements.mainNav.querySelectorAll(".nav-link");
	navLinks.forEach((link) => {
		link.classList.remove("active");

		if (route?.type === RouteType.SECTION && link.dataset.section === route.sectionId) {
			link.classList.add("active");
		} else if (route?.type === RouteType.REFERENCE && link.dataset.section === "reference") {
			link.classList.add("active");
		} else if (route?.type === RouteType.LESSON) {
			// Highlight section based on module's inferred section
			// Skip highlighting for modules excluded from progress (welcome, playground, goodbye)
			const module = lessonEngine.modules.find((m) => m.id === route.moduleId);
			if (module && !module.excludeFromProgress) {
				const moduleSection = getModuleSection(module);
				if (link.dataset.section === moduleSection) {
					link.classList.add("active");
				}
			}
		}
	});
}

function navigateToLesson(moduleId, lessonIndex, shouldUpdateUrl = true) {
	// Show lesson UI
	showLessonUI();

	// Validate moduleId exists
	const module = lessonEngine.modules.find((m) => m.id === moduleId);
	if (!module) {
		// Invalid module - fallback to first module
		const fallbackModule = lessonEngine.modules[0];
		if (fallbackModule) {
			replaceHash(fallbackModule.id, 0);
			lessonEngine.setModuleById(fallbackModule.id);
			lessonEngine.setLessonByIndex(0);
			loadCurrentLesson();
			updateModuleHighlight(fallbackModule.id);
			updateSectionColor(getModuleSection(fallbackModule));
		}
		return;
	}

	// Update section color based on module
	updateSectionColor(getModuleSection(module));

	// Validate lessonIndex is in bounds
	if (lessonIndex < 0 || lessonIndex >= module.lessons.length) {
		// Invalid lesson - go to first lesson of module
		replaceHash(moduleId, 0);
		lessonEngine.setModuleById(moduleId);
		lessonEngine.setLessonByIndex(0);
		loadCurrentLesson();
		updateModuleHighlight(moduleId);
		return;
	}

	// Valid navigation
	lessonEngine.setModuleById(moduleId);
	lessonEngine.setLessonByIndex(lessonIndex);

	if (shouldUpdateUrl) {
		updateHash(moduleId, lessonIndex);
	}

	loadCurrentLesson();
	updateModuleHighlight(moduleId);
}

// ================= INITIALIZATION =================

function initCodeEditor() {
	const container = elements.editorContent;
	if (!container) return;

	// Remove the textarea - CodeMirror will replace it
	const textarea = container.querySelector("textarea");
	if (textarea) {
		textarea.remove();
	}

	// Initialize CodeMirror
	codeEditor = new CodeEditor(container, {
		mode: currentMode,
		placeholder: "Type your code here...",
		onChange: handleEditorChange
	});

	codeEditor.init("");
}

function init() {
	// Initialize i18n before anything else
	initI18n();

	// Set dynamic year in footer
	document.querySelectorAll(".current-year").forEach((el) => {
		el.textContent = new Date().getFullYear();
	});

	loadUserSettings();

	// Restore cached lesson content immediately to avoid "Loading..." flash
	restoreLessonCache();

	// Initialize CodeMirror editor
	initCodeEditor();

	// Set timeout to show fallback if loading takes too long
	loadingTimeout = setTimeout(showLoadingFallback, 3000);

	// Handle OAuth callback FIRST (tokens are in URL hash, must run before router)
	handleOAuthCallback().then(() => {
		// Load modules (this also calls handleRoute inside)
		initializeModules();

		// Initialize URL router for browser back/forward
		initRouter();

		// Initialize authentication
		initAuth(lessonEngine);
	});

	// Sidebar controls
	elements.menuBtn.addEventListener("click", openSidebar);
	elements.closeSidebar.addEventListener("click", closeSidebar);
	elements.sidebarBackdrop.addEventListener("click", closeSidebar);

	// Sidebar nav links (mobile) - close sidebar on click
	document.querySelectorAll(".sidebar-nav-link").forEach((link) => {
		link.addEventListener("click", closeSidebar);
	});

	// Logo click - navigate to home landing
	elements.logoLink.addEventListener("click", (e) => {
		e.preventDefault();
		navigateTo("");
		showLandingPage();
		track("logo_click");
	});

	// Language select
	elements.langSelect.value = getLanguage();
	elements.langSelect.addEventListener("change", (e) => changeLanguage(e.target.value));

	// Expected result toggle
	elements.showExpectedBtn.addEventListener("click", toggleExpectedResult);

	// Navigation
	elements.prevBtn.addEventListener("click", prevLesson);
	elements.nextBtn.addEventListener("click", nextLesson);
	elements.runBtn.addEventListener("click", runCode);

	// Editor tools
	elements.undoBtn.addEventListener("click", () => {
		if (codeEditor) codeEditor.undo();
	});
	elements.redoBtn.addEventListener("click", () => {
		if (codeEditor) codeEditor.redo();
	});
	elements.resetCodeBtn.addEventListener("click", handleResetCodeClick);
	elements.randomTemplateBtn.addEventListener("click", loadRandomTemplate);
	elements.shareBtn.addEventListener("click", showShareDialog);

	// Dialogs
	elements.helpBtn.addEventListener("click", showHelp);
	elements.helpDialogClose.addEventListener("click", closeHelpDialog);
	elements.helpDialog.addEventListener("click", (e) => {
		if (e.target === elements.helpDialog) closeHelpDialog();
	});
	elements.resetBtn.addEventListener("click", showResetConfirmation);
	elements.resetDialogClose.addEventListener("click", closeResetDialog);
	elements.resetDialog.addEventListener("click", (e) => {
		if (e.target === elements.resetDialog) closeResetDialog();
	});
	elements.cancelReset.addEventListener("click", closeResetDialog);
	elements.confirmReset.addEventListener("click", handleResetConfirm);
	elements.resetCodeDialogClose.addEventListener("click", closeResetCodeDialog);
	elements.resetCodeDialog.addEventListener("click", (e) => {
		if (e.target === elements.resetCodeDialog) closeResetCodeDialog();
	});
	elements.cancelResetCode.addEventListener("click", closeResetCodeDialog);
	elements.confirmResetCode.addEventListener("click", handleResetCodeConfirm);

	// Share dialog
	elements.shareDialogClose.addEventListener("click", closeShareDialog);
	elements.shareDialog.addEventListener("click", (e) => {
		if (e.target === elements.shareDialog) closeShareDialog();
	});
	elements.copyUrlBtn.addEventListener("click", copyShareUrl);

	// Legal dialogs (Privacy & Imprint)
	const privacyDialog = document.getElementById("privacy-dialog");
	const imprintDialog = document.getElementById("imprint-dialog");

	document.querySelectorAll(".privacy-link").forEach((btn) => {
		btn.addEventListener("click", () => {
			privacyDialog?.showModal();
			track("privacy_open");
		});
	});
	document.querySelectorAll(".imprint-link").forEach((btn) => {
		btn.addEventListener("click", () => {
			imprintDialog?.showModal();
			track("imprint_open");
		});
	});

	document.querySelector(".privacy-dialog-close")?.addEventListener("click", () => {
		privacyDialog?.close();
	});
	document.querySelector(".imprint-dialog-close")?.addEventListener("click", () => {
		imprintDialog?.close();
	});

	privacyDialog?.addEventListener("click", (e) => {
		if (e.target === privacyDialog) privacyDialog.close();
	});
	imprintDialog?.addEventListener("click", (e) => {
		if (e.target === imprintDialog) imprintDialog.close();
	});

	// Settings
	elements.disableFeedbackToggle.addEventListener("change", (e) => {
		state.userSettings.disableFeedbackErrors = !e.target.checked;
		saveUserSettings();
		track("setting_change", { setting: "feedback_errors", enabled: e.target.checked });
	});

	// Click on editor content to focus CodeMirror
	elements.editorContent?.addEventListener("click", () => {
		if (codeEditor) codeEditor.focus();
	});

	// Track clicks on "Coming Soon" disabled topic links
	document.addEventListener("click", (e) => {
		const disabledLink = e.target.closest(".topic-link-disabled");
		if (disabledLink) {
			const topicText = disabledLink.textContent.replace("Coming Soon", "").trim();
			track("coming_soon_click", { topic: topicText });
		}
	});

	// Track external link clicks
	document.addEventListener("click", (e) => {
		const link = e.target.closest('a[target="_blank"]');
		if (link) {
			track("external_link", { url: link.href, text: link.textContent.trim() });
		}
	});

	// Track header nav link clicks (CSS, HTML, Tailwind)
	document.querySelectorAll(".nav-link[data-section]").forEach((link) => {
		link.addEventListener("click", () => {
			track("header_nav_click", { section: link.dataset.section });
		});
	});

	// Track footer link clicks
	document.addEventListener("click", (e) => {
		const footerLink = e.target.closest(".landing-footer a, .section-footer a, .reference-footer a");
		if (footerLink && !footerLink.target) {
			track("footer_link", { href: footerLink.getAttribute("href"), text: footerLink.textContent.trim() });
		}
	});

	// Track practice/reference cross-links
	document.addEventListener("click", (e) => {
		const refLink = e.target.closest(".ref-see-also a");
		if (refLink) {
			track("practice_link", { href: refLink.getAttribute("href"), text: refLink.textContent.trim() });
		}
	});

	// Keyboard shortcuts
	document.addEventListener("keydown", (e) => {
		// Ctrl+Enter to run code
		if (e.ctrlKey && e.key === "Enter") {
			runCode();
			e.preventDefault();
		}

		// Escape to close sidebar (dialogs handle Escape natively)
		if (e.key === "Escape") {
			closeSidebar();
		}
	});

	// Landing page tracking (event delegation)
	elements.landingPage?.addEventListener("click", (e) => {
		const target = e.target.closest("a");
		if (!target) return;

		if (target.classList.contains("cta-button")) {
			track("landing_cta", { href: target.getAttribute("href") });
		} else if (target.classList.contains("section-card")) {
			track("landing_section", { section: target.dataset.section });
		} else if (target.closest(".footer-support")) {
			track("support_click", { location: "landing" });
		}
	});

	// Newsletter form submission
	const newsletterForm = document.getElementById("newsletter-form");
	const newsletterThanks = document.getElementById("newsletter-thanks");
	newsletterForm?.addEventListener("submit", async (e) => {
		e.preventDefault();
		const emailInput = document.getElementById("newsletter-email");
		const email = emailInput?.value;
		if (email) {
			// Import newsletter helper dynamically to avoid loading Supabase if not needed
			try {
				const { newsletter } = await import("./supabase.js");
				await newsletter.subscribe(email);
			} catch (err) {
				console.error("Newsletter subscription error:", err);
			}
			track("newsletter_signup", { email: email });
			newsletterForm.classList.add("hidden");
			newsletterThanks?.classList.remove("hidden");
		}
	});
}

// Start the application
init();