First commit

components/AssistantDrawer.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { FormEvent, useEffect, useMemo, useState } from "react";
+
+type AssistantMessage = {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+};
+
+type AssistantDrawerProps = {
+  mode?: "global" | "page";
+};
+
+export const ASSISTANT_TOGGLE_EVENT = "acve:assistant-toggle";
+
+export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProps) {
+  const [isOpen, setIsOpen] = useState(mode === "page");
+  const [messages, setMessages] = useState<AssistantMessage[]>([
+    {
+      id: "seed",
+      role: "assistant",
+      content: "Ask about courses, case studies, or practice. Demo responses are mocked for now.",
+    },
+  ]);
+  const [input, setInput] = useState("");
+
+  useEffect(() => {
+    if (mode === "page") {
+      return;
+    }
+
+    const onToggle = () => setIsOpen((current) => !current);
+    window.addEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
+    return () => window.removeEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
+  }, [mode]);
+
+  const panelClasses = useMemo(() => {
+    if (mode === "page") {
+      return "mx-auto flex h-[70vh] max-w-3xl flex-col rounded-2xl border border-slate-300 bg-white shadow-xl";
+    }
+
+    return `fixed right-0 top-0 z-50 h-screen w-full max-w-md border-l border-slate-300 bg-white shadow-2xl transition-transform ${
+      isOpen ? "translate-x-0" : "translate-x-full"
+    }`;
+  }, [isOpen, mode]);
+
+  const send = (event: FormEvent) => {
+    event.preventDefault();
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    const now = Date.now().toString();
+    setMessages((current) => [
+      ...current,
+      { id: `u-${now}`, role: "user", content: trimmed },
+      { id: `a-${now}`, role: "assistant", content: "(Demo) Assistant not connected yet." },
+    ]);
+    setInput("");
+  };
+
+  if (mode === "global" && !isOpen) {
+    return (
+      <aside className={panelClasses}>
+        <div />
+      </aside>
+    );
+  }
+
+  return (
+    <aside className={panelClasses}>
+      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+        <h2 className="acve-heading text-2xl">AI Assistant</h2>
+        {mode === "global" ? (
+          <button
+            className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-600 hover:bg-slate-50"
+            onClick={() => setIsOpen(false)}
+            type="button"
+          >
+            Close
+          </button>
+        ) : null}
+      </div>
+
+      <div className="flex-1 space-y-3 overflow-y-auto p-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${
+              message.role === "user"
+                ? "ml-auto bg-brand text-white"
+                : "mr-auto border border-slate-200 bg-slate-50 text-slate-800"
+            }`}
+          >
+            {message.content}
+          </div>
+        ))}
+      </div>
+
+      <form className="border-t border-slate-200 p-3" onSubmit={send}>
+        <div className="flex gap-2">
+          <input
+            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand"
+            onChange={(event) => setInput(event.target.value)}
+            placeholder="Type your message..."
+            value={input}
+          />
+          <button className="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+            Send
+          </button>
+        </div>
+      </form>
+    </aside>
+  );
+}

components/CourseCard.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import type { Course } from "@/types/course";
+import ProgressBar from "@/components/ProgressBar";
+
+type CourseCardProps = {
+  course: Course;
+  progress?: number;
+};
+
+export default function CourseCard({ course, progress = 0 }: CourseCardProps) {
+  return (
+    <Link
+      href={`/courses/${course.slug}`}
+      className="group flex h-full flex-col justify-between rounded-2xl border border-slate-300 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-brand/60"
+    >
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <span className="rounded-full bg-[#ead7a0] px-3 py-1 text-xs font-semibold text-[#8a6b00]">{course.level}</span>
+          <span className="text-sm font-semibold text-slate-700">Rating {course.rating.toFixed(1)}</span>
+        </div>
+        <h3 className="text-2xl leading-tight text-[#212937] md:text-4xl">{course.title}</h3>
+        <p className="text-base text-slate-600 md:text-lg">{course.summary}</p>
+      </div>
+
+      <div className="mt-5 border-t border-slate-200 pt-4 text-base text-slate-600 md:text-lg">
+        {progress > 0 ? (
+          <div className="mb-4">
+            <ProgressBar value={progress} label={`Progress ${progress}%`} />
+          </div>
+        ) : null}
+        <div className="mb-1 flex items-center justify-between">
+          <span>{course.weeks} weeks</span>
+          <span>{course.lessonsCount} lessons</span>
+        </div>
+        <div className="mb-3 flex items-center justify-between">
+          <span>{course.students.toLocaleString()} students</span>
+          <span className="text-brand transition-transform group-hover:translate-x-1">{">"}</span>
+        </div>
+        <div className="text-sm font-semibold text-slate-700 md:text-base">By {course.instructor}</div>
+      </div>
+    </Link>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,10 @@
+export default function Footer() {
+  return (
+    <footer className="border-t border-slate-300 bg-[#f7f7f8]">
+      <div className="mx-auto flex w-full max-w-[1300px] items-center justify-between px-4 py-5 text-sm text-slate-600">
+        <span>ACVE Centro de Estudios</span>
+        <span>Professional legal English learning</span>
+      </div>
+    </footer>
+  );
+}

components/LessonRow.tsx

@@ -0,0 +1,55 @@
+import type { Lesson } from "@/types/course";
+
+type LessonRowProps = {
+  index: number;
+  lesson: Lesson;
+  isActive: boolean;
+  isLocked: boolean;
+  onSelect: () => void;
+};
+
+const typeColors: Record<Lesson["type"], string> = {
+  video: "bg-[#ffecee] text-[#ca4d6f]",
+  reading: "bg-[#ecfbf4] text-[#2f9d73]",
+  interactive: "bg-[#eef4ff] text-[#6288da]",
+};
+
+export default function LessonRow({ index, lesson, isActive, isLocked, onSelect }: LessonRowProps) {
+  return (
+    <button
+      className={`w-full rounded-2xl border p-5 text-left transition ${
+        isActive ? "border-brand/60 bg-white shadow-sm" : "border-slate-200 bg-white hover:border-slate-300"
+      } ${isLocked ? "cursor-not-allowed opacity-60" : ""}`}
+      onClick={isLocked ? undefined : onSelect}
+      type="button"
+    >
+      <div className="flex items-center gap-4">
+        <div
+          className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-lg font-semibold ${
+            isActive ? "border-brand text-brand" : "border-slate-300 text-slate-500"
+          }`}
+        >
+          {isLocked ? "L" : index + 1}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
+            <span className={`rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${typeColors[lesson.type]}`}>
+              {lesson.type}
+            </span>
+            <span>{lesson.minutes} min</span>
+            {isLocked ? <span className="text-slate-400">Locked</span> : null}
+            {lesson.isPreview ? <span className="text-[#8a6b00]">Preview</span> : null}
+          </div>
+          <p className="truncate text-lg text-[#222a38] md:text-2xl">{lesson.title}</p>
+        </div>
+
+        {isActive ? (
+          <div className="hidden h-20 w-36 overflow-hidden rounded-xl border border-slate-200 bg-[#202020] md:block">
+            <div className="flex h-full items-center justify-center text-2xl text-white/80">Play</div>
+          </div>
+        ) : null}
+      </div>
+    </button>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { ASSISTANT_TOGGLE_EVENT } from "@/components/AssistantDrawer";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+type NavLink = {
+  href: string;
+  label: string;
+};
+
+const navLinks: NavLink[] = [
+  { href: "/", label: "Home" },
+  { href: "/courses", label: "Courses" },
+  { href: "/case-studies", label: "Case Studies" },
+  { href: "/practice", label: "Practice" },
+];
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  const linkClass = (href: string) =>
+    pathname === href || pathname?.startsWith(`${href}/`)
+      ? "rounded-xl bg-brand px-5 py-3 text-sm font-semibold text-white shadow-sm"
+      : "rounded-xl px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:text-brand";
+
+  useEffect(() => {
+    const client = supabaseBrowser();
+    if (!client) return;
+
+    let mounted = true;
+
+    client.auth.getUser().then(({ data }) => {
+      if (!mounted) return;
+      setUserEmail(data.user?.email ?? null);
+    });
+
+    const { data } = client.auth.onAuthStateChange((_event, session) => {
+      setUserEmail(session?.user?.email ?? null);
+    });
+
+    return () => {
+      mounted = false;
+      data.subscription.unsubscribe();
+    };
+  }, []);
+
+  const authNode = useMemo(() => {
+    if (!userEmail) {
+      return (
+        <div className="flex items-center gap-2 text-sm">
+          <Link className="rounded-lg border border-slate-300 px-3 py-1.5 hover:bg-slate-50" href="/auth/login">
+            Login
+          </Link>
+          <Link className="rounded-lg bg-brand px-3 py-1.5 text-white hover:brightness-105" href="/auth/signup">
+            Sign up
+          </Link>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex items-center gap-2 text-sm">
+        <span className="max-w-36 truncate text-slate-700">{userEmail}</span>
+        <button
+          className="rounded-lg border border-slate-300 px-3 py-1.5 hover:bg-slate-50"
+          onClick={async () => {
+            const client = supabaseBrowser();
+            if (!client) return;
+            await client.auth.signOut();
+          }}
+          type="button"
+        >
+          Logout
+        </button>
+      </div>
+    );
+  }, [userEmail]);
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-slate-300 bg-[#f7f7f8]/95 backdrop-blur">
+      <div className="mx-auto flex w-full max-w-[1300px] items-center justify-between gap-4 px-4 py-3">
+        <div className="flex items-center gap-8">
+          <Link className="flex items-center gap-3" href="/">
+            <div className="rounded-xl bg-[#edd7bc] p-1.5 shadow-sm">
+              <Image alt="ACVE logo" className="h-10 w-10 rounded-lg object-cover" height={40} src="/images/logo.png" width={40} />
+            </div>
+            <div>
+              <div className="text-2xl font-bold leading-none tracking-tight text-brand md:text-4xl">ACVE</div>
+              <div className="-mt-1 text-xs text-slate-500 md:text-sm">Centro de Estudios</div>
+            </div>
+          </Link>
+          <nav className="hidden items-center gap-1 text-sm lg:flex">
+            {navLinks.map((link) => (
+              <Link key={link.href} className={linkClass(link.href)} href={link.href}>
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            className="rounded-xl border border-accent bg-white px-4 py-2.5 text-sm font-semibold text-accent hover:bg-amber-50"
+            onClick={() => window.dispatchEvent(new Event(ASSISTANT_TOGGLE_EVENT))}
+            type="button"
+          >
+            AI Assistant
+          </button>
+          {authNode}
+        </div>
+      </div>
+      <nav className="mx-auto flex w-full max-w-[1300px] gap-2 overflow-x-auto px-4 pb-3 text-sm lg:hidden">
+        {navLinks.map((link) => (
+          <Link key={link.href} className={linkClass(link.href)} href={link.href}>
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+    </header>
+  );
+}

components/ProgressBar.tsx

@@ -0,0 +1,17 @@
+type ProgressBarProps = {
+  value: number;
+  label?: string;
+};
+
+export default function ProgressBar({ value, label }: ProgressBarProps) {
+  const clamped = Math.max(0, Math.min(100, value));
+
+  return (
+    <div className="w-full">
+      {label ? <div className="mb-1 text-xs font-semibold text-slate-600">{label}</div> : null}
+      <div className="h-2.5 w-full rounded-full bg-[#ececef]">
+        <div className="h-2.5 rounded-full bg-brand transition-all" style={{ width: `${clamped}%` }} />
+      </div>
+    </div>
+  );
+}

components/Tabs.tsx

@@ -0,0 +1,26 @@
+type TabsProps<T extends string> = {
+  options: readonly T[];
+  active: T;
+  onChange: (value: T) => void;
+};
+
+export default function Tabs<T extends string>({ options, active, onChange }: TabsProps<T>) {
+  return (
+    <div className="inline-flex flex-wrap gap-2">
+      {options.map((option) => (
+        <button
+          key={option}
+          className={`rounded-xl border px-6 py-3 text-base font-semibold transition-colors ${
+            option === active
+              ? "border-accent bg-accent text-white shadow-sm"
+              : "border-slate-300 bg-white text-slate-700 hover:border-slate-400"
+          }`}
+          onClick={() => onChange(option)}
+          type="button"
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}

components/auth/LoginForm.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+type LoginFormProps = {
+  redirectTo: string;
+};
+
+const normalizeRedirect = (redirectTo: string) => {
+  if (!redirectTo.startsWith("/")) return "/courses";
+  return redirectTo;
+};
+
+export default function LoginForm({ redirectTo }: LoginFormProps) {
+  const router = useRouter();
+  const safeRedirect = normalizeRedirect(redirectTo);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const client = supabaseBrowser();
+    if (!client) {
+      setLoading(false);
+      setError("Supabase is not configured. Add NEXT_PUBLIC_SUPABASE_* to .env.local.");
+      return;
+    }
+
+    const { error: signInError } = await client.auth.signInWithPassword({ email, password });
+    setLoading(false);
+
+    if (signInError) {
+      setError(signInError.message);
+      return;
+    }
+
+    router.push(safeRedirect);
+  };
+
+  return (
+    <div className="acve-panel mx-auto w-full max-w-md p-6">
+      <h1 className="acve-heading text-4xl">Login</h1>
+      <p className="mt-1 text-base text-slate-600">Sign in to access protected learning routes.</p>
+
+      <form className="mt-5 space-y-4" onSubmit={onSubmit}>
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Email</span>
+          <input
+            className="w-full rounded-xl border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            type="email"
+            value={email}
+          />
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Password</span>
+          <input
+            className="w-full rounded-xl border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            type="password"
+            value={password}
+          />
+        </label>
+
+        {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+        <button
+          className="acve-button-primary w-full px-4 py-2 font-semibold hover:brightness-105 disabled:opacity-60"
+          disabled={loading}
+          type="submit"
+        >
+          {loading ? "Signing in..." : "Login"}
+        </button>
+      </form>
+
+      <p className="mt-4 text-sm text-slate-600">
+        New here?{" "}
+        <Link className="font-semibold text-brand" href="/auth/signup">
+          Create an account
+        </Link>
+      </p>
+    </div>
+  );
+}

components/teacher/TeacherDashboardClient.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { getTeacherCourses, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import type { Course } from "@/types/course";
+
+export default function TeacherDashboardClient() {
+  const [courses, setCourses] = useState<Course[]>([]);
+
+  useEffect(() => {
+    const load = () => setCourses(getTeacherCourses());
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900">Teacher Dashboard</h1>
+          <p className="text-slate-600">Manage teacher-created courses stored locally for MVP.</p>
+        </div>
+        <Link
+          className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105"
+          href="/teacher/courses/new"
+        >
+          Create course
+        </Link>
+      </div>
+
+      {courses.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-slate-300 bg-white p-6 text-sm text-slate-600">
+          No teacher-created courses yet.
+        </div>
+      ) : (
+        <div className="grid gap-4">
+          {courses.map((course) => (
+            <article key={course.slug} className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-brand">{course.level}</p>
+                  <h2 className="text-xl font-semibold text-slate-900">{course.title}</h2>
+                  <p className="mt-1 text-sm text-slate-600">{course.summary}</p>
+                </div>
+                <div className="flex gap-2">
+                  <Link
+                    className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50"
+                    href={`/teacher/courses/${course.slug}/edit`}
+                  >
+                    Edit
+                  </Link>
+                  <Link
+                    className="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50"
+                    href={`/teacher/courses/${course.slug}/lessons/new`}
+                  >
+                    Add lesson
+                  </Link>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

components/teacher/TeacherEditCourseForm.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getTeacherCourseBySlug, teacherCoursesUpdatedEventName, updateTeacherCourse } from "@/lib/data/teacherCourses";
+import type { Course, CourseLevel } from "@/types/course";
+
+const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
+
+type TeacherEditCourseFormProps = {
+  slug: string;
+};
+
+export default function TeacherEditCourseForm({ slug }: TeacherEditCourseFormProps) {
+  const router = useRouter();
+  const [course, setCourse] = useState<Course | null>(null);
+  const [title, setTitle] = useState("");
+  const [level, setLevel] = useState<CourseLevel>("Beginner");
+  const [summary, setSummary] = useState("");
+  const [instructor, setInstructor] = useState("");
+  const [weeks, setWeeks] = useState(4);
+  const [rating, setRating] = useState(5);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    const load = () => {
+      const found = getTeacherCourseBySlug(slug) ?? null;
+      setCourse(found);
+      if (!found) return;
+      setTitle(found.title);
+      setLevel(found.level);
+      setSummary(found.summary);
+      setInstructor(found.instructor);
+      setWeeks(found.weeks);
+      setRating(found.rating);
+    };
+
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, [slug]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!course) return;
+
+    updateTeacherCourse(course.slug, {
+      title: title.trim(),
+      level,
+      summary: summary.trim(),
+      instructor: instructor.trim(),
+      weeks: Math.max(1, weeks),
+      rating: Math.min(5, Math.max(0, rating)),
+    });
+    setSaved(true);
+    window.setTimeout(() => setSaved(false), 1200);
+  };
+
+  if (!course) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
+        <p className="text-slate-600">This editor only works for courses created in the teacher area.</p>
+        <Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
+          Back to dashboard
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-5">
+      <form className="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+        <h1 className="text-2xl font-bold text-slate-900">Edit Course</h1>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Title</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setTitle(event.target.value)}
+            value={title}
+          />
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Level</span>
+          <select
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setLevel(event.target.value as CourseLevel)}
+            value={level}
+          >
+            {levels.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Summary</span>
+          <textarea
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setSummary(event.target.value)}
+            rows={3}
+            value={summary}
+          />
+        </label>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="block">
+            <span className="mb-1 block text-sm text-slate-700">Instructor</span>
+            <input
+              className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+              onChange={(event) => setInstructor(event.target.value)}
+              value={instructor}
+            />
+          </label>
+
+          <label className="block">
+            <span className="mb-1 block text-sm text-slate-700">Weeks</span>
+            <input
+              className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+              min={1}
+              onChange={(event) => setWeeks(Number(event.target.value))}
+              type="number"
+              value={weeks}
+            />
+          </label>
+
+          <label className="block">
+            <span className="mb-1 block text-sm text-slate-700">Rating (0-5)</span>
+            <input
+              className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+              max={5}
+              min={0}
+              onChange={(event) => setRating(Number(event.target.value))}
+              step={0.1}
+              type="number"
+              value={rating}
+            />
+          </label>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+            Save changes
+          </button>
+          {saved ? <span className="text-sm font-medium text-emerald-700">Saved</span> : null}
+          <button
+            className="rounded-md border border-slate-300 px-4 py-2 text-sm hover:bg-slate-50"
+            onClick={() => router.push(`/teacher/courses/${course.slug}/lessons/new`)}
+            type="button"
+          >
+            Add lesson
+          </button>
+        </div>
+      </form>
+
+      <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h2 className="text-lg font-semibold text-slate-900">Lessons</h2>
+        <div className="mt-3 space-y-2">
+          {course.lessons.map((lesson) => (
+            <div key={lesson.id} className="rounded-md border border-slate-200 p-3 text-sm">
+              <p className="font-medium text-slate-900">{lesson.title}</p>
+              <p className="text-slate-600">
+                {lesson.type} | {lesson.minutes} min {lesson.isPreview ? "| Preview" : ""}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

components/teacher/TeacherNewCourseForm.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getAllCourseSlugs } from "@/lib/data/courseCatalog";
+import { createTeacherCourse } from "@/lib/data/teacherCourses";
+import type { CourseLevel } from "@/types/course";
+
+const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
+
+export default function TeacherNewCourseForm() {
+  const router = useRouter();
+  const [title, setTitle] = useState("");
+  const [level, setLevel] = useState<CourseLevel>("Beginner");
+  const [summary, setSummary] = useState("");
+  const [instructor, setInstructor] = useState("");
+  const [weeks, setWeeks] = useState(4);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const cleanTitle = title.trim();
+    const cleanSummary = summary.trim();
+    const cleanInstructor = instructor.trim();
+
+    if (!cleanTitle || !cleanSummary || !cleanInstructor) {
+      setError("Title, summary, and instructor are required.");
+      return;
+    }
+
+    const created = createTeacherCourse(
+      {
+        title: cleanTitle,
+        level,
+        summary: cleanSummary,
+        instructor: cleanInstructor,
+        weeks: Math.max(1, weeks),
+      },
+      getAllCourseSlugs(),
+    );
+
+    router.push(`/teacher/courses/${created.slug}/edit`);
+  };
+
+  return (
+    <form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+      <h1 className="text-2xl font-bold text-slate-900">Create Course</h1>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Title</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setTitle(event.target.value)}
+          value={title}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Level</span>
+        <select
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setLevel(event.target.value as CourseLevel)}
+          value={level}
+        >
+          {levels.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Summary</span>
+        <textarea
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setSummary(event.target.value)}
+          rows={3}
+          value={summary}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Instructor</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setInstructor(event.target.value)}
+          value={instructor}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Weeks</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          min={1}
+          onChange={(event) => setWeeks(Number(event.target.value))}
+          type="number"
+          value={weeks}
+        />
+      </label>
+
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+      <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+        Create course
+      </button>
+    </form>
+  );
+}

components/teacher/TeacherNewLessonForm.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { addLessonToTeacherCourse, getTeacherCourseBySlug, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import type { Course, LessonType } from "@/types/course";
+
+const lessonTypes: LessonType[] = ["video", "reading", "interactive"];
+
+type TeacherNewLessonFormProps = {
+  slug: string;
+};
+
+export default function TeacherNewLessonForm({ slug }: TeacherNewLessonFormProps) {
+  const router = useRouter();
+  const [course, setCourse] = useState<Course | null>(null);
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState<LessonType>("video");
+  const [minutes, setMinutes] = useState(10);
+  const [isPreview, setIsPreview] = useState(false);
+  const [videoUrl, setVideoUrl] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const load = () => setCourse(getTeacherCourseBySlug(slug) ?? null);
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, [slug]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    if (!course) {
+      setError("Teacher course not found.");
+      return;
+    }
+
+    if (!title.trim()) {
+      setError("Lesson title is required.");
+      return;
+    }
+
+    addLessonToTeacherCourse(course.slug, {
+      title: title.trim(),
+      type,
+      minutes: Math.max(1, minutes),
+      isPreview,
+      videoUrl: type === "video" ? videoUrl.trim() : undefined,
+    });
+
+    router.push(`/teacher/courses/${course.slug}/edit`);
+  };
+
+  if (!course) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
+        <p className="text-slate-600">This lesson creator only works for courses created in the teacher area.</p>
+        <Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
+          Back to dashboard
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+      <h1 className="text-2xl font-bold text-slate-900">Add Lesson</h1>
+      <p className="text-sm text-slate-600">Course: {course.title}</p>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Lesson title</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setTitle(event.target.value)}
+          value={title}
+        />
+      </label>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Type</span>
+          <select
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setType(event.target.value as LessonType)}
+            value={type}
+          >
+            {lessonTypes.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Minutes</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            min={1}
+            onChange={(event) => setMinutes(Number(event.target.value))}
+            type="number"
+            value={minutes}
+          />
+        </label>
+      </div>
+
+      <label className="flex items-center gap-2 text-sm text-slate-700">
+        <input checked={isPreview} onChange={(event) => setIsPreview(event.target.checked)} type="checkbox" />
+        Mark as preview lesson
+      </label>
+
+      {type === "video" ? (
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Video URL (placeholder)</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setVideoUrl(event.target.value)}
+            placeholder="https://example.com/video"
+            value={videoUrl}
+          />
+        </label>
+      ) : null}
+
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+      <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+        Save lesson
+      </button>
+    </form>
+  );
+}