feat: populate concept section in renderLesson function

- Add logic to populate concept explanation, diagram, and containerVsItem fields
- Show concept section when concept data exists, hide when not defined
- Clear optional fields to prevent stale data from previous lessons
- Use textContent for text fields and innerHTML for diagram (SVG support)

src/helpers/renderer.js

@@ -149,6 +149,47 @@ export function renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl
 		inputEl.value = lesson.initialCode || "";
 	}
 
+	// Populate concept section if available
+	const conceptSection = document.getElementById("concept-section");
+	const conceptExplanation = document.getElementById("concept-explanation");
+	const conceptDiagram = document.getElementById("concept-diagram");
+	const conceptContainerVsItem = document.getElementById("concept-container-vs-item");
+
+	if (lesson.concept && lesson.concept.explanation) {
+		// Show the concept section
+		if (conceptSection) {
+			conceptSection.style.display = "";
+		}
+
+		// Populate explanation (required field)
+		if (conceptExplanation) {
+			conceptExplanation.textContent = lesson.concept.explanation;
+		}
+
+		// Populate optional diagram
+		if (conceptDiagram) {
+			if (lesson.concept.diagram) {
+				conceptDiagram.innerHTML = lesson.concept.diagram;
+			} else {
+				conceptDiagram.innerHTML = "";
+			}
+		}
+
+		// Populate optional containerVsItem explanation
+		if (conceptContainerVsItem) {
+			if (lesson.concept.containerVsItem) {
+				conceptContainerVsItem.textContent = lesson.concept.containerVsItem;
+			} else {
+				conceptContainerVsItem.textContent = "";
+			}
+		}
+	} else {
+		// Hide the concept section if no concept is defined
+		if (conceptSection) {
+			conceptSection.style.display = "none";
+		}
+	}
+
 	// Clear any existing feedback
 	clearFeedback();