feat(lessons): add lessons from client db

src/pages/student/lessons/LinearInequalitiesLesson.tsx

@@ -0,0 +1,303 @@
+import React from "react";
+import {
+  Scale,
+  ArrowRight,
+  GitBranch,
+  BarChart,
+  Layers,
+  BookOpen,
+} from "lucide-react";
+import LessonShell, {
+  ConceptCard,
+  FormulaBox,
+  ExampleCard,
+  TipCard,
+  PracticeFromDataset,
+} from "../../../components/lessons/LessonShell";
+import InequalityRegionWidget from "../../../components/lessons/InequalityRegionWidget";
+import {
+  LINEAR_INEQ_EASY,
+  LINEAR_INEQ_MEDIUM,
+} from "../../../data/math/linear-inequalities";
+
+interface LessonProps {
+  onFinish?: () => void;
+}
+const SECTIONS = [
+  { title: "Solving Inequalities", icon: Scale },
+  { title: "Compound Inequalities", icon: GitBranch },
+  { title: "Graphing on Number Lines", icon: ArrowRight },
+  { title: "Coordinate Plane", icon: BarChart },
+  { title: "Systems of Inequalities", icon: Layers },
+  { title: "Practice & Quiz", icon: BookOpen },
+];
+
+export default function LinearInequalitiesLesson({ onFinish }: LessonProps) {
+  return (
+    <LessonShell
+      title="Linear Inequalities"
+      sections={SECTIONS}
+      color="blue"
+      onFinish={onFinish}
+    >
+      {/* Section 1: Solving Inequalities */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Solving Inequalities
+        </h2>
+        <ConceptCard color="blue">
+          <p className="text-slate-700 leading-relaxed">
+            Inequalities work just like equations — apply the same operation to
+            both sides. The <strong>one critical difference</strong>: when you
+            multiply or divide by a <strong>negative number</strong>, you must{" "}
+            <strong>flip the inequality sign</strong>.
+          </p>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
+              <p className="font-bold text-blue-700 text-lg">&lt;</p>
+              <p className="text-xs text-slate-500">Less than</p>
+            </div>
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
+              <p className="font-bold text-blue-700 text-lg">&gt;</p>
+              <p className="text-xs text-slate-500">Greater than</p>
+            </div>
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
+              <p className="font-bold text-blue-700 text-lg">≤</p>
+              <p className="text-xs text-slate-500">Less than or equal</p>
+            </div>
+            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
+              <p className="font-bold text-blue-700 text-lg">≥</p>
+              <p className="text-xs text-slate-500">Greater than or equal</p>
+            </div>
+          </div>
+        </ConceptCard>
+        <ExampleCard title="Example: Flip the Sign" color="blue">
+          <p>Solve: −3x + 7 &gt; 16</p>
+          <p className="text-slate-500">−3x &gt; 9</p>
+          <p className="text-slate-500">
+            Divide by −3 → <strong className="text-red-600">FLIP</strong> → x
+            &lt; −3
+          </p>
+        </ExampleCard>
+        <div className="mt-4">
+          <ExampleCard title="Example: Variables on Both Sides" color="blue">
+            <p>Solve: 2x − 5 ≤ 3x + 2</p>
+            <p className="text-slate-500">−x ≤ 7</p>
+            <p className="text-slate-500">
+              Multiply by −1 → <strong className="text-blue-700">x ≥ −7</strong>
+            </p>
+          </ExampleCard>
+        </div>
+        <div className="mt-4">
+          <TipCard type="warning">
+            <p className="text-slate-700">
+              The #1 inequality mistake: forgetting to flip the sign when
+              multiplying or dividing by a negative. The SAT specifically
+              designs trap answers for this.
+            </p>
+          </TipCard>
+        </div>
+      </div>
+
+      {/* Section 2: Compound Inequalities */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Compound Inequalities
+        </h2>
+        <ConceptCard color="blue">
+          <p className="text-slate-700 leading-relaxed">
+            A compound inequality combines two inequalities.{" "}
+            <strong>AND</strong> means both must be true (intersection).{" "}
+            <strong>OR</strong> means at least one must be true (union).
+          </p>
+          <div className="grid md:grid-cols-2 gap-4 mt-4">
+            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
+              <p className="font-bold text-emerald-800 mb-1">
+                AND (Intersection)
+              </p>
+              <p className="text-sm text-slate-700">
+                −2 &lt; x ≤ 5 means x is between −2 and 5
+              </p>
+              <p className="text-xs text-slate-500 mt-1">
+                Both conditions satisfied simultaneously
+              </p>
+            </div>
+            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+              <p className="font-bold text-amber-800 mb-1">OR (Union)</p>
+              <p className="text-sm text-slate-700">
+                x &lt; −3 OR x &gt; 4 means outside the interval
+              </p>
+              <p className="text-xs text-slate-500 mt-1">
+                At least one condition satisfied
+              </p>
+            </div>
+          </div>
+        </ConceptCard>
+        <ExampleCard title="Example: AND (Three-Part)" color="blue">
+          <p>Solve: −2 &lt; 3x + 1 ≤ 10</p>
+          <p className="text-slate-500">Subtract 1: −3 &lt; 3x ≤ 9</p>
+          <p className="text-slate-500">
+            Divide by 3:{" "}
+            <strong className="text-blue-700">−1 &lt; x ≤ 3</strong>
+          </p>
+        </ExampleCard>
+        <div className="mt-4">
+          <ExampleCard title="Example: OR" color="blue">
+            <p>Solve: x + 1 &lt; −2 OR x + 1 &gt; 4</p>
+            <p className="text-slate-500">x &lt; −3 OR x &gt; 3</p>
+            <p className="text-slate-500">
+              <strong className="text-blue-700">
+                Solution: (−∞, −3) ∪ (3, ∞)
+              </strong>
+            </p>
+          </ExampleCard>
+        </div>
+      </div>
+
+      {/* Section 3: Graphing on Number Lines */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Graphing on Number Lines
+        </h2>
+        <ConceptCard color="blue">
+          <p className="text-slate-700 leading-relaxed">
+            When graphing inequalities on a number line, the circle type and
+            shading direction matter.
+          </p>
+          <div className="mt-4 overflow-x-auto">
+            <table className="w-full text-sm border-collapse">
+              <thead>
+                <tr className="bg-blue-100 text-blue-900">
+                  <th className="border border-blue-300 px-3 py-2 text-left font-bold">
+                    Symbol
+                  </th>
+                  <th className="border border-blue-300 px-3 py-2 text-left font-bold">
+                    Circle
+                  </th>
+                  <th className="border border-blue-300 px-3 py-2 text-left font-bold">
+                    Meaning
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="text-slate-700">
+                <tr className="bg-white">
+                  <td className="border border-slate-200 px-3 py-2 font-mono">
+                    &lt; or &gt;
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2 font-semibold">
+                    Open ○
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2">
+                    Value NOT included
+                  </td>
+                </tr>
+                <tr className="bg-slate-50">
+                  <td className="border border-slate-200 px-3 py-2 font-mono">
+                    ≤ or ≥
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2 font-semibold">
+                    Closed ●
+                  </td>
+                  <td className="border border-slate-200 px-3 py-2">
+                    Value IS included
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </ConceptCard>
+        <TipCard type="tip">
+          <p className="text-slate-700">
+            The SAT frequently asks which number line graph matches a given
+            inequality. Just check: open vs closed circle, and which direction
+            the arrow points.
+          </p>
+        </TipCard>
+      </div>
+
+      {/* Section 4: Coordinate Plane */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Coordinate Plane Inequalities
+        </h2>
+        <ConceptCard color="blue">
+          <p className="text-slate-700 leading-relaxed">
+            When graphing a linear inequality in two variables:
+          </p>
+          <div className="space-y-2 mt-3 text-sm">
+            <p>1. Graph the boundary line (y = mx + b)</p>
+            <p>
+              2. Use a <strong>dashed line</strong> for &lt; or &gt; (not
+              included)
+            </p>
+            <p>
+              3. Use a <strong>solid line</strong> for ≤ or ≥ (included)
+            </p>
+            <p>
+              4. Shade <strong>above</strong> for y &gt; or y ≥ and{" "}
+              <strong>below</strong> for y &lt; or y ≤
+            </p>
+          </div>
+        </ConceptCard>
+        <ExampleCard title="Example: Graph y ≥ 2x − 1" color="blue">
+          <p>Boundary line: y = 2x − 1 (slope 2, y-intercept −1)</p>
+          <p className="text-slate-500">Solid line (≥ means included)</p>
+          <p className="text-slate-500">
+            <strong className="text-blue-700">Shade above the line</strong>
+          </p>
+        </ExampleCard>
+        <div className="mt-6">
+          <InequalityRegionWidget />
+        </div>
+      </div>
+
+      {/* Section 5: Systems of Inequalities */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Systems of Inequalities
+        </h2>
+        <ConceptCard color="blue">
+          <p className="text-slate-700 leading-relaxed">
+            The solution to a system of inequalities is the{" "}
+            <strong>overlapping region</strong> where ALL inequalities are
+            satisfied. Any point in this region satisfies every inequality in
+            the system.
+          </p>
+        </ConceptCard>
+        <ExampleCard title="Example: System" color="blue">
+          <p>y ≤ x + 3 AND y &gt; −x + 1</p>
+          <p className="text-slate-500">
+            Graph both: shade below y = x + 3 (solid), shade above y = −x + 1
+            (dashed)
+          </p>
+          <p className="text-slate-500">
+            <strong className="text-blue-700">
+              Solution is the overlapping region
+            </strong>
+          </p>
+        </ExampleCard>
+        <div className="mt-4">
+          <TipCard type="tip">
+            <p className="text-slate-700">
+              To check if a point is in the solution region, plug it into BOTH
+              inequalities. It must satisfy all of them.
+            </p>
+          </TipCard>
+        </div>
+      </div>
+
+      {/* Section 6: Practice & Quiz */}
+      <div>
+        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
+          Practice & Quiz
+        </h2>
+        {LINEAR_INEQ_EASY.slice(0, 2).map((q) => (
+          <PracticeFromDataset key={q.id} question={q} color="blue" />
+        ))}
+        {LINEAR_INEQ_MEDIUM.slice(0, 1).map((q) => (
+          <PracticeFromDataset key={q.id} question={q} color="blue" />
+        ))}
+      </div>
+    </LessonShell>
+  );
+}