feat(lessons): add lessons from client db

src/pages/student/lessons/EvalStatisticalClaimsLesson.tsx

@@ -0,0 +1,289 @@
+import React from "react";
+import {
+  Search,
+  GitBranch,
+  AlertTriangle,
+  Scale,
+  Layers,
+  BookOpen,
+} from "lucide-react";
+import LessonShell, {
+  ConceptCard,
+  ExampleCard,
+  TipCard,
+  PracticeFromDataset,
+} from "../../../components/lessons/LessonShell";
+import StudyDesignWidget from "../../../components/lessons/StudyDesignWidget";
+import {
+  EVAL_STATS_EASY,
+  EVAL_STATS_MEDIUM,
+} from "../../../data/math/evaluating-statistical-claims";
+
+interface LessonProps {
+  onFinish?: () => void;
+}
+const SECTIONS = [
+  { title: "Observational vs Experimental", icon: Search },
+  { title: "Random Assignment", icon: GitBranch },
+  { title: "Confounding Variables", icon: AlertTriangle },
+  { title: "Causation vs Correlation", icon: Scale },
+  { title: "Identifying Bias", icon: Layers },
+  { title: "Practice & Quiz", icon: BookOpen },
+];
+
+export default function EvalStatisticalClaimsLesson({ onFinish }: LessonProps) {
+  return (
+    <LessonShell
+      title="Evaluating Statistical Claims"
+      sections={SECTIONS}
+      color="amber"
+      onFinish={onFinish}
+    >
+      {/* Section 1 */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Observational vs Experimental Studies
+        </h2>
+        <ConceptCard color="amber">
+          <p className="text-slate-700 leading-relaxed">
+            The type of study determines what conclusions you can draw.
+          </p>
+          <div className="grid md:grid-cols-2 gap-4 mt-4">
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+              <p className="font-bold text-blue-800 mb-1">
+                Observational Study
+              </p>
+              <p className="text-sm text-slate-700">
+                Researcher <strong>observes</strong> without intervening. Can
+                show <strong>association</strong> only.
+              </p>
+            </div>
+            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
+              <p className="font-bold text-emerald-800 mb-1">Experiment</p>
+              <p className="text-sm text-slate-700">
+                Researcher <strong>assigns treatments</strong>. Can show{" "}
+                <strong>causation</strong>.
+              </p>
+            </div>
+          </div>
+        </ConceptCard>
+        <ExampleCard title="Example: Spot the Difference" color="amber">
+          <p>
+            Observational: "Students who eat breakfast tend to have higher
+            GPAs."
+          </p>
+          <p className="text-slate-500">
+            Experiment: "Randomly assign half the students to eat breakfast for
+            a month, compare GPAs."
+          </p>
+          <p className="text-slate-500">
+            <strong className="text-amber-700">
+              Only the experiment can claim breakfast causes higher GPAs.
+            </strong>
+          </p>
+        </ExampleCard>
+      </div>
+
+      {/* Section 2 */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Random Assignment
+        </h2>
+        <ConceptCard color="amber">
+          <p className="text-slate-700 leading-relaxed">
+            <strong>Random sampling</strong> determines generalizability.{" "}
+            <strong>Random assignment</strong> determines causation. These are
+            different concepts!
+          </p>
+          <div className="mt-4 overflow-x-auto">
+            <table className="w-full text-sm border-collapse">
+              <thead>
+                <tr className="bg-amber-100 text-amber-900">
+                  <th className="border border-amber-300 px-3 py-2"></th>
+                  <th className="border border-amber-300 px-3 py-2 text-center font-bold">
+                    Random Assignment YES
+                  </th>
+                  <th className="border border-amber-300 px-3 py-2 text-center font-bold">
+                    Random Assignment NO
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="text-slate-700">
+                <tr className="bg-white">
+                  <td className="border border-slate-200 px-3 py-2 font-bold bg-amber-50">
+                    Random Sampling YES
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2 text-center bg-emerald-50 font-semibold text-emerald-800">
+                    Generalize + Cause & Effect
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2 text-center bg-blue-50 font-semibold text-blue-800">
+                    Generalize only
+                  </td>
+                </tr>
+                <tr className="bg-slate-50">
+                  <td className="border border-slate-200 px-3 py-2 font-bold bg-amber-50">
+                    Random Sampling NO
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2 text-center bg-purple-50 font-semibold text-purple-800">
+                    Cause & Effect (this group only)
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2 text-center bg-rose-50 font-semibold text-rose-800">
+                    Neither
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </ConceptCard>
+        <div className="mt-6">
+          <StudyDesignWidget />
+        </div>
+        <div className="mt-4">
+          <TipCard type="remember">
+            <p className="text-slate-700">
+              Random <strong>sampling</strong> → can generalize to population.
+              Random <strong>assignment</strong> → can claim cause-and-effect.
+              These are independent concepts.
+            </p>
+          </TipCard>
+        </div>
+      </div>
+
+      {/* Section 3 */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Confounding Variables
+        </h2>
+        <ConceptCard color="amber">
+          <p className="text-slate-700 leading-relaxed">
+            A <strong>confounding variable</strong> is related to BOTH the
+            explanatory and response variables, making it impossible to
+            determine the true cause of an observed relationship.
+          </p>
+        </ConceptCard>
+        <ExampleCard title="Example: Ice Cream & Drowning" color="amber">
+          <p>Ice cream sales and drowning rates both increase in summer.</p>
+          <p className="text-slate-500">
+            Confounding variable:{" "}
+            <strong className="text-amber-700">temperature / season</strong>
+          </p>
+          <p className="text-slate-500">
+            Hot weather causes both — ice cream doesn't cause drowning!
+          </p>
+        </ExampleCard>
+        <div className="mt-4">
+          <ExampleCard title="Example: Coffee & Exercise" color="amber">
+            <p>Study: coffee drinkers exercise more.</p>
+            <p className="text-slate-500">
+              Confounding: Maybe more energetic people both drink coffee AND
+              exercise.
+            </p>
+            <p className="text-slate-500">
+              <strong className="text-amber-700">
+                Can't conclude coffee causes more exercise.
+              </strong>
+            </p>
+          </ExampleCard>
+        </div>
+      </div>
+
+      {/* Section 4 */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Causation vs Correlation
+        </h2>
+        <ConceptCard color="amber">
+          <p className="text-slate-700 leading-relaxed">
+            <strong>Correlation</strong> means two variables move together.{" "}
+            <strong>Causation</strong> means one actually causes the other.
+            Correlation alone does NOT prove causation.
+          </p>
+          <div className="mt-4 bg-amber-50 border border-amber-200 rounded-xl p-4">
+            <p className="font-bold text-amber-900 text-sm mb-2">
+              Three Requirements for Causation
+            </p>
+            <div className="space-y-1 text-sm text-slate-700">
+              <p>1. Random assignment to treatment/control groups</p>
+              <p>2. Controlled experiment (same conditions except treatment)</p>
+              <p>3. Confounding variables ruled out</p>
+            </div>
+          </div>
+        </ConceptCard>
+        <TipCard type="warning">
+          <p className="text-slate-700">
+            The SAT will try to trick you with answer choices that claim
+            causation from observational studies. Always check: was there random
+            assignment?
+          </p>
+        </TipCard>
+      </div>
+
+      {/* Section 5 */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Identifying Bias
+        </h2>
+        <ConceptCard color="amber">
+          <p className="text-slate-700 leading-relaxed">
+            Bias systematically distorts results. Know these types:
+          </p>
+          <div className="grid md:grid-cols-2 gap-3 mt-4">
+            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
+              <p className="font-bold text-amber-800 text-sm mb-1">
+                Selection Bias
+              </p>
+              <p className="text-xs text-slate-600">
+                Non-random sample excludes or over-represents groups
+              </p>
+            </div>
+            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
+              <p className="font-bold text-amber-800 text-sm mb-1">
+                Response Bias
+              </p>
+              <p className="text-xs text-slate-600">
+                Leading questions or social desirability affects answers
+              </p>
+            </div>
+            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
+              <p className="font-bold text-amber-800 text-sm mb-1">
+                Nonresponse Bias
+              </p>
+              <p className="text-xs text-slate-600">
+                People who don't respond differ from those who do
+              </p>
+            </div>
+            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
+              <p className="font-bold text-amber-800 text-sm mb-1">
+                Voluntary Response
+              </p>
+              <p className="text-xs text-slate-600">
+                Only people with strong opinions participate
+              </p>
+            </div>
+          </div>
+        </ConceptCard>
+        <ExampleCard title="Example: Leading Question" color="amber">
+          <p>"Do you agree that the new park is a waste of money?"</p>
+          <p className="text-slate-500">
+            <strong className="text-amber-700">
+              Response bias — the question pushes toward "agree"
+            </strong>
+          </p>
+        </ExampleCard>
+      </div>
+
+      {/* Section 6 */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Practice & Quiz
+        </h2>
+        {EVAL_STATS_EASY.slice(0, 2).map((q) => (
+          <PracticeFromDataset key={q.id} question={q} color="amber" />
+        ))}
+        {EVAL_STATS_MEDIUM.slice(0, 1).map((q) => (
+          <PracticeFromDataset key={q.id} question={q} color="amber" />
+        ))}
+      </div>
+    </LessonShell>
+  );
+}