@academy-sdk/sdk 0.1.0

package/dist/components/pages/index.js

@@ -0,0 +1,3315 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/pages/MyLearningPage.tsx
+import { useState as useState2 } from "react";
+import { Search, X, ChevronDown } from "lucide-react";
+
+// src/components/molecules/CourseCard.tsx
+import { useState } from "react";
+import { BookOpen, Clock, Grid2X2 } from "lucide-react";
+
+// src/components/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/molecules/CourseCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CourseCard({
+  id,
+  title,
+  thumbnail,
+  thumbnails,
+  totalLessons,
+  progress,
+  status,
+  isFree,
+  price = 0,
+  currency = "USD",
+  description,
+  showPrice = true,
+  showProgress = true,
+  category,
+  duration,
+  instructorName,
+  instructorAvatar,
+  originalPrice,
+  isBundle = false,
+  onClick,
+  className
+}) {
+  const [imageError, setImageError] = useState(false);
+  const clampedProgress = Math.min(Math.max(progress, 0), 100);
+  const stripHtml = (html) => {
+    if (typeof document === "undefined") return html;
+    const tmp = document.createElement("div");
+    tmp.innerHTML = html;
+    return tmp.textContent || tmp.innerText || "";
+  };
+  const displayCategory = category || "Design";
+  const displayDuration = duration || "3 Month";
+  const displayInstructorName = instructorName || (description ? stripHtml(description).slice(0, 15) : "Instructor");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 h-full flex flex-col min-w-0 w-full cursor-pointer",
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-[238.66px] w-full overflow-hidden mx-auto px-3 pt-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-full h-full rounded-xl overflow-hidden bg-gray-100", children: isBundle && thumbnails && thumbnails.length > 0 && !imageError ? /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex", children: [
+            /* @__PURE__ */ jsx("div", { className: "relative h-full w-1/2", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbnails[0],
+                alt: `${title} - image 1`,
+                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                onError: () => setImageError(true)
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-1/2 h-full", children: [
+              thumbnails[1] && /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-hidden", thumbnails.length > 2 ? "h-1/2" : "h-full"), children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: thumbnails[1],
+                  alt: `${title} - image 2`,
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                  onError: () => setImageError(true)
+                }
+              ) }),
+              thumbnails.length > 2 && thumbnails[2] && /* @__PURE__ */ jsx("div", { className: "relative w-full h-1/2 overflow-hidden", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: thumbnails[2],
+                  alt: `${title} - image 3`,
+                  className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+                  onError: () => setImageError(true)
+                }
+              ) })
+            ] })
+          ] }) : thumbnail && !imageError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: thumbnail,
+              alt: title,
+              className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-110",
+              onError: () => setImageError(true)
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ jsx(BookOpen, { className: "w-12 h-12 text-gray-400" }) }) }),
+          status && /* @__PURE__ */ jsx("div", { className: "absolute right-6 top-5", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `rounded-full px-3 py-1.5 text-xs font-medium text-white shadow-md ${status === "completed" ? "bg-green-500" : "bg-[rgb(var(--accent-primary))]"}`,
+              children: status
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-5 space-y-3 flex-1 flex flex-col min-w-0", children: [
+          (displayCategory || displayDuration) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+            displayCategory && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Grid2X2, { className: "w-3.5 h-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsx("span", { children: displayCategory })
+            ] }),
+            displayDuration && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsx("span", { children: displayDuration })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-bold text-gray-900 line-clamp-2 leading-snug", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 line-clamp-3 leading-relaxed", children: stripHtml(description) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          showProgress && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full rounded-full bg-[rgb(var(--accent-primary))] transition-all duration-300",
+                style: { width: `${clampedProgress}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-400" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+                isBundle ? "Course" : "Lesson",
+                " ",
+                Math.ceil(clampedProgress / 100 * totalLessons),
+                " of ",
+                totalLessons
+              ] })
+            ] })
+          ] }),
+          showPrice && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-3 border-t border-gray-100", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              instructorAvatar ? /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full overflow-hidden flex-shrink-0", children: /* @__PURE__ */ jsx("img", { src: instructorAvatar, alt: displayInstructorName, className: "w-full h-full object-cover" }) }) : /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-gray-500", children: displayInstructorName.charAt(0).toUpperCase() }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600 font-medium truncate max-w-[80px]", children: displayInstructorName })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              !isFree && originalPrice && originalPrice > price && /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-400 line-through", children: [
+                "$",
+                originalPrice
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-[rgb(var(--accent-primary))]", children: isFree ? "Free" : `$${price}` })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/molecules/Pagination.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Pagination({
+  currentPage,
+  totalPages,
+  total,
+  pageSize,
+  hasNextPage,
+  hasPreviousPage,
+  onPageChange,
+  maxVisiblePages = 5,
+  className
+}) {
+  const renderPageNumbers = () => {
+    const pages = [];
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    if (endPage - startPage < maxVisiblePages - 1) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: () => onPageChange(i),
+            className: cn(
+              "px-3 py-1 rounded cursor-pointer transition-colors",
+              i === currentPage ? "bg-theme-accent-primary text-white" : "text-theme-text-primary border border-theme-border-primary hover:bg-theme-bg-tertiary"
+            ),
+            children: i
+          },
+          i
+        )
+      );
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center justify-between border-t border-theme-border-primary pt-4", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "text-sm text-theme-text-secondary", children: [
+      "Showing ",
+      (currentPage - 1) * pageSize + 1,
+      " to ",
+      Math.min(currentPage * pageSize, total),
+      " of ",
+      total,
+      " results"
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: !hasPreviousPage,
+          className: "p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors",
+          "aria-label": "Previous page",
+          children: /* @__PURE__ */ jsx2(ChevronLeft, { className: "h-4 w-4" })
+        }
+      ),
+      renderPageNumbers(),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: !hasNextPage,
+          className: "p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors",
+          "aria-label": "Next page",
+          children: /* @__PURE__ */ jsx2(ChevronRight, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/pages/MyLearningPage.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MyLearningPage(props) {
+  const noop = () => {
+  };
+  const {
+    courses = [],
+    coursesMeta,
+    coursesLoading,
+    coursesPage = 1,
+    onCoursesPageChange = noop,
+    bundles = [],
+    bundlesMeta,
+    bundlesLoading,
+    bundlesPage = 1,
+    onBundlesPageChange = noop,
+    searchQuery = "",
+    onSearchChange = noop,
+    activeTab = "courses",
+    onTabChange = noop,
+    statusFilter = "all",
+    onStatusFilterChange = noop,
+    onCourseClick = noop,
+    onBundleClick = noop
+  } = props;
+  const [showStatusDropdown, setShowStatusDropdown] = useState2(false);
+  const isLoading = activeTab === "courses" ? !!coursesLoading : !!bundlesLoading;
+  const currentPage = activeTab === "courses" ? coursesPage : bundlesPage;
+  const meta = activeTab === "courses" ? coursesMeta : bundlesMeta;
+  const onPageChange = activeTab === "courses" ? onCoursesPageChange : onBundlesPageChange;
+  const isSearchMode = Boolean(searchQuery.trim());
+  const getStatusLabel = () => {
+    switch (statusFilter) {
+      case "in-progress":
+        return "In Progress";
+      case "completed":
+        return "Completed";
+      default:
+        return "All Status";
+    }
+  };
+  const handleStatusFilterChange = (status) => {
+    onStatusFilterChange(status);
+    setShowStatusDropdown(false);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "container mx-auto space-y-6", children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("h1", { className: "text-3xl font-bold text-theme-text-primary", children: "My Learning Content" }),
+      /* @__PURE__ */ jsx3("p", { className: "mt-2 text-lg text-theme-text-secondary", children: "Continue your learning journey with courses and bundles" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx3(Search, { className: "absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-theme-text-secondary z-10" }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "text",
+            placeholder: `Search ${activeTab}...`,
+            value: searchQuery,
+            onChange: (e) => onSearchChange(e.target.value),
+            className: "w-full rounded-lg border border-theme-border-primary bg-theme-bg-secondary pl-10 pr-10 py-2 text-sm text-theme-text-primary placeholder:text-theme-text-secondary focus:outline-none focus:ring-2 focus:ring-theme-accent-primary/30 focus:border-theme-accent-primary transition-all"
+          }
+        ),
+        searchQuery && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => onSearchChange(""),
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-theme-text-secondary hover:text-theme-text-primary transition-colors",
+            children: /* @__PURE__ */ jsx3(X, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      !isSearchMode && /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            onClick: () => setShowStatusDropdown(!showStatusDropdown),
+            className: "flex items-center gap-2 min-w-[150px] justify-between px-4 py-2 border border-theme-border-primary rounded-lg text-sm text-theme-text-primary bg-theme-bg-secondary hover:bg-theme-bg-tertiary transition-colors cursor-pointer",
+            children: [
+              getStatusLabel(),
+              /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4" })
+            ]
+          }
+        ),
+        showStatusDropdown && /* @__PURE__ */ jsx3("div", { className: "absolute right-0 mt-2 w-48 rounded-lg border border-theme-border-primary bg-theme-bg-secondary shadow-lg z-10", children: ["all", "in-progress", "completed"].map((s) => /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => handleStatusFilterChange(s),
+            className: `w-full text-left px-4 py-2 hover:bg-theme-bg-tertiary transition-colors ${statusFilter === s ? "bg-theme-bg-tertiary text-theme-accent-primary font-medium" : "text-theme-text-primary"}`,
+            children: s === "all" ? "All Status" : s === "in-progress" ? "In Progress" : "Completed"
+          },
+          s
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "flex gap-6 border-b border-theme-border-primary", children: ["courses", "bundles"].map((tab) => /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick: () => {
+          onTabChange(tab);
+          onSearchChange("");
+          onStatusFilterChange("all");
+        },
+        className: `pb-3 px-0 bg-transparent border-0 font-medium text-sm cursor-pointer capitalize ${activeTab === tab ? "border-b-2 border-theme-accent-primary text-theme-accent-primary" : "text-theme-text-secondary hover:text-theme-text-primary border-b-2 border-transparent"}`,
+        children: tab.charAt(0).toUpperCase() + tab.slice(1)
+      },
+      tab
+    )) }),
+    isLoading && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-16", children: [
+      /* @__PURE__ */ jsx3("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" }),
+      /* @__PURE__ */ jsxs3("p", { className: "mt-4 text-theme-text-secondary", children: [
+        "Loading ",
+        activeTab,
+        "..."
+      ] })
+    ] }),
+    !isLoading && activeTab === "courses" && courses.length === 0 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme-border-primary bg-theme-bg-secondary py-16 text-center", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-4xl mb-4", children: "\u{1F4DA}" }),
+      /* @__PURE__ */ jsx3("h3", { className: "text-xl font-semibold text-theme-text-primary", children: "No courses found" }),
+      /* @__PURE__ */ jsx3("p", { className: "mt-2 max-w-md text-theme-text-secondary", children: statusFilter === "all" ? "You don't have any enrolled courses yet" : `You don't have any ${statusFilter === "in-progress" ? "in progress" : "completed"} courses yet` })
+    ] }),
+    !isLoading && activeTab === "bundles" && bundles.length === 0 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme-border-primary bg-theme-bg-secondary py-16 text-center", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-4xl mb-4", children: "\u{1F4E6}" }),
+      /* @__PURE__ */ jsx3("h3", { className: "text-xl font-semibold text-theme-text-primary", children: "No bundles found" }),
+      /* @__PURE__ */ jsx3("p", { className: "mt-2 max-w-md text-theme-text-secondary", children: statusFilter === "all" ? "You don't have any enrolled bundles yet" : `You don't have any ${statusFilter === "in-progress" ? "in progress" : "completed"} bundles yet` })
+    ] }),
+    !isLoading && activeTab === "courses" && courses.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { className: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: courses.map((enrollment) => {
+        const course = enrollment.course || enrollment;
+        const title = (course == null ? void 0 : course.title) || enrollment.title || "";
+        const thumbnail = (course == null ? void 0 : course.thumbnail) || enrollment.thumbnail;
+        const totalLessons = enrollment.totalNumberOfActivities || enrollment.totalLessons || 0;
+        const progress = Math.min(enrollment.progressPercentage || enrollment.progress || 0, 100);
+        const status = enrollment.status === "COMPLETED" ? "completed" : enrollment.status === "IN_PROGRESS" ? "in-progress" : void 0;
+        const description = ((course == null ? void 0 : course.summary) || enrollment.description || "").replace(/<[^>]*>/g, "");
+        return /* @__PURE__ */ jsx3(
+          CourseCard,
+          {
+            id: enrollment.id,
+            title,
+            thumbnail,
+            totalLessons,
+            progress,
+            status,
+            isFree: true,
+            price: 0,
+            showPrice: false,
+            showProgress: true,
+            description,
+            onClick: () => onCourseClick((course == null ? void 0 : course.id) || enrollment.courseId || enrollment.id, enrollment.id)
+          },
+          enrollment.id
+        );
+      }) }),
+      meta && /* @__PURE__ */ jsx3(
+        Pagination,
+        {
+          currentPage,
+          totalPages: meta.totalPages,
+          total: meta.total,
+          pageSize: meta.limit || 12,
+          hasNextPage: currentPage < meta.totalPages,
+          hasPreviousPage: currentPage > 1,
+          onPageChange
+        }
+      )
+    ] }),
+    !isLoading && activeTab === "bundles" && bundles.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { className: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: bundles.map((enrollment) => {
+        var _a, _b, _c;
+        const thumbnails = (_a = enrollment.courses) == null ? void 0 : _a.slice(0, 3).map((c) => c.thumbnail).filter(Boolean);
+        const description = ((_c = (_b = enrollment.courses) == null ? void 0 : _b[0]) == null ? void 0 : _c.summary) || "";
+        const status = enrollment.status === "COMPLETED" ? "completed" : enrollment.status === "IN_PROGRESS" ? "in-progress" : void 0;
+        return /* @__PURE__ */ jsx3(
+          CourseCard,
+          {
+            id: enrollment.id,
+            title: enrollment.bundleTitle || enrollment.title || "",
+            thumbnails,
+            totalLessons: enrollment.totalCourses || 0,
+            progress: Math.min(enrollment.progressPercentage || 0, 100),
+            status,
+            isFree: true,
+            price: 0,
+            showPrice: false,
+            showProgress: true,
+            description,
+            isBundle: true,
+            onClick: () => onBundleClick(enrollment.sourceBundleId || enrollment.bundleId || enrollment.id)
+          },
+          enrollment.id
+        );
+      }) }),
+      meta && /* @__PURE__ */ jsx3(
+        Pagination,
+        {
+          currentPage,
+          totalPages: meta.totalPages,
+          total: meta.total,
+          pageSize: meta.limit || 12,
+          hasNextPage: currentPage < meta.totalPages,
+          hasPreviousPage: currentPage > 1,
+          onPageChange
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/pages/CatalogCoursesPage.tsx
+import { useState as useState3 } from "react";
+import { Search as Search2, BookOpen as BookOpen2, Package, Twitter, Facebook, Instagram } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FILE_URL = "https://fe-academy-file.dev.magicai-testing-domain.work";
+var FEATURES = [
+  "Free E-book, video & consolation",
+  "Top instructors from around world",
+  "Top courses from your team"
+];
+var DEALS = [
+  { id: 1, discount: "50%", title: "Lorem ipsum dolor", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", image: `${FILE_URL}/deal-1.png` },
+  { id: 2, discount: "10%", title: "Lorem ipsum dolor", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", image: `${FILE_URL}/deal-2.png` },
+  { id: 3, discount: "50%", title: "Lorem ipsum dolor", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", image: `${FILE_URL}/deal-3.png` }
+];
+var RECOMMENDED = [
+  { id: "d87b963f", title: "testtgfsdfg dfs", thumbnail: `${FILE_URL}/uploads/4e2fd752-e8c0-440a-8622-3102d33e56e7-1771918805146.png`, totalLessons: 1, progress: 0, isFree: true, price: 0 },
+  { id: "30ceedf8", title: "tessst 11", thumbnail: `${FILE_URL}/uploads/ec2ebd93-f06e-48ce-914a-116b1b91c480-1771878020911.jpeg`, totalLessons: 1, progress: 0, isFree: true, price: 0 },
+  { id: "eae7f568", title: "React", thumbnail: `${FILE_URL}/uploads/ca3257ea-618c-4a61-a4b6-5560c2bf5ec1-1771488717244.png`, totalLessons: 2, progress: 0, isFree: true, price: 0 },
+  { id: "26a52485", title: "ll1", thumbnail: `${FILE_URL}/uploads/9bf7f1ca-214b-4a82-862d-f334801bcd53-1771486627052.png`, totalLessons: 1, progress: 0, isFree: true, price: 0 }
+];
+var SIDE_AVATARS = [`${FILE_URL}/avatar-1.png`, `${FILE_URL}/avatar-2.png`, `${FILE_URL}/avatar-3.png`, `${FILE_URL}/avatar-4.png`];
+function CatalogCoursesPage(props) {
+  const noop = (..._args) => {
+  };
+  const {
+    courses = [],
+    meta,
+    loading = false,
+    searchQuery = "",
+    page = 1,
+    onSearchChange = noop,
+    onPageChange = noop,
+    onCourseClick = noop,
+    activeTab = "courses",
+    onTabChange,
+    bundleCourses = [],
+    bundleMeta,
+    bundlesLoading = false,
+    bundlePage = 1,
+    onBundlePageChange = noop,
+    onBundleClick = noop
+  } = props;
+  const [localQuery, setLocalQuery] = useState3(searchQuery);
+  const defaultHeroImage = `${FILE_URL}/catalog-hero-banner.png`;
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    onSearchChange(localQuery);
+  };
+  const handleSearchChange = (val) => {
+    setLocalQuery(val);
+    onSearchChange(val);
+  };
+  const displayCourses = activeTab === "courses" ? courses : bundleCourses;
+  const displayMeta = activeTab === "courses" ? meta : bundleMeta;
+  const displayLoading = activeTab === "courses" ? loading : bundlesLoading;
+  const displayPage = activeTab === "courses" ? page : bundlePage;
+  const displayPageChange = activeTab === "courses" ? onPageChange : onBundlePageChange;
+  return /* @__PURE__ */ jsxs4("div", { className: "container mx-auto space-y-10", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "relative w-full overflow-hidden rounded-2xl", children: [
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "absolute inset-0 z-0 bg-cover bg-center",
+          style: { backgroundImage: `var(--catalog-hero-image, url(${defaultHeroImage}))` },
+          children: /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "absolute inset-0 backdrop-blur-[1px]",
+              style: { background: "linear-gradient(135deg, rgba(73,187,189,0.75) 0%, rgba(73,187,189,0.55) 50%, rgba(73,187,189,0.40) 100%)" }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx4("div", { className: "relative z-10 flex flex-col items-center justify-center px-4 py-8 sm:px-6 sm:py-10 gap-4", children: /* @__PURE__ */ jsxs4(
+        "form",
+        {
+          onSubmit: handleSearchSubmit,
+          className: "flex w-full max-w-[680px] bg-white rounded-2xl sm:rounded-full p-1 sm:p-[5px] sm:pl-0 shadow-lg flex-col sm:flex-row gap-1 sm:gap-0 sm:items-center",
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "relative flex-1 flex items-center w-full", children: [
+              /* @__PURE__ */ jsx4(Search2, { className: "absolute left-4 sm:left-5 w-5 h-5 text-gray-400 pointer-events-none" }),
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  type: "text",
+                  placeholder: activeTab === "courses" ? "Search your favourite course" : "Search your favourite bundle",
+                  value: localQuery,
+                  onChange: (e) => handleSearchChange(e.target.value),
+                  className: "w-full py-3 sm:py-3.5 pl-12 sm:pl-13 pr-4 bg-transparent text-gray-700 text-sm sm:text-[15px] rounded-full border-none outline-none placeholder:text-gray-400"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "submit",
+                className: "shrink-0 px-8 py-3 bg-theme-accent-primary text-white font-semibold text-sm sm:text-[15px] rounded-xl sm:rounded-full cursor-pointer transition-all duration-150 hover:brightness-110 hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto",
+                children: "Search"
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "flex gap-2", children: [{ id: "courses", label: "Courses", Icon: BookOpen2 }, { id: "bundles", label: "Bundles", Icon: Package }].map(({ id, label, Icon }) => /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => onTabChange == null ? void 0 : onTabChange(id),
+        className: `flex items-center gap-2 px-4 py-2.5 font-medium transition-colors cursor-pointer ${activeTab === id ? "border-b-2 border-theme-accent-primary text-theme-accent-primary" : "text-theme-text-secondary hover:text-theme-text-primary"}`,
+        children: [
+          /* @__PURE__ */ jsx4(Icon, { className: "h-4 w-4" }),
+          label
+        ]
+      },
+      id
+    )) }),
+    displayLoading ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center py-16", children: [
+      /* @__PURE__ */ jsx4("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" }),
+      /* @__PURE__ */ jsxs4("p", { className: "mt-4 text-theme-text-secondary", children: [
+        "Loading ",
+        activeTab,
+        "..."
+      ] })
+    ] }) : displayCourses.length === 0 ? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme-border-primary bg-theme-bg-secondary py-16 text-center", children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-4xl mb-4", children: activeTab === "courses" ? "\u{1F4DA}" : "\u{1F4E6}" }),
+      /* @__PURE__ */ jsxs4("h3", { className: "text-xl font-semibold text-theme-text-primary", children: [
+        "No ",
+        activeTab,
+        " found"
+      ] }),
+      /* @__PURE__ */ jsx4("p", { className: "mt-2 max-w-md text-theme-text-secondary", children: "Try adjusting your search query or check back later" })
+    ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4("div", { className: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: displayCourses.map((course) => {
+        var _a;
+        const description = (course.summary || course.description || "").replace(/<[^>]*>/g, "");
+        const price = (_a = course.price) != null ? _a : 0;
+        const isFree = course.isFree !== void 0 ? course.isFree : price === 0;
+        return /* @__PURE__ */ jsx4(
+          CourseCard,
+          {
+            id: course.id,
+            title: course.title || "",
+            thumbnail: course.thumbnail || "",
+            totalLessons: course.totalLessons || 0,
+            progress: 0,
+            showProgress: false,
+            isFree,
+            price,
+            showPrice: true,
+            currency: course.currency,
+            description,
+            instructorName: course.instructorName,
+            instructorAvatar: course.instructorAvatar,
+            category: course.category,
+            originalPrice: course.originalPrice,
+            isBundle: activeTab === "bundles",
+            thumbnails: course.thumbnails,
+            onClick: () => activeTab === "courses" ? onCourseClick(course.id) : onBundleClick(course.id)
+          },
+          course.id
+        );
+      }) }),
+      displayMeta && displayMeta.totalPages > 1 && /* @__PURE__ */ jsx4(
+        Pagination,
+        {
+          currentPage: displayPage,
+          totalPages: displayMeta.totalPages,
+          total: displayMeta.total,
+          pageSize: displayMeta.limit || 8,
+          hasNextPage: displayPage < displayMeta.totalPages,
+          hasPreviousPage: displayPage > 1,
+          onPageChange: displayPageChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4("section", { className: "rounded-2xl bg-[#EEF4FA] p-6 sm:p-8 lg:p-10 overflow-hidden", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-8 lg:flex-row lg:items-center lg:justify-between px-10", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "space-y-6 lg:max-w-md shrink-0 py-4", children: [
+        /* @__PURE__ */ jsxs4("h2", { className: "text-2xl font-bold text-gray-900 sm:text-3xl leading-snug", children: [
+          "Know about learning",
+          /* @__PURE__ */ jsx4("br", {}),
+          "learning platform"
+        ] }),
+        /* @__PURE__ */ jsx4("ul", { className: "space-y-5", children: FEATURES.map((feature, i) => /* @__PURE__ */ jsxs4("li", { className: "flex items-center gap-4 text-sm text-gray-600 font-medium", children: [
+          /* @__PURE__ */ jsx4("span", { className: "h-4 w-4 rounded-full bg-[#B8F0E8] shrink-0" }),
+          feature
+        ] }, i)) }),
+        /* @__PURE__ */ jsx4("button", { className: "inline-block rounded-lg bg-theme-accent-primary px-8 py-3.5 text-sm font-bold text-white shadow-md transition-all hover:brightness-110 hover:scale-[1.02] active:scale-[0.98]", children: "Start learning now" })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "relative w-full max-w-[520px] lg:w-[55%]", children: /* @__PURE__ */ jsx4("div", { className: "aspect-[16/10] w-full flex items-center justify-center bg-[#dbeafe] rounded-xl", children: /* @__PURE__ */ jsx4("span", { className: "text-gray-400 text-sm", children: "Platform Preview" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx4("div", { className: "relative w-screen left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-[#EEF4FA]", children: /* @__PURE__ */ jsx4("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: /* @__PURE__ */ jsxs4("section", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "text-xl font-bold text-gray-900 sm:text-2xl", children: "Recommended for you" }),
+        /* @__PURE__ */ jsx4("button", { className: "shrink-0 text-sm font-semibold text-[rgb(var(--accent-primary))] hover:underline cursor-pointer", children: "See all" })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: RECOMMENDED.map((course) => /* @__PURE__ */ jsx4(
+        CourseCard,
+        {
+          id: course.id,
+          title: course.title,
+          thumbnail: course.thumbnail,
+          totalLessons: course.totalLessons,
+          progress: course.progress,
+          showProgress: false,
+          isFree: course.isFree,
+          price: course.price,
+          showPrice: true,
+          onClick: () => onCourseClick(course.id)
+        },
+        course.id
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx4("div", { className: "relative w-screen left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-[#EEF4FA]", children: /* @__PURE__ */ jsx4("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: /* @__PURE__ */ jsxs4("section", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "text-xl font-bold text-gray-900 sm:text-2xl", children: "What our students have to say" }),
+      /* @__PURE__ */ jsx4("div", { className: "rounded-2xl bg-white p-6 sm:p-8 lg:p-14 shadow-sm relative overflow-hidden", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-6 lg:flex-row lg:items-center lg:gap-16", children: [
+        /* @__PURE__ */ jsx4("div", { className: "relative shrink-0 w-48 h-48 sm:w-64 sm:h-64 bg-gray-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx4("img", { src: `${FILE_URL}/student.png`, alt: "Student", className: "w-full h-full object-cover rounded-full", onError: (e) => {
+          e.target.style.display = "none";
+        } }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex-1 space-y-4 text-center lg:text-left min-w-0 z-10", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx4("h3", { className: "text-xl font-bold text-gray-900", children: "Savannah Nguyen" }),
+            /* @__PURE__ */ jsx4("p", { className: "text-sm text-gray-500 font-medium tracking-wide", children: "tanya.hill@example.com" })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "space-y-2 text-sm text-gray-500 leading-relaxed max-w-lg", children: [
+            /* @__PURE__ */ jsx4("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor" }),
+            /* @__PURE__ */ jsx4("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor" }),
+            /* @__PURE__ */ jsx4("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor" })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-3 pt-2 justify-center lg:justify-start", children: [Twitter, Facebook, Instagram].map((Icon, i) => /* @__PURE__ */ jsx4("button", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-theme-accent-primary text-white transition-all hover:scale-110 hover:shadow-md", children: /* @__PURE__ */ jsx4(Icon, { className: "h-4 w-4" }) }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "hidden lg:flex flex-col gap-5 shrink-0 z-10", children: SIDE_AVATARS.map((avatar, i) => /* @__PURE__ */ jsx4("div", { className: "relative h-14 w-14 overflow-hidden rounded-full border-2 border-white shadow-md transition-all hover:scale-110 cursor-pointer hover:border-[#49BBBD]", children: /* @__PURE__ */ jsx4("img", { src: avatar, alt: `Student ${i + 1}`, className: "w-full h-full object-cover", onError: (e) => {
+          e.target.style.display = "none";
+        } }) }, i)) })
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs4("section", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx4("h2", { className: "text-xl font-bold text-gray-900 sm:text-2xl", children: "Top Education offers and deals are listed here" }),
+        /* @__PURE__ */ jsx4("button", { className: "shrink-0 text-sm font-semibold text-[rgb(var(--accent-primary))] hover:underline cursor-pointer", children: "See all" })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: DEALS.map((deal) => /* @__PURE__ */ jsxs4("div", { className: "group relative overflow-hidden rounded-2xl cursor-pointer h-[320px] sm:h-[350px]", children: [
+        /* @__PURE__ */ jsx4("img", { src: deal.image, alt: deal.title, className: "absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110", onError: (e) => {
+          e.target.style.background = "#e5e7eb";
+        } }),
+        /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" }),
+        /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 flex flex-col justify-between p-5 sm:p-6", children: [
+          /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4("span", { className: "inline-block rounded-lg bg-[rgb(var(--accent-primary))] px-4 py-2 text-xl font-bold text-white sm:text-2xl", children: deal.discount }) }),
+          /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx4("h3", { className: "text-lg font-bold text-white sm:text-xl", children: deal.title }),
+            /* @__PURE__ */ jsx4("p", { className: "text-sm text-white/80 leading-relaxed line-clamp-2", children: deal.description })
+          ] })
+        ] })
+      ] }, deal.id)) })
+    ] })
+  ] });
+}
+
+// src/components/pages/CatalogBundlesPage.tsx
+import { Search as Search3, X as X2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function CatalogBundlesPage(props) {
+  const noop = (..._args) => {
+  };
+  const { bundles = [], meta, loading = false, searchQuery = "", page = 1, onSearchChange = noop, onPageChange = noop, onBundleClick = noop } = props;
+  return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx5(Search3, { className: "absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-theme-text-secondary z-10" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search bundles...",
+          value: searchQuery,
+          onChange: (e) => onSearchChange(e.target.value),
+          className: "w-full rounded-lg border border-theme-border-primary bg-theme-bg-secondary pl-10 pr-10 py-2 text-sm text-theme-text-primary placeholder:text-theme-text-secondary focus:outline-none focus:ring-2 focus:ring-theme-accent-primary/30 focus:border-theme-accent-primary transition-all"
+        }
+      ),
+      searchQuery && /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: () => onSearchChange(""),
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-theme-text-secondary hover:text-theme-text-primary transition-colors",
+          children: /* @__PURE__ */ jsx5(X2, { className: "h-5 w-5" })
+        }
+      )
+    ] }),
+    loading ? /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center py-16", children: [
+      /* @__PURE__ */ jsx5("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" }),
+      /* @__PURE__ */ jsx5("p", { className: "mt-4 text-theme-text-secondary", children: "Loading bundles..." })
+    ] }) : bundles.length === 0 ? /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-theme-border-primary bg-theme-bg-secondary py-16 text-center", children: [
+      /* @__PURE__ */ jsx5("div", { className: "text-4xl mb-4", children: "\u{1F4E6}" }),
+      /* @__PURE__ */ jsx5("h3", { className: "text-xl font-semibold text-theme-text-primary", children: "No bundles found" }),
+      /* @__PURE__ */ jsx5("p", { className: "mt-2 max-w-md text-theme-text-secondary", children: "Try adjusting your search query or check back later for new bundles" })
+    ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx5("div", { className: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: bundles.map((bundle) => {
+        var _a, _b, _c;
+        const priceValue = bundle.price !== void 0 && bundle.price !== null ? bundle.price : ((_a = bundle.settings) == null ? void 0 : _a.price) || 0;
+        const pricingType = bundle.pricingType || ((_b = bundle.settings) == null ? void 0 : _b.pricingType);
+        const isFree = pricingType === "FREE" || !priceValue || priceValue === 0;
+        const thumbnails = bundle.courses && bundle.courses.length > 0 ? bundle.courses.sort((a, b) => a.orderIndex - b.orderIndex).slice(0, 3).map((c) => c.thumbnail) : bundle.thumbnails || [];
+        return /* @__PURE__ */ jsx5(
+          CourseCard,
+          {
+            id: bundle.id,
+            title: bundle.title || "",
+            thumbnail: thumbnails[0],
+            thumbnails,
+            totalLessons: bundle.totalCourses || ((_c = bundle.courses) == null ? void 0 : _c.length) || 0,
+            progress: 0,
+            showProgress: false,
+            isFree,
+            price: priceValue,
+            showPrice: true,
+            currency: bundle.currency,
+            description: bundle.description || "",
+            isBundle: true,
+            onClick: () => onBundleClick(bundle.id)
+          },
+          bundle.id
+        );
+      }) }),
+      meta && meta.totalPages > 1 && /* @__PURE__ */ jsx5(
+        Pagination,
+        {
+          currentPage: page,
+          totalPages: meta.totalPages,
+          total: meta.total,
+          pageSize: meta.limit || 12,
+          hasNextPage: page < meta.totalPages,
+          hasPreviousPage: page > 1,
+          onPageChange
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/pages/CourseDetailPage.tsx
+import { useState as useState4 } from "react";
+import {
+  CheckCircle2,
+  ChevronDown as ChevronDown2,
+  ChevronRight as ChevronRight2,
+  PlayCircle,
+  Download,
+  FileText,
+  Clock as Clock2,
+  Monitor,
+  Tag,
+  X as X3,
+  Check,
+  BookOpen as BookOpen3
+} from "lucide-react";
+
+// src/components/molecules/LoadingSpinner.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-8 w-8",
+  lg: "h-12 w-12"
+};
+function LoadingSpinner({ size = "md", className, text }) {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col items-center justify-center gap-3", className), children: [
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn(
+          "animate-spin rounded-full border-2 border-theme-bg-tertiary border-t-theme-accent-primary",
+          sizeClasses[size]
+        )
+      }
+    ),
+    text && /* @__PURE__ */ jsx6("p", { className: "text-sm text-theme-text-secondary", children: text })
+  ] });
+}
+
+// src/components/molecules/EmptyState.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col items-center justify-center py-12 text-center", className), children: [
+    icon && /* @__PURE__ */ jsx7("div", { className: "mb-4 text-theme-text-muted", children: icon }),
+    /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-theme-text-primary", children: title }),
+    description && /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-theme-text-secondary max-w-md", children: description }),
+    action && /* @__PURE__ */ jsx7("div", { className: "mt-4", children: action })
+  ] });
+}
+
+// src/components/pages/CourseDetailPage.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function formatCoursePrice(price, isFree, currency = "USD") {
+  if (isFree || price === 0) return "Free";
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(price);
+  } catch (e) {
+    return `${currency} ${price.toFixed(2)}`;
+  }
+}
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  if (mins >= 60) {
+    const hours = Math.floor(mins / 60);
+    const remainMins = mins % 60;
+    return `${hours}h ${remainMins}m`;
+  }
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+function CourseDetailPage(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const noop = (..._args) => {
+  };
+  const {
+    course,
+    isLoading = false,
+    notFound = false,
+    isEnrolled = false,
+    enrollmentId = null,
+    onEnroll = noop,
+    onStartLearning = noop,
+    isProcessingEnrollment = false,
+    paymentProviders = [],
+    onCheckout = noop,
+    isProcessingCheckout = false,
+    couponCode = "",
+    onCouponCodeChange = noop,
+    onApplyCoupon = noop,
+    appliedCoupon = null,
+    couponError = null,
+    isApplyingCoupon = false,
+    discountedPrice,
+    activeTab = "overview",
+    onTabChange = noop,
+    relatedCourses = [],
+    isRelatedLoading = false,
+    onRelatedCourseClick = noop,
+    ratings,
+    ratingSummary
+  } = props;
+  const [expandedSections, setExpandedSections] = useState4(/* @__PURE__ */ new Set());
+  const [selectedLesson, setSelectedLesson] = useState4(null);
+  const [showCouponInput, setShowCouponInput] = useState4(false);
+  const [imgError, setImgError] = useState4(false);
+  if (isLoading) return /* @__PURE__ */ jsx8(LoadingSpinner, { className: "py-20", text: "Loading course..." });
+  if (notFound || !course) {
+    return /* @__PURE__ */ jsx8(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx8(BookOpen3, { className: "w-16 h-16" }),
+        title: "Course not found",
+        description: "The course you're looking for doesn't exist."
+      }
+    );
+  }
+  const pricingType = ((_a = course.settings) == null ? void 0 : _a.pricingType) || course.pricingType || "FREE";
+  const price = (_d = (_c = (_b = course.settings) == null ? void 0 : _b.price) != null ? _c : course.price) != null ? _d : 0;
+  const currency = (_g = (_f = (_e = course.settings) == null ? void 0 : _e.currency) != null ? _f : course.currency) != null ? _g : "USD";
+  const isFree = pricingType === "FREE" || price === 0;
+  const bannerImage = ((_h = course.settings) == null ? void 0 : _h.banner) || course.bannerImage;
+  const thumbnail = course.thumbnail || "";
+  const totalLessons = (course.sections || []).reduce(
+    (sum, s) => {
+      var _a2;
+      return sum + (((_a2 = s.activities) == null ? void 0 : _a2.length) || 0);
+    },
+    0
+  );
+  const sections = course.sections || [];
+  const hasBanner = bannerImage && bannerImage.trim();
+  const toggleSection = (sectionId) => {
+    const next = new Set(expandedSections);
+    if (next.has(sectionId)) next.delete(sectionId);
+    else next.add(sectionId);
+    setExpandedSections(next);
+  };
+  const getButtonText = () => {
+    if (isEnrolled) return "Continue Learning";
+    if (isFree) return "Enroll for Free";
+    if (pricingType === "SUBSCRIPTION") return "Subscribe to Access";
+    if (pricingType === "INSTALLMENT") return "Make a Payment";
+    return "Buy Course";
+  };
+  const handleEnrollClick = () => {
+    if (isEnrolled && enrollmentId) {
+      onStartLearning(enrollmentId);
+      return;
+    }
+    if (isFree) {
+      onEnroll();
+      return;
+    }
+    if (paymentProviders.length === 1) {
+      const p = paymentProviders[0];
+      onCheckout(p.paymentProvider || p.id);
+      return;
+    }
+    onEnroll();
+  };
+  const renderEnrollmentCard = () => /* @__PURE__ */ jsxs8("div", { className: "bg-white p-4 rounded-xl shadow-lg border border-gray-100", children: [
+    thumbnail && !imgError && /* @__PURE__ */ jsx8(
+      "img",
+      {
+        src: thumbnail,
+        alt: course.title,
+        className: "w-full h-48 object-cover rounded-lg mb-4",
+        onError: () => setImgError(true)
+      }
+    ),
+    isEnrolled && /* @__PURE__ */ jsxs8("div", { className: "mb-4 flex items-center justify-center gap-2 text-green-600", children: [
+      /* @__PURE__ */ jsx8(Check, { className: "h-5 w-5" }),
+      /* @__PURE__ */ jsx8("span", { className: "font-semibold text-sm", children: "You're enrolled" })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "text-center mb-4", children: appliedCoupon && discountedPrice !== void 0 ? /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx8("div", { className: "text-2xl font-bold text-gray-900", children: formatCoursePrice(discountedPrice, false, currency) }),
+      /* @__PURE__ */ jsx8("div", { className: "text-base line-through text-gray-400", children: formatCoursePrice(price, isFree, currency) }),
+      /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold text-gray-900", children: appliedCoupon.discountType === "PERCENTAGE" ? `${appliedCoupon.discountValue}% Off` : formatCoursePrice(appliedCoupon.discountValue, false, currency) })
+    ] }) : /* @__PURE__ */ jsxs8("div", { className: "text-2xl font-bold text-gray-900", children: [
+      formatCoursePrice(price, isFree, currency),
+      pricingType === "SUBSCRIPTION" && /* @__PURE__ */ jsx8("span", { className: "text-lg font-normal text-gray-500", children: " / month" })
+    ] }) }),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        onClick: handleEnrollClick,
+        disabled: isProcessingEnrollment || isProcessingCheckout,
+        className: "w-full bg-theme-accent-primary hover:bg-[#3da5a7] text-white font-semibold py-3 px-6 rounded-md transition-colors mb-4 cursor-pointer disabled:opacity-50",
+        children: isProcessingEnrollment || isProcessingCheckout ? "Processing..." : getButtonText()
+      }
+    ),
+    !isEnrolled && !isFree && paymentProviders.length > 1 && paymentProviders.map((provider) => /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        onClick: () => onCheckout(provider.paymentProvider || provider.id),
+        disabled: isProcessingCheckout,
+        className: "w-full bg-theme-accent-primary hover:bg-[#3da5a7] text-white font-semibold py-3 px-6 rounded-md transition-colors mb-2 cursor-pointer disabled:opacity-50",
+        children: [
+          "Pay with ",
+          provider.paymentProvider
+        ]
+      },
+      provider.paymentProvider || provider.id
+    )),
+    !isFree && !isEnrolled && /* @__PURE__ */ jsx8("div", { className: "mb-6", children: appliedCoupon ? /* @__PURE__ */ jsx8("div", { className: "p-3 bg-theme-accent-primary/10 border border-[#49BBBD]/20 rounded-lg", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(Tag, { className: "h-4 w-4 text-[#49BBBD]" }),
+        /* @__PURE__ */ jsxs8("span", { className: "text-sm font-medium text-[#49BBBD]", children: [
+          'Coupon "',
+          appliedCoupon.code,
+          '" applied'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          onClick: () => {
+            onCouponCodeChange("");
+          },
+          className: "text-[#49BBBD] hover:text-[#3da5a7] transition-colors cursor-pointer",
+          children: /* @__PURE__ */ jsx8(X3, { className: "h-4 w-4" })
+        }
+      )
+    ] }) }) : showCouponInput ? /* @__PURE__ */ jsxs8("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx8(
+          "input",
+          {
+            type: "text",
+            placeholder: "Enter coupon code",
+            value: couponCode,
+            onChange: (e) => onCouponCodeChange(e.target.value.toUpperCase()),
+            className: `flex-1 text-sm border rounded-md px-3 py-2 focus:outline-none focus:border-[#49BBBD] ${couponError ? "border-red-500" : "border-gray-300"}`
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: onApplyCoupon,
+            disabled: !couponCode || isApplyingCoupon,
+            className: "px-3 py-2 text-sm bg-theme-accent-primary text-white rounded-md hover:bg-[#3da5a7] disabled:opacity-50 cursor-pointer",
+            children: isApplyingCoupon ? "Applying..." : "Apply"
+          }
+        )
+      ] }),
+      couponError && /* @__PURE__ */ jsx8("p", { className: "text-xs text-red-600", children: couponError })
+    ] }) : /* @__PURE__ */ jsx8(
+      "a",
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          setShowCouponInput(true);
+        },
+        className: "block text-center text-sm font-medium text-[#49BBBD] hover:text-[#3da5a7] hover:underline cursor-pointer",
+        children: "Apply Coupon"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs8("div", { className: "border-t border-gray-200 pt-4", children: [
+      /* @__PURE__ */ jsx8("h3", { className: "font-semibold text-gray-900 mb-3 text-sm", children: "This course included" }),
+      /* @__PURE__ */ jsxs8("div", { className: "space-y-2.5", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2.5 text-gray-700", children: [
+          /* @__PURE__ */ jsx8("div", { className: "w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx8(FileText, { className: "h-2.5 w-2.5 text-white" }) }),
+          /* @__PURE__ */ jsxs8("span", { className: "text-sm", children: [
+            totalLessons,
+            " lessons"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2.5 text-gray-700", children: [
+          /* @__PURE__ */ jsx8("div", { className: "w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx8(Clock2, { className: "h-2.5 w-2.5 text-white" }) }),
+          /* @__PURE__ */ jsx8("span", { className: "text-sm", children: "Self-paced learning" })
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2.5 text-gray-700", children: [
+          /* @__PURE__ */ jsx8("div", { className: "w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx8(Monitor, { className: "h-2.5 w-2.5 text-white" }) }),
+          /* @__PURE__ */ jsx8("span", { className: "text-sm", children: "Access on mobile and desktop" })
+        ] })
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs8("div", { className: "-mx-4 sm:-mx-4 md:-mx-4 lg:-mx-6 xl:-mx-6", children: [
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "relative text-white px-4 lg:px-8 py-8 lg:py-40 mb-8",
+        style: hasBanner ? { backgroundImage: `url(${bannerImage})`, backgroundSize: "cover", backgroundPosition: "center" } : { backgroundColor: "#1a2332" },
+        children: [
+          hasBanner && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/50 to-black/40" }),
+          /* @__PURE__ */ jsxs8("div", { className: "relative z-10", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "max-w-7xl lg:pr-110", children: [
+              /* @__PURE__ */ jsx8("h1", { className: "text-3xl lg:text-4xl font-bold mb-2", children: course.title }),
+              course.brief && /* @__PURE__ */ jsx8("p", { className: "text-base lg:text-lg text-gray-300 mb-4 leading-relaxed", children: course.brief }),
+              course.creator && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mt-4 lg:mt-6", children: [
+                /* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold", children: (course.creator.name || "C").charAt(0).toUpperCase() }),
+                /* @__PURE__ */ jsx8("span", { className: "text-sm", children: course.creator.name })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx8("div", { className: "lg:hidden mt-6", children: renderEnrollmentCard() })
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "hidden lg:block absolute right-8 top-15 w-80 z-20", children: renderEnrollmentCard() })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8("div", { className: "px-4 lg:px-6 mb-6", children: /* @__PURE__ */ jsx8("div", { className: "flex gap-3", children: ["overview", "curriculum"].map((tab) => /* @__PURE__ */ jsx8(
+      "button",
+      {
+        onClick: () => onTabChange(tab),
+        className: `px-6 py-2.5 rounded-full text-sm font-medium transition-all cursor-pointer ${activeTab === tab ? "bg-theme-accent-primary text-white shadow-md" : "bg-white text-gray-600 border border-gray-200 hover:border-[#49BBBD] hover:text-[#49BBBD]"}`,
+        children: tab.charAt(0).toUpperCase() + tab.slice(1)
+      },
+      tab
+    )) }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "px-4 lg:px-6", children: [
+      activeTab === "overview" && /* @__PURE__ */ jsxs8("div", { className: "lg:pr-110", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "mb-8 pb-8 border-b border-gray-300", children: [
+          /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: "About This Course" }),
+          course.summary && /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "text-gray-700 text-sm leading-relaxed mb-6",
+              dangerouslySetInnerHTML: { __html: course.summary }
+            }
+          ),
+          course.description && /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "text-gray-700 text-sm leading-relaxed",
+              dangerouslySetInnerHTML: { __html: course.description }
+            }
+          )
+        ] }),
+        course.whatYouWillLearn && course.whatYouWillLearn.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "mb-8 pb-8 border-b border-gray-300", children: [
+          /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: "What You'll Learn" }),
+          /* @__PURE__ */ jsx8("div", { className: "grid md:grid-cols-2 gap-3", children: course.whatYouWillLearn.map((item, i) => /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx8(CheckCircle2, { className: "h-5 w-5 text-green-600 flex-shrink-0" }),
+            /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-700", children: item })
+          ] }, i)) })
+        ] }),
+        course.requirements && course.requirements.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "mb-8 pb-8 border-b border-gray-300", children: [
+          /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: "Requirements" }),
+          /* @__PURE__ */ jsx8("ul", { className: "space-y-2", children: course.requirements.map((item, i) => /* @__PURE__ */ jsxs8("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-gray-400 text-sm", children: "\u2022" }),
+            /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-700", children: item })
+          ] }, i)) })
+        ] }),
+        course.targetAudience && course.targetAudience.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "mb-8 pb-8 border-b border-gray-300", children: [
+          /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: "Who This Course Is For" }),
+          /* @__PURE__ */ jsx8("ul", { className: "space-y-2", children: course.targetAudience.map((item, i) => /* @__PURE__ */ jsxs8("li", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx8("span", { className: "text-gray-400 text-sm", children: "\u2022" }),
+            /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-700", children: item })
+          ] }, i)) })
+        ] }),
+        ratingSummary && /* @__PURE__ */ jsxs8("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4 mb-6", children: [
+            /* @__PURE__ */ jsx8("div", { className: "text-5xl font-bold text-yellow-500", children: (_i = ratingSummary.averageRating) == null ? void 0 : _i.toFixed(1) }),
+            /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-1 mb-1", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx8(
+                "svg",
+                {
+                  className: `w-4 h-4 ${star <= Math.round(ratingSummary.averageRating || 0) ? "text-yellow-400 fill-yellow-400" : "text-gray-300 fill-gray-300"}`,
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx8("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+                },
+                star
+              )) }),
+              /* @__PURE__ */ jsxs8("p", { className: "text-sm text-gray-600", children: [
+                "Course Rating \u2022 ",
+                ratingSummary.totalRatings,
+                " ratings"
+              ] })
+            ] })
+          ] }),
+          ratings && ratings.slice(0, 2).map((review) => /* @__PURE__ */ jsxs8("div", { className: "mb-4 p-4 border border-gray-200 rounded-lg", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 mb-2", children: [
+              /* @__PURE__ */ jsx8("div", { className: "w-9 h-9 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold text-sm", children: (review.reviewerName || "U").charAt(0) }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("p", { className: "font-medium text-sm", children: review.reviewerName }),
+                /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-1", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx8(
+                  "svg",
+                  {
+                    className: `w-3 h-3 ${star <= (review.rating || 0) ? "text-yellow-400 fill-yellow-400" : "text-gray-300 fill-gray-300"}`,
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx8("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+                  },
+                  star
+                )) })
+              ] })
+            ] }),
+            review.review && /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-700", children: review.review })
+          ] }, review.id))
+        ] })
+      ] }),
+      activeTab === "curriculum" && /* @__PURE__ */ jsxs8("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: "Curriculum" }),
+        /* @__PURE__ */ jsx8("div", { className: "space-y-1", children: sections.map((section) => {
+          var _a2, _b2;
+          return /* @__PURE__ */ jsxs8("div", { className: "border border-gray-200 rounded overflow-hidden", children: [
+            /* @__PURE__ */ jsxs8(
+              "button",
+              {
+                onClick: () => toggleSection(section.id),
+                className: "w-full flex items-center justify-between p-3 hover:bg-gray-50 transition-colors text-left cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                    expandedSections.has(section.id) ? /* @__PURE__ */ jsx8(ChevronDown2, { className: "h-4 w-4 text-gray-600" }) : /* @__PURE__ */ jsx8(ChevronRight2, { className: "h-4 w-4 text-gray-600" }),
+                    /* @__PURE__ */ jsxs8("div", { children: [
+                      /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium text-gray-900", children: section.title }),
+                      section.description && /* @__PURE__ */ jsx8("p", { className: "text-xs text-gray-500 mt-0.5", children: section.description })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs8("span", { className: "text-xs text-gray-500", children: [
+                    ((_a2 = section.activities) == null ? void 0 : _a2.length) || 0,
+                    " lessons"
+                  ] })
+                ]
+              }
+            ),
+            expandedSections.has(section.id) && /* @__PURE__ */ jsx8("div", { className: "bg-gray-50 border-t border-gray-200", children: (_b2 = section.activities) == null ? void 0 : _b2.map((activity) => {
+              const isSelected = selectedLesson === activity.id;
+              return /* @__PURE__ */ jsxs8(
+                "button",
+                {
+                  onClick: () => setSelectedLesson(activity.id),
+                  className: `w-full flex items-start justify-between gap-3 px-10 py-3 border-b border-gray-100 last:border-b-0 transition-colors text-left cursor-pointer ${isSelected ? "bg-blue-50 border-l-4 border-l-blue-600" : "hover:bg-gray-100"}`,
+                  children: [
+                    /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3 flex-1", children: [
+                      /* @__PURE__ */ jsx8(
+                        PlayCircle,
+                        {
+                          className: `h-4 w-4 flex-shrink-0 mt-0.5 ${isSelected ? "text-blue-600" : "text-gray-400"}`
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8("div", { className: "flex-1", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx8("span", { className: `text-xs font-medium ${isSelected ? "text-blue-600" : "text-gray-700"}`, children: activity.title }),
+                        activity.freePreview && /* @__PURE__ */ jsx8("span", { className: "text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded", children: "Preview" })
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 flex-shrink-0", children: [
+                      activity.downloadable && /* @__PURE__ */ jsx8(Download, { className: "h-3 w-3 text-gray-400" }),
+                      activity.duration && /* @__PURE__ */ jsx8("span", { className: "text-xs text-gray-500", children: typeof activity.duration === "number" ? formatDuration(activity.duration) : activity.duration })
+                    ] })
+                  ]
+                },
+                activity.id
+              );
+            }) })
+          ] }, section.id);
+        }) })
+      ] })
+    ] }),
+    activeTab === "overview" && (relatedCourses.length > 0 || isRelatedLoading) && /* @__PURE__ */ jsx8("div", { className: "mt-8 bg-[#EEF4FA] border-t border-gray-200 pb-8", children: /* @__PURE__ */ jsx8("div", { className: "px-4 lg:px-6", children: /* @__PURE__ */ jsxs8("section", { className: "py-10", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-6", children: [
+        /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-gray-900", children: "Related Courses" }),
+        /* @__PURE__ */ jsx8("button", { className: "text-sm font-medium text-[#49BBBD] hover:underline cursor-pointer", children: "See all" })
+      ] }),
+      isRelatedLoading ? /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx8("div", { className: "rounded-2xl bg-gray-100 animate-pulse h-64" }, i)) }) : /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", children: relatedCourses.map((c) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2;
+        const cIsFree = ((_a2 = c.settings) == null ? void 0 : _a2.pricingType) === "FREE" || !((_b2 = c.settings) == null ? void 0 : _b2.price) && !c.price;
+        const cPrice = (_e2 = (_d2 = (_c2 = c.settings) == null ? void 0 : _c2.price) != null ? _d2 : c.price) != null ? _e2 : 0;
+        const cCurrency = (_h2 = (_g2 = (_f2 = c.settings) == null ? void 0 : _f2.currency) != null ? _g2 : c.currency) != null ? _h2 : "USD";
+        return /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            onClick: () => onRelatedCourseClick(c.id),
+            className: "bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx8("div", { className: "h-40 bg-gray-100 overflow-hidden", children: c.thumbnail && /* @__PURE__ */ jsx8(
+                "img",
+                {
+                  src: c.thumbnail,
+                  alt: c.title,
+                  className: "w-full h-full object-cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs8("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsx8("h3", { className: "font-semibold text-gray-900 text-sm mb-2 line-clamp-2", children: c.title }),
+                /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+                  /* @__PURE__ */ jsxs8("span", { children: [
+                    (_i2 = c.totalLessons) != null ? _i2 : 0,
+                    " lessons"
+                  ] }),
+                  /* @__PURE__ */ jsx8("span", { className: cIsFree ? "text-green-600 font-medium" : "font-semibold text-gray-900", children: cIsFree ? "Free" : formatCoursePrice(cPrice, false, cCurrency) })
+                ] })
+              ] })
+            ]
+          },
+          c.id
+        );
+      }) })
+    ] }) }) })
+  ] });
+}
+
+// src/components/pages/BundleDetailPage.tsx
+import { useState as useState5 } from "react";
+import {
+  Check as Check2,
+  Tag as Tag2,
+  X as X4,
+  FileText as FileText2,
+  Clock as Clock3,
+  Monitor as Monitor2,
+  BookOpen as BookOpen4,
+  ChevronDown as ChevronDown3,
+  ChevronRight as ChevronRight3,
+  Package as Package2
+} from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function formatCoursePrice2(price, isFree, currency = "USD") {
+  if (isFree || price === 0) return "Free";
+  try {
+    return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(price);
+  } catch (e) {
+    return `${currency} ${price.toFixed(2)}`;
+  }
+}
+function BundleDetailPage(props) {
+  var _a, _b, _c, _d;
+  const noop = (..._args) => {
+  };
+  const {
+    bundle,
+    isLoading = false,
+    notFound = false,
+    isEnrolled = false,
+    onEnroll = noop,
+    isProcessingEnrollment = false,
+    paymentProviders = [],
+    onCheckout = noop,
+    isProcessingCheckout = false,
+    couponCode = "",
+    onCouponCodeChange = noop,
+    onApplyCoupon = noop,
+    appliedCoupon = null,
+    couponError = null,
+    onCourseClick = noop
+  } = props;
+  const [expandedCourses, setExpandedCourses] = useState5(/* @__PURE__ */ new Set());
+  const [showCouponInput, setShowCouponInput] = useState5(false);
+  const [imgErrors, setImgErrors] = useState5({});
+  if (isLoading) return /* @__PURE__ */ jsx9(LoadingSpinner, { className: "py-20", text: "Loading bundle..." });
+  if (notFound || !bundle) {
+    return /* @__PURE__ */ jsx9(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx9(Package2, { className: "w-16 h-16" }),
+        title: "Bundle not found",
+        description: "The bundle you're looking for doesn't exist."
+      }
+    );
+  }
+  const b = bundle;
+  const pricingType = b.pricingType || "FREE";
+  const price = (_a = b.price) != null ? _a : 0;
+  const currency = (_b = b.currency) != null ? _b : "USD";
+  const isFree = pricingType === "FREE" || price === 0;
+  const totalCourses = ((_c = b.courses) == null ? void 0 : _c.length) || 0;
+  const creatorName = ((_d = b.creator) == null ? void 0 : _d.name) || "Academy Team";
+  const courses = b.courses || [];
+  const toggleCourse = (courseId) => {
+    const next = new Set(expandedCourses);
+    if (next.has(courseId)) next.delete(courseId);
+    else next.add(courseId);
+    setExpandedCourses(next);
+  };
+  const getButtonText = () => {
+    if (isEnrolled) return "You are enrolled";
+    if (isFree) return "Enroll for free";
+    if (pricingType === "SUBSCRIPTION") return "Subscribe to access";
+    if (pricingType === "INSTALLMENT") return "Make a payment";
+    return "Buy bundle";
+  };
+  const handleEnrollClick = () => {
+    if (isEnrolled) return;
+    if (isFree) {
+      onEnroll();
+      return;
+    }
+    if (paymentProviders.length === 1) {
+      const p = paymentProviders[0];
+      onCheckout(p.paymentProvider || p.id);
+      return;
+    }
+    onEnroll();
+  };
+  const thumbnails = courses.slice(0, 3).map((c) => {
+    var _a2;
+    return c.thumbnail || ((_a2 = c.course) == null ? void 0 : _a2.thumbnail);
+  }).filter(Boolean);
+  const renderEnrollmentCard = () => /* @__PURE__ */ jsxs9("div", { className: "bg-white p-4 rounded-xl shadow-lg border border-gray-100", children: [
+    thumbnails.length > 0 ? /* @__PURE__ */ jsxs9("div", { className: "relative w-full h-48 flex mb-4 rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsx9("div", { className: "relative h-full w-1/2 bg-gray-100", children: /* @__PURE__ */ jsx9(
+        "img",
+        {
+          src: thumbnails[0],
+          alt: "Bundle course 1",
+          className: "w-full h-full object-cover",
+          onError: () => setImgErrors((p) => __spreadProps(__spreadValues({}, p), { t0: true }))
+        }
+      ) }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-col w-1/2 h-full", children: [
+        /* @__PURE__ */ jsx9("div", { className: `relative w-full overflow-hidden bg-gray-100 ${thumbnails.length > 1 ? "h-1/2" : "h-full"}`, children: thumbnails[1] && /* @__PURE__ */ jsx9(
+          "img",
+          {
+            src: thumbnails[1],
+            alt: "Bundle course 2",
+            className: "w-full h-full object-cover",
+            onError: () => setImgErrors((p) => __spreadProps(__spreadValues({}, p), { t1: true }))
+          }
+        ) }),
+        thumbnails.length > 2 && /* @__PURE__ */ jsx9("div", { className: "relative w-full h-1/2 overflow-hidden bg-gray-100", children: /* @__PURE__ */ jsx9(
+          "img",
+          {
+            src: thumbnails[2],
+            alt: "Bundle course 3",
+            className: "w-full h-full object-cover",
+            onError: () => setImgErrors((p) => __spreadProps(__spreadValues({}, p), { t2: true }))
+          }
+        ) })
+      ] })
+    ] }) : /* @__PURE__ */ jsx9("div", { className: "w-full h-48 bg-gray-100 rounded-lg mb-4 flex items-center justify-center", children: /* @__PURE__ */ jsx9(Package2, { className: "w-16 h-16 text-gray-300" }) }),
+    isEnrolled && /* @__PURE__ */ jsxs9("div", { className: "mb-4 flex items-center gap-2 text-green-600", children: [
+      /* @__PURE__ */ jsx9(Check2, { className: "h-5 w-5" }),
+      /* @__PURE__ */ jsx9("span", { className: "font-semibold text-sm", children: "Enrolled in this bundle" })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "text-center mb-4", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "text-2xl font-bold text-gray-900", children: [
+        formatCoursePrice2(price, isFree, currency),
+        pricingType === "SUBSCRIPTION" && /* @__PURE__ */ jsx9("span", { className: "text-lg font-normal text-gray-500", children: " / month" })
+      ] }),
+      !isFree && !isEnrolled && /* @__PURE__ */ jsx9("p", { className: "text-sm text-[#49BBBD] font-medium mt-1", children: "Bundle Deal" })
+    ] }),
+    !isEnrolled && /* @__PURE__ */ jsx9(
+      "button",
+      {
+        onClick: handleEnrollClick,
+        disabled: isProcessingEnrollment || isProcessingCheckout,
+        className: "w-full bg-theme-accent-primary hover:bg-[#3da5a7] text-white font-semibold py-3 px-6 rounded-md transition-colors mb-4 cursor-pointer disabled:opacity-50",
+        children: isProcessingEnrollment || isProcessingCheckout ? "Processing..." : getButtonText()
+      }
+    ),
+    !isEnrolled && !isFree && paymentProviders.length > 1 && paymentProviders.map((provider) => /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        onClick: () => onCheckout(provider.paymentProvider || provider.id),
+        disabled: isProcessingCheckout,
+        className: "w-full bg-theme-accent-primary hover:bg-[#3da5a7] text-white font-semibold py-3 px-6 rounded-md transition-colors mb-2 cursor-pointer disabled:opacity-50",
+        children: [
+          "Pay with ",
+          provider.paymentProvider
+        ]
+      },
+      provider.paymentProvider || provider.id
+    )),
+    !isFree && !isEnrolled && /* @__PURE__ */ jsx9("div", { className: "mb-6", children: appliedCoupon ? /* @__PURE__ */ jsx9("div", { className: "p-3 bg-theme-accent-primary/10 border border-[#49BBBD]/20 rounded-lg", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx9(Tag2, { className: "h-4 w-4 text-[#49BBBD]" }),
+        /* @__PURE__ */ jsxs9("span", { className: "text-sm font-medium text-[#49BBBD]", children: [
+          'Coupon "',
+          appliedCoupon.code,
+          '" applied'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          onClick: () => onCouponCodeChange(""),
+          className: "text-[#49BBBD] hover:text-[#3da5a7] transition-colors cursor-pointer",
+          children: /* @__PURE__ */ jsx9(X4, { className: "h-4 w-4" })
+        }
+      )
+    ] }) }) : showCouponInput ? /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            type: "text",
+            placeholder: "Enter coupon code",
+            value: couponCode,
+            onChange: (e) => onCouponCodeChange(e.target.value.toUpperCase()),
+            className: `flex-1 text-sm border rounded-md px-3 py-2 focus:outline-none focus:border-[#49BBBD] ${couponError ? "border-red-500" : "border-gray-300"}`
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: onApplyCoupon,
+            disabled: !couponCode,
+            className: "px-3 py-2 text-sm bg-theme-accent-primary text-white rounded-md hover:bg-[#3da5a7] disabled:opacity-50 cursor-pointer",
+            children: "Apply"
+          }
+        )
+      ] }),
+      couponError && /* @__PURE__ */ jsx9("p", { className: "text-xs text-red-600", children: couponError })
+    ] }) : /* @__PURE__ */ jsx9(
+      "a",
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          setShowCouponInput(true);
+        },
+        className: "block text-center text-sm font-medium text-[#49BBBD] hover:text-[#3da5a7] hover:underline cursor-pointer",
+        children: "Apply Coupon"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs9("div", { className: "border-t border-gray-200 pt-4", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "font-semibold text-gray-900 mb-3 text-sm", children: "This bundle included" }),
+      /* @__PURE__ */ jsxs9("div", { className: "space-y-2.5", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5 text-gray-700", children: [
+          /* @__PURE__ */ jsx9("div", { className: "w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx9(FileText2, { className: "h-2.5 w-2.5 text-white" }) }),
+          /* @__PURE__ */ jsxs9("span", { className: "text-sm", children: [
+            totalCourses,
+            " courses"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5 text-gray-700", children: [
+          /* @__PURE__ */ jsx9("div", { className: "w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx9(Clock3, { className: "h-2.5 w-2.5 text-white" }) }),
+          /* @__PURE__ */ jsx9("span", { className: "text-sm", children: "Self-paced learning" })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5 text-gray-700", children: [
+          /* @__PURE__ */ jsx9("div", { className: "w-4 h-4 rounded-full bg-theme-accent-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx9(Monitor2, { className: "h-2.5 w-2.5 text-white" }) }),
+          /* @__PURE__ */ jsx9("span", { className: "text-sm", children: "Access on mobile and desktop" })
+        ] })
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs9("div", { className: "-mx-4 sm:-mx-4 md:-mx-4 lg:-mx-6 xl:-mx-6", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "relative bg-[#1a2332] text-white px-4 lg:px-8 py-8 lg:py-12 mb-8", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "max-w-7xl lg:pr-110", children: [
+        /* @__PURE__ */ jsx9("h1", { className: "text-3xl lg:text-4xl font-bold mb-2", children: b.title }),
+        b.description && /* @__PURE__ */ jsx9("p", { className: "text-base lg:text-lg text-gray-300 mb-4 leading-relaxed", children: b.description }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 mt-4 lg:mt-6 mb-6 lg:mb-0", children: [
+          /* @__PURE__ */ jsx9("div", { className: "w-10 h-10 rounded-full bg-theme-accent-primary flex items-center justify-center text-white font-semibold", children: creatorName.charAt(0).toUpperCase() }),
+          /* @__PURE__ */ jsx9("span", { className: "text-sm", children: creatorName })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "lg:hidden mt-6", children: renderEnrollmentCard() }),
+      /* @__PURE__ */ jsx9("div", { className: "hidden lg:block absolute right-30 top-15 w-80 z-10", children: renderEnrollmentCard() })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "px-4 lg:px-6", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "lg:pr-110 pr-4 mb-8 pb-8 border-b border-gray-300", children: [
+        /* @__PURE__ */ jsx9("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: "About This Bundle" }),
+        /* @__PURE__ */ jsx9("div", { className: "text-gray-700 text-sm leading-relaxed", children: b.description || "This comprehensive bundle includes multiple courses designed to help you master your learning goals." })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "mb-8", children: [
+        /* @__PURE__ */ jsxs9("h2", { className: "text-xl font-bold text-gray-900 mb-4", children: [
+          "Included Courses",
+          totalCourses > 0 ? ` (${totalCourses})` : ""
+        ] }),
+        courses.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "text-center py-8 text-gray-500", children: "No courses included in this bundle yet." }) : /* @__PURE__ */ jsx9("div", { className: "space-y-1 lg:max-w-[70%] md:max-w-[100%]", children: courses.sort((a, b2) => {
+          var _a2, _b2;
+          return ((_a2 = a.orderIndex) != null ? _a2 : 0) - ((_b2 = b2.orderIndex) != null ? _b2 : 0);
+        }).map((bundleCourse, index) => {
+          const course = bundleCourse.course || bundleCourse;
+          const courseId = bundleCourse.courseId || bundleCourse.id || course.id;
+          const courseThumbnail = course.thumbnail || bundleCourse.thumbnail;
+          const isExpanded = expandedCourses.has(courseId);
+          const isCompleted = bundleCourse.isCompleted;
+          return /* @__PURE__ */ jsxs9("div", { className: "border border-gray-200 rounded overflow-hidden", children: [
+            /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                onClick: () => toggleCourse(courseId),
+                className: "w-full flex items-center justify-between p-3 hover:bg-gray-50 transition-colors text-left cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+                    isExpanded ? /* @__PURE__ */ jsx9(ChevronDown3, { className: "h-4 w-4 text-gray-600 flex-shrink-0" }) : /* @__PURE__ */ jsx9(ChevronRight3, { className: "h-4 w-4 text-gray-600 flex-shrink-0" }),
+                    /* @__PURE__ */ jsx9("div", { className: "w-8 h-8 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center font-bold text-sm flex-shrink-0", children: index + 1 }),
+                    courseThumbnail && !imgErrors[`c-${courseId}`] && /* @__PURE__ */ jsx9(
+                      "img",
+                      {
+                        src: courseThumbnail,
+                        alt: course.title,
+                        className: "w-12 h-8 object-cover rounded flex-shrink-0",
+                        onError: () => setImgErrors((p) => __spreadProps(__spreadValues({}, p), { [`c-${courseId}`]: true }))
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium text-gray-900 truncate block", children: course.title || bundleCourse.title || "Course" }),
+                      course.summary && /* @__PURE__ */ jsx9("p", { className: "text-xs text-gray-500 truncate", children: course.summary })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2 flex-shrink-0 ml-2", children: isCompleted && /* @__PURE__ */ jsx9(Check2, { className: "h-4 w-4 text-green-600" }) })
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsxs9("div", { className: "px-4 py-3 bg-gray-50 border-t border-gray-200", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-4 text-xs text-gray-500 mb-3", children: [
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx9(BookOpen4, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsxs9("span", { children: [
+                    "Course ",
+                    index + 1
+                  ] })
+                ] }),
+                course.status && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx9("div", { className: `w-2 h-2 rounded-full ${course.status === "PUBLISHED" ? "bg-green-500" : "bg-gray-400"}` }),
+                  /* @__PURE__ */ jsx9("span", { className: "capitalize", children: course.status.toLowerCase() })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  onClick: () => onCourseClick(courseId, bundleCourse.enrollmentId),
+                  className: "text-sm font-medium text-[#49BBBD] hover:text-[#3da5a7] hover:underline cursor-pointer",
+                  children: isEnrolled ? "Go to course \u2192" : "View course \u2192"
+                }
+              )
+            ] })
+          ] }, courseId);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/pages/CoursePlayerPage.tsx
+import { useState as useState7, useMemo as useMemo2 } from "react";
+import {
+  ChevronLeft as ChevronLeft2,
+  ChevronRight as ChevronRight5,
+  FileText as FileText3,
+  StickyNote,
+  Bookmark,
+  FileAudio,
+  FolderOpen,
+  HelpCircle,
+  List,
+  X as X6,
+  Clock3 as Clock32,
+  CheckCircle2 as CheckCircle22,
+  PlayCircle as PlayCircle2,
+  Lock as Lock2
+} from "lucide-react";
+
+// src/components/organisms/CourseSidebar.tsx
+import { useState as useState6, useMemo } from "react";
+import { ArrowLeft, Search as Search4, X as X5, Lock, ClipboardList, Award, Check as Check3, ChevronRight as ChevronRight4 } from "lucide-react";
+
+// src/components/atoms/Button.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-theme-accent-primary text-white hover:opacity-90",
+        destructive: "bg-red-600 text-white hover:bg-red-700",
+        outline: "border border-theme-border-primary bg-theme-bg-secondary hover:bg-theme-bg-tertiary text-theme-text-primary",
+        secondary: "bg-theme-bg-tertiary text-theme-text-primary hover:opacity-80",
+        ghost: "hover:bg-theme-bg-tertiary text-theme-text-primary",
+        link: "text-[rgb(var(--accent-primary))] underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
+    return /* @__PURE__ */ jsx10(
+      "button",
+      __spreadValues({
+        className: cn(buttonVariants({ variant, size, className })),
+        ref
+      }, props)
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/atoms/ProgressBar.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-3.5"
+};
+var variantClasses = {
+  default: "bg-theme-accent-primary",
+  success: "bg-green-600",
+  warning: "bg-yellow-500",
+  error: "bg-red-600"
+};
+function ProgressBar(_a) {
+  var _b = _a, {
+    value,
+    max = 100,
+    showLabel = false,
+    size = "md",
+    variant = "default",
+    className
+  } = _b, props = __objRest(_b, [
+    "value",
+    "max",
+    "showLabel",
+    "size",
+    "variant",
+    "className"
+  ]);
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ jsxs10("div", __spreadProps(__spreadValues({ className: cn("w-full", className) }, props), { children: [
+    showLabel && /* @__PURE__ */ jsxs10("div", { className: "mb-1 flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsx11("span", { className: "text-theme-text-secondary", children: "Progress" }),
+      /* @__PURE__ */ jsxs10("span", { className: "font-medium text-theme-text-primary", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: cn("w-full overflow-hidden rounded-full bg-theme-bg-tertiary", sizeClasses2[size]), children: /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: cn("h-full transition-all duration-300 ease-in-out", variantClasses[variant]),
+        style: { width: `${percentage}%` }
+      }
+    ) })
+  ] }));
+}
+
+// src/components/organisms/CourseSidebar.tsx
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var lessonColors = [
+  "bg-[#E2F0FF] border-l-4 border-[#3aa3a5]",
+  "bg-[#fcddb5] border-l-4 border-[#d67a05]",
+  "bg-[#FAD1CE] border-l-4 border-[#7ab3f0]"
+];
+function CourseSidebar({
+  courseTitle,
+  modules,
+  currentLessonId,
+  expandedModules,
+  completedCount,
+  totalCount,
+  onToggleModule,
+  onSelectLesson,
+  hideProgress = false,
+  hideSearch = false,
+  certificateEnabled = false,
+  isCompleted = false,
+  onDownloadCertificate,
+  isDownloadingCertificate = false,
+  onBack,
+  showBackButton = true,
+  className
+}) {
+  const [searchQuery, setSearchQuery] = useState6("");
+  const filteredModules = useMemo(() => {
+    if (!searchQuery.trim()) return modules;
+    const query = searchQuery.toLowerCase();
+    return modules.map((mod) => __spreadProps(__spreadValues({}, mod), {
+      lessons: mod.lessons.filter((l) => l.title.toLowerCase().includes(query))
+    })).filter((mod) => mod.lessons.length > 0);
+  }, [modules, searchQuery]);
+  const totalResults = filteredModules.reduce((sum, m) => sum + m.lessons.length, 0);
+  const progressPct = totalCount > 0 ? completedCount / totalCount * 100 : 0;
+  const formatDuration2 = (duration) => {
+    if (!duration) return "";
+    const text = duration.trim();
+    if (!text) return "";
+    if (/[a-zA-Z]/.test(text)) return text;
+    const parts = text.split(":").map(Number);
+    if (parts.some(isNaN)) return text;
+    if (parts.length === 3) {
+      const [hrs, mins] = parts;
+      if (hrs > 0 && mins > 0) return `${hrs} ${hrs === 1 ? "hour" : "hours"} ${mins} min`;
+      if (hrs > 0) return `${hrs} ${hrs === 1 ? "hour" : "hours"}`;
+      return `${mins} min`;
+    }
+    if (parts.length === 2) {
+      const [mins, secs] = parts;
+      return `${mins > 0 ? mins : secs > 0 ? 1 : 0} min`;
+    }
+    return `${Math.max(1, Math.round(parts[0] / 60))} min`;
+  };
+  let globalLessonIndex = 0;
+  return /* @__PURE__ */ jsxs11("div", { className: cn("w-full lg:w-[350px] bg-white flex-shrink-0 flex flex-col border-r border-gray-100 lg:h-screen lg:sticky lg:top-0 overflow-y-auto", className), children: [
+    /* @__PURE__ */ jsxs11("div", { className: "p-6", children: [
+      showBackButton && onBack && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          onClick: onBack,
+          className: "w-10 h-10 bg-[#4ecdc4] rounded-md flex items-center justify-center text-white hover:bg-[#3dbdb4] transition-colors mb-6 cursor-pointer",
+          "aria-label": "Go back",
+          children: /* @__PURE__ */ jsx12(ArrowLeft, { className: "w-5 h-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx12("h3", { className: "text-3xl font-semibold text-[#1f2937] leading-tight", children: courseTitle ? `${courseTitle.charAt(0).toUpperCase()}${courseTitle.slice(1)}` : "" }),
+      !hideProgress && /* @__PURE__ */ jsxs11("div", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx12(ProgressBar, { value: progressPct, size: "sm" }),
+        /* @__PURE__ */ jsxs11("p", { className: "text-xs text-gray-400 mt-1 text-right", children: [
+          completedCount,
+          " / ",
+          totalCount,
+          " lessons \xB7 ",
+          Math.round(progressPct),
+          "%"
+        ] })
+      ] }),
+      certificateEnabled && isCompleted && onDownloadCertificate && completedCount === totalCount && totalCount > 0 && /* @__PURE__ */ jsxs11(
+        Button,
+        {
+          onClick: onDownloadCertificate,
+          disabled: isDownloadingCertificate,
+          className: "w-full mt-3 bg-green-600 hover:bg-green-700 disabled:opacity-50 text-white",
+          children: [
+            /* @__PURE__ */ jsx12(Award, { className: "w-4 h-4 mr-2" }),
+            isDownloadingCertificate ? "Downloading..." : "Download Certificate"
+          ]
+        }
+      ),
+      !hideSearch && /* @__PURE__ */ jsxs11("div", { className: "mt-3 relative", children: [
+        /* @__PURE__ */ jsx12(Search4, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" }),
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search lessons...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "w-full pl-9 pr-9 py-2 text-sm bg-gray-50 border border-gray-200 text-gray-700 placeholder:text-gray-400 rounded-lg focus:outline-none focus:border-[#49BBBD] transition-colors"
+          }
+        ),
+        searchQuery && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              onClick: () => setSearchQuery(""),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 cursor-pointer",
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx12(X5, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs11("p", { className: "text-xs text-gray-400 mt-1", children: [
+            totalResults,
+            " ",
+            totalResults === 1 ? "lesson" : "lessons",
+            " found"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "flex-1 px-4 space-y-8 pb-10", children: filteredModules.length === 0 ? /* @__PURE__ */ jsxs11("div", { className: "text-center py-8", children: [
+      /* @__PURE__ */ jsx12(Search4, { className: "w-10 h-10 text-gray-300 mx-auto mb-2" }),
+      /* @__PURE__ */ jsxs11("p", { className: "text-sm text-gray-400", children: [
+        "No lessons found for \u201C",
+        searchQuery,
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsx12("button", { onClick: () => setSearchQuery(""), className: "mt-2 text-sm text-[#49BBBD] hover:underline font-medium cursor-pointer", children: "Clear search" })
+    ] }) : filteredModules.map((module) => {
+      const isExpanded = expandedModules.has(module.id) || !!searchQuery.trim();
+      return /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleModule(module.id),
+            "aria-expanded": isExpanded,
+            className: "w-full flex items-center justify-between text-left mb-3 px-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx12("h3", { className: "text-sm font-bold text-gray-500 uppercase tracking-wider", children: module.title }),
+              /* @__PURE__ */ jsx12(ChevronRight4, { className: cn("w-4 h-4 transition-transform", isExpanded ? "rotate-90 text-[#49BBBD]" : "text-gray-400") })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: module.lessons.map((lesson) => {
+          const isCurrent = currentLessonId === lesson.id;
+          const isLocked = lesson.locked === true;
+          const colorClass = lessonColors[globalLessonIndex % lessonColors.length];
+          globalLessonIndex++;
+          let availabilityText = "";
+          if (isLocked) {
+            if (lesson.availableAt) {
+              const diffDays = Math.ceil((new Date(lesson.availableAt).getTime() - Date.now()) / 864e5);
+              availabilityText = diffDays > 0 ? `Available in ${diffDays}d` : `Available on ${new Date(lesson.availableAt).toLocaleDateString()}`;
+            } else if (lesson.hasPrerequisite) {
+              availabilityText = "Complete previous lesson";
+            }
+          }
+          return /* @__PURE__ */ jsxs11(
+            "button",
+            {
+              title: lesson.title,
+              onClick: () => !isLocked && onSelectLesson(lesson.id),
+              disabled: isLocked,
+              className: cn(
+                "w-full text-left p-4 rounded-lg flex items-center justify-between transition-transform",
+                isLocked ? "opacity-50 cursor-not-allowed" : "hover:scale-[1.02] active:scale-[0.98] cursor-pointer",
+                isCurrent ? "bg-[#49BBBD] text-white shadow-md ring-2 ring-[#2a9ea0]/40" : colorClass
+              ),
+              children: [
+                /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+                  lesson.completed ? /* @__PURE__ */ jsx12("div", { className: "w-5 h-5 rounded-full border-2 bg-green-500 border-green-500 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx12(Check3, { className: "w-3 h-3 text-white" }) }) : isLocked ? /* @__PURE__ */ jsx12("div", { className: "w-5 h-5 rounded-full border-2 border-gray-400 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx12(Lock, { className: "w-2.5 h-2.5 text-gray-500" }) }) : /* @__PURE__ */ jsx12("div", { className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0", isCurrent ? "border-white/60" : "border-gray-400"), children: /* @__PURE__ */ jsx12("div", { className: cn("w-2.5 h-2.5 rounded-sm", isCurrent ? "bg-white/80" : "bg-[#1f2a44]") }) }),
+                  /* @__PURE__ */ jsxs11("div", { className: "overflow-hidden", children: [
+                    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5", children: [
+                      lesson.type === "ASSESSMENT" ? /* @__PURE__ */ jsx12(ClipboardList, { className: cn("w-3.5 h-3.5 flex-shrink-0", isCurrent ? "text-white" : "text-gray-600") }) : null,
+                      /* @__PURE__ */ jsx12("span", { className: cn("text-sm font-medium truncate", isCurrent ? "text-white" : "text-gray-800"), children: lesson.title })
+                    ] }),
+                    isLocked && availabilityText && /* @__PURE__ */ jsx12("p", { className: "text-xs text-gray-600 mt-0.5 truncate", children: availabilityText })
+                  ] })
+                ] }),
+                lesson.type === "ASSESSMENT" ? /* @__PURE__ */ jsx12("span", { className: cn("text-xs font-semibold flex-shrink-0 ml-2", isCurrent ? "text-white/90" : "text-gray-600"), children: "Quiz" }) : lesson.duration ? /* @__PURE__ */ jsx12("span", { className: cn("text-xs font-semibold flex-shrink-0 ml-2", isCurrent ? "text-white/90" : "text-gray-600"), children: formatDuration2(lesson.duration) }) : null
+              ]
+            },
+            lesson.id
+          );
+        }) })
+      ] }, module.id);
+    }) })
+  ] });
+}
+
+// src/components/pages/CoursePlayerPage.tsx
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function formatHeaderDuration(duration) {
+  if (!duration) return "";
+  const text = duration.trim();
+  if (!text) return "";
+  if (/[a-zA-Z]/.test(text)) return text;
+  const parts = text.split(":").map(Number);
+  if (parts.some(isNaN)) return text;
+  if (parts.length === 3) {
+    const [h, m] = parts;
+    if (h > 0 && m > 0) return `${h} ${h === 1 ? "hour" : "hours"} ${m} min`;
+    if (h > 0) return `${h} ${h === 1 ? "hour" : "hours"}`;
+    return `${m} min`;
+  }
+  if (parts.length === 2) {
+    const [m, s2] = parts;
+    return `${m > 0 ? m : s2 > 0 ? 1 : 0} min`;
+  }
+  const s = parts[0];
+  return `${s > 0 ? Math.max(1, Math.round(s / 60)) : 0} min`;
+}
+function CoursePlayerPage(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const {
+    course,
+    isLoading = false,
+    courseNotFound = false,
+    onBack,
+    onNavigateToLesson
+  } = props;
+  const allLessons = useMemo2(
+    () => {
+      var _a2;
+      return ((_a2 = course == null ? void 0 : course.modules) != null ? _a2 : []).flatMap((m) => m.lessons);
+    },
+    [course]
+  );
+  const [currentLessonIdx, setCurrentLessonIdx] = useState7(0);
+  const [expandedModules, setExpandedModules] = useState7(
+    () => {
+      var _a2, _b2;
+      return new Set(((_b2 = (_a2 = course == null ? void 0 : course.modules) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) ? [course.modules[0].id] : []);
+    }
+  );
+  const [activeTab, setActiveTab] = useState7("overview");
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState7(false);
+  const currentLesson = (_a = allLessons[currentLessonIdx]) != null ? _a : null;
+  const completedCount = allLessons.filter((l) => l.completed).length;
+  const totalCount = allLessons.length;
+  const goToLesson = (lessonId) => {
+    const idx = allLessons.findIndex((l) => l.id === lessonId);
+    if (idx === -1) return;
+    const lesson = allLessons[idx];
+    if (lesson == null ? void 0 : lesson.locked) return;
+    setCurrentLessonIdx(idx);
+    setIsMobileSidebarOpen(false);
+    onNavigateToLesson == null ? void 0 : onNavigateToLesson(lessonId);
+  };
+  const goPrev = () => {
+    if (currentLessonIdx > 0) {
+      setCurrentLessonIdx((i) => i - 1);
+      onNavigateToLesson == null ? void 0 : onNavigateToLesson(allLessons[currentLessonIdx - 1].id);
+    }
+  };
+  const goNext = () => {
+    if (currentLessonIdx < allLessons.length - 1) {
+      setCurrentLessonIdx((i) => i + 1);
+      onNavigateToLesson == null ? void 0 : onNavigateToLesson(allLessons[currentLessonIdx + 1].id);
+    }
+  };
+  const toggleModule = (id) => {
+    setExpandedModules((prev) => {
+      const s = new Set(prev);
+      s.has(id) ? s.delete(id) : s.add(id);
+      return s;
+    });
+  };
+  if (isLoading) return /* @__PURE__ */ jsx13(LoadingSpinner, { className: "py-20", text: "Loading course..." });
+  if (courseNotFound || !course) {
+    return /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs12("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ jsx13("div", { className: "text-6xl", children: "\u{1F4DA}" }),
+      /* @__PURE__ */ jsx13("h1", { className: "text-3xl font-bold text-theme-text-primary", children: "Course Not Found" }),
+      /* @__PURE__ */ jsx13("p", { className: "text-theme-text-secondary max-w-md mx-auto", children: "The course you're looking for doesn't exist or has been removed." }),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          onClick: onBack != null ? onBack : () => window.history.back(),
+          className: "mt-4 px-6 py-2.5 rounded-lg bg-theme-accent-primary text-white font-medium hover:opacity-90 transition-opacity cursor-pointer",
+          children: "Go Back"
+        }
+      )
+    ] }) });
+  }
+  const sidebarProps = {
+    courseTitle: course.title,
+    modules: course.modules,
+    currentLessonId: (_b = currentLesson == null ? void 0 : currentLesson.id) != null ? _b : "",
+    expandedModules,
+    completedCount,
+    totalCount,
+    onToggleModule: toggleModule,
+    onSelectLesson: goToLesson,
+    onBack: onBack != null ? onBack : () => window.history.back()
+  };
+  const tabs = [
+    { id: "overview", label: "Overview", icon: /* @__PURE__ */ jsx13(FileText3, { className: "w-4 h-4" }) },
+    { id: "notes", label: "Notes", icon: /* @__PURE__ */ jsx13(StickyNote, { className: "w-4 h-4" }) },
+    { id: "bookmarks", label: "Bookmarks", icon: /* @__PURE__ */ jsx13(Bookmark, { className: "w-4 h-4" }) },
+    { id: "transcript", label: "Transcript", icon: /* @__PURE__ */ jsx13(FileAudio, { className: "w-4 h-4" }) },
+    { id: "resources", label: "Resources", icon: /* @__PURE__ */ jsx13(FolderOpen, { className: "w-4 h-4" }) },
+    { id: "faq", label: "FAQ", icon: /* @__PURE__ */ jsx13(HelpCircle, { className: "w-4 h-4" }) }
+  ];
+  const videoUrl = (_c = currentLesson == null ? void 0 : currentLesson.videoUrl) != null ? _c : "";
+  const videoProvider = (_d = currentLesson == null ? void 0 : currentLesson.videoProvider) != null ? _d : "YOUTUBE";
+  const getEmbedSrc = () => {
+    if (!videoUrl) return null;
+    if (videoProvider === "YOUTUBE") return `https://www.youtube.com/embed/${videoUrl}?rel=0`;
+    if (videoProvider === "VIMEO") return `https://player.vimeo.com/video/${videoUrl}`;
+    if (videoProvider === "LOOM") return `https://www.loom.com/embed/${videoUrl}`;
+    return videoUrl;
+  };
+  const embedSrc = getEmbedSrc();
+  const lessonLocked = (_e = currentLesson == null ? void 0 : currentLesson.locked) != null ? _e : false;
+  const lessonType = currentLesson == null ? void 0 : currentLesson.type;
+  const duration = formatHeaderDuration(currentLesson == null ? void 0 : currentLesson.duration);
+  const summary = (_g = (_f = currentLesson == null ? void 0 : currentLesson.summary) != null ? _f : course.description) != null ? _g : "";
+  const learningObjectives = (_h = course.learningObjectives) != null ? _h : [];
+  const faqs = (_j = (_i = currentLesson == null ? void 0 : currentLesson.settings) == null ? void 0 : _i.faqs) != null ? _j : [];
+  const secondaryResources = (_k = currentLesson == null ? void 0 : currentLesson.secondaryResources) != null ? _k : [];
+  return /* @__PURE__ */ jsxs12("div", { className: "min-h-screen bg-[#f7f9fc] flex lg:flex-row lg:-mx-6", children: [
+    /* @__PURE__ */ jsx13("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx13(CourseSidebar, __spreadValues({}, sidebarProps)) }),
+    isMobileSidebarOpen && /* @__PURE__ */ jsxs12("div", { className: "lg:hidden fixed inset-0 z-50", children: [
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          onClick: () => setIsMobileSidebarOpen(false),
+          className: "absolute inset-0 bg-black/40 cursor-pointer",
+          "aria-label": "Close lessons drawer"
+        }
+      ),
+      /* @__PURE__ */ jsxs12("div", { className: "relative h-full w-[88vw] max-w-[360px] bg-white shadow-xl overflow-y-auto", children: [
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: () => setIsMobileSidebarOpen(false),
+            className: "absolute top-3 right-3 z-10 w-9 h-9 rounded-full bg-white/90 border border-gray-200 text-gray-700 flex items-center justify-center cursor-pointer",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx13(X6, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx13(CourseSidebar, __spreadProps(__spreadValues({}, sidebarProps), { onSelectLesson: (id) => {
+          goToLesson(id);
+          setIsMobileSidebarOpen(false);
+        } }))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col min-w-0 bg-[#dce8f5]", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "lg:hidden sticky top-0 z-20 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            onClick: () => setIsMobileSidebarOpen(true),
+            className: "inline-flex items-center gap-2 px-3 py-2 rounded-md bg-theme-accent-primary text-white text-sm font-medium cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx13(List, { className: "w-4 h-4" }),
+              "Lessons"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs12("span", { className: "text-xs text-gray-600 font-medium", children: [
+          "Lesson ",
+          currentLessonIdx + 1,
+          " / ",
+          allLessons.length
+        ] })
+      ] }),
+      lessonLocked ? /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center min-h-[70vh] p-4", children: /* @__PURE__ */ jsxs12("div", { className: "max-w-lg w-full bg-white rounded-2xl border border-gray-200 p-12 text-center space-y-6", children: [
+        /* @__PURE__ */ jsx13("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx13(Lock2, { className: "w-16 h-16 text-orange-500" }) }),
+        /* @__PURE__ */ jsx13("h1", { className: "text-2xl font-bold text-theme-text-primary", children: "Lesson Locked" }),
+        /* @__PURE__ */ jsx13("p", { className: "text-theme-text-secondary", children: "Complete the previous lesson to unlock this content." }),
+        /* @__PURE__ */ jsx13("p", { className: "text-lg font-semibold text-theme-text-primary", children: currentLesson == null ? void 0 : currentLesson.title })
+      ] }) }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsx13("div", { className: "bg-theme-accent-primary px-4 sm:px-6 lg:px-8 py-4 sm:py-6 text-white", children: /* @__PURE__ */ jsx13("div", { className: "flex items-start", children: /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx13("h2", { className: "text-2xl lg:text-3xl font-bold", children: (currentLesson == null ? void 0 : currentLesson.title) ? `${currentLesson.title.charAt(0).toUpperCase()}${currentLesson.title.slice(1)}` : "Select a lesson" }),
+          /* @__PURE__ */ jsxs12("div", { className: "mt-1 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx13("p", { className: "text-white/90 text-sm lg:text-base opacity-90 line-clamp-1 flex-1 min-w-0", children: summary }),
+            duration && /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1.5 whitespace-nowrap text-white/90 text-sm lg:text-base shrink-0", children: [
+              /* @__PURE__ */ jsx13(Clock32, { className: "w-4 h-4" }),
+              duration
+            ] })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxs12("div", { className: "p-4 lg:p-8 space-y-6 lg:space-y-8 max-w-5xl w-full", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "bg-white rounded-2xl shadow-sm", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "relative group", children: [
+              /* @__PURE__ */ jsx13("div", { className: "overflow-hidden rounded-t-2xl", children: embedSrc ? /* @__PURE__ */ jsx13("div", { className: "relative w-full", style: { paddingBottom: "56.25%" }, children: /* @__PURE__ */ jsx13(
+                "iframe",
+                {
+                  src: embedSrc,
+                  className: "absolute inset-0 w-full h-full",
+                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                  allowFullScreen: true,
+                  title: (_l = currentLesson == null ? void 0 : currentLesson.title) != null ? _l : "Lesson video"
+                }
+              ) }) : /* @__PURE__ */ jsx13("div", { className: "relative w-full bg-gray-900 flex items-center justify-center", style: { paddingBottom: "56.25%" }, children: /* @__PURE__ */ jsxs12("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 text-white/60", children: [
+                /* @__PURE__ */ jsx13(PlayCircle2, { className: "w-16 h-16 opacity-40" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-sm", children: "No video available for this lesson" })
+              ] }) }) }),
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  onClick: goPrev,
+                  disabled: currentLessonIdx === 0,
+                  className: "hidden md:flex absolute -left-5 top-1/2 -translate-y-1/2 z-10 w-10 h-10 items-center justify-center rounded-full bg-[#F48C06] text-white opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed",
+                  title: "Previous lesson",
+                  children: /* @__PURE__ */ jsx13(ChevronLeft2, { className: "w-5 h-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  onClick: goNext,
+                  disabled: currentLessonIdx >= allLessons.length - 1,
+                  className: "hidden md:flex absolute -right-5 top-1/2 -translate-y-1/2 z-10 w-10 h-10 items-center justify-center rounded-full bg-[#F48C06] text-white opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed",
+                  title: "Next lesson",
+                  children: /* @__PURE__ */ jsx13(ChevronRight5, { className: "w-5 h-5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs12("div", { className: "px-4 sm:px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-100", children: [
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
+                (currentLesson == null ? void 0 : currentLesson.completed) && /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1 text-xs text-green-600 font-medium", children: [
+                  /* @__PURE__ */ jsx13(CheckCircle22, { className: "w-4 h-4" }),
+                  " Completed"
+                ] }),
+                /* @__PURE__ */ jsxs12("span", { className: "text-sm text-gray-500", children: [
+                  "Lesson ",
+                  currentLessonIdx + 1,
+                  " of ",
+                  allLessons.length
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs12(
+                  "button",
+                  {
+                    onClick: goPrev,
+                    disabled: currentLessonIdx === 0,
+                    className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ jsx13(ChevronLeft2, { className: "w-4 h-4" }),
+                      " Prev"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs12(
+                  "button",
+                  {
+                    onClick: goNext,
+                    disabled: currentLessonIdx >= allLessons.length - 1,
+                    className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-theme-accent-primary text-white text-sm hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer",
+                    children: [
+                      "Next ",
+                      /* @__PURE__ */ jsx13(ChevronRight5, { className: "w-4 h-4" })
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs12("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden", children: [
+            /* @__PURE__ */ jsx13("div", { className: "flex overflow-x-auto border-b border-gray-200 scrollbar-hide", children: tabs.map((tab) => /* @__PURE__ */ jsxs12(
+              "button",
+              {
+                onClick: () => setActiveTab(tab.id),
+                className: `flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors cursor-pointer ${activeTab === tab.id ? "border-theme-accent-primary text-theme-accent-primary" : "border-transparent text-gray-500 hover:text-gray-700"}`,
+                children: [
+                  tab.icon,
+                  tab.label
+                ]
+              },
+              tab.id
+            )) }),
+            /* @__PURE__ */ jsxs12("div", { className: "px-6 py-6", style: { minHeight: 480 }, children: [
+              activeTab === "overview" && /* @__PURE__ */ jsxs12("div", { className: "space-y-6", children: [
+                /* @__PURE__ */ jsxs12("div", { children: [
+                  /* @__PURE__ */ jsx13("h3", { className: "text-base font-semibold text-gray-900 mb-2", children: "About This Lesson" }),
+                  summary ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-gray-700 leading-relaxed", children: summary }) : /* @__PURE__ */ jsx13("p", { className: "text-sm text-gray-400 italic", children: "No description available." })
+                ] }),
+                learningObjectives.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
+                  /* @__PURE__ */ jsx13("h3", { className: "text-base font-semibold text-gray-900 mb-3", children: "What You'll Learn" }),
+                  /* @__PURE__ */ jsx13("ul", { className: "space-y-2", children: learningObjectives.map((obj, i) => /* @__PURE__ */ jsxs12("li", { className: "flex items-start gap-2.5 text-sm text-gray-700", children: [
+                    /* @__PURE__ */ jsx13(CheckCircle22, { className: "w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" }),
+                    obj
+                  ] }, i)) })
+                ] })
+              ] }),
+              activeTab === "notes" && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [
+                /* @__PURE__ */ jsx13(StickyNote, { className: "w-12 h-12 text-gray-300" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-gray-500", children: "Your notes will appear here" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-400", children: "Take notes while watching to revisit key points later." })
+              ] }),
+              activeTab === "bookmarks" && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [
+                /* @__PURE__ */ jsx13(Bookmark, { className: "w-12 h-12 text-gray-300" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-gray-500", children: "No bookmarks yet" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-400", children: "Bookmark key moments in the video to revisit them." })
+              ] }),
+              activeTab === "transcript" && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [
+                /* @__PURE__ */ jsx13(FileAudio, { className: "w-12 h-12 text-gray-300" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-gray-500", children: "Transcript not available" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-400", children: "The transcript for this lesson has not been generated yet." })
+              ] }),
+              activeTab === "resources" && /* @__PURE__ */ jsx13("div", { children: secondaryResources.length > 0 ? /* @__PURE__ */ jsx13("div", { className: "space-y-3", children: secondaryResources.map((res, i) => {
+                var _a2, _b2, _c2, _d2, _e2;
+                return /* @__PURE__ */ jsxs12(
+                  "a",
+                  {
+                    href: (_c2 = (_b2 = res.url) != null ? _b2 : (_a2 = res.metadataJson) == null ? void 0 : _a2.url) != null ? _c2 : "#",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "flex items-center gap-3 p-3 rounded-lg border border-gray-200 hover:border-theme-accent-primary hover:bg-theme-accent-primary/5 transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx13(FolderOpen, { className: "w-5 h-5 text-theme-accent-primary flex-shrink-0" }),
+                      /* @__PURE__ */ jsx13("span", { className: "text-sm text-gray-700", children: (_e2 = (_d2 = res.title) != null ? _d2 : res.name) != null ? _e2 : `Resource ${i + 1}` })
+                    ]
+                  },
+                  i
+                );
+              }) }) : /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [
+                /* @__PURE__ */ jsx13(FolderOpen, { className: "w-12 h-12 text-gray-300" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-gray-500", children: "No resources available" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-xs text-gray-400", children: "Downloadable files and links will appear here." })
+              ] }) }),
+              activeTab === "faq" && /* @__PURE__ */ jsx13("div", { children: faqs.length > 0 ? /* @__PURE__ */ jsx13(FAQAccordion, { faqs }) : /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center gap-3", children: [
+                /* @__PURE__ */ jsx13(HelpCircle, { className: "w-12 h-12 text-gray-300" }),
+                /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-gray-500", children: "No FAQs for this lesson" })
+              ] }) })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function FAQAccordion({ faqs }) {
+  const [openIdx, setOpenIdx] = useState7(null);
+  return /* @__PURE__ */ jsx13("div", { className: "space-y-2", children: faqs.map((faq, i) => /* @__PURE__ */ jsxs12("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        onClick: () => setOpenIdx(openIdx === i ? null : i),
+        className: "w-full flex items-center justify-between px-4 py-3 text-left text-sm font-medium text-gray-800 hover:bg-gray-50 transition-colors cursor-pointer",
+        children: [
+          faq.question,
+          /* @__PURE__ */ jsx13(ChevronLeft2, { className: `w-4 h-4 text-gray-400 transition-transform duration-200 ${openIdx === i ? "-rotate-90" : "rotate-180"}` })
+        ]
+      }
+    ),
+    openIdx === i && /* @__PURE__ */ jsx13("div", { className: "px-4 pb-4 text-sm text-gray-600 border-t border-gray-100 pt-3", children: faq.answer })
+  ] }, i)) });
+}
+
+// src/components/pages/MessagesPage.tsx
+import { useState as useState8, useRef, useEffect } from "react";
+import { MessageSquare, Send, ArrowLeft as ArrowLeft2, Plus, ChevronUp, Loader2, Search as Search6 } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function formatTime(timestamp) {
+  try {
+    const date = new Date(timestamp);
+    const now = /* @__PURE__ */ new Date();
+    const diffDays = Math.floor((now.getTime() - date.getTime()) / (1e3 * 60 * 60 * 24));
+    if (diffDays === 0) return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return date.toLocaleDateString("en-US", { weekday: "short" });
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  } catch (e) {
+    return "";
+  }
+}
+function timeAgo(timestamp) {
+  try {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    const mins = Math.floor(diff / 6e4);
+    if (mins < 1) return "just now";
+    if (mins < 60) return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h`;
+    return `${Math.floor(hrs / 24)}d`;
+  } catch (e) {
+    return "";
+  }
+}
+function MessagesPage(props) {
+  var _a, _b;
+  const noop = (..._args) => {
+  };
+  const {
+    conversations = [],
+    isLoadingConversations = false,
+    selectedConversation,
+    onSelectConversation = noop,
+    messages = [],
+    isLoadingMessages = false,
+    isLoadingMore = false,
+    hasMoreMessages = false,
+    onLoadMoreMessages = noop,
+    onSendMessage = noop,
+    isSending = false,
+    searchQuery = "",
+    onSearchChange = noop,
+    showNewMessageDialog = false,
+    onNewMessageDialogChange = noop,
+    mobileView = "list",
+    onMobileViewChange = noop,
+    currentUserId = "student-current"
+  } = props;
+  const [messageText, setMessageText] = useState8("");
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    var _a2;
+    (_a2 = messagesEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleSend = async () => {
+    if (!messageText.trim()) return;
+    const text = messageText.trim();
+    setMessageText("");
+    await onSendMessage(text);
+  };
+  const selectedName = ((_a = selectedConversation == null ? void 0 : selectedConversation.participant) == null ? void 0 : _a.name) || (selectedConversation == null ? void 0 : selectedConversation.name) || "Conversation";
+  const selectedCourse = ((_b = selectedConversation == null ? void 0 : selectedConversation.courseContext) == null ? void 0 : _b.courseName) || "";
+  return /* @__PURE__ */ jsxs13("div", { className: "flex h-[calc(100vh-4rem)] -mx-4 lg:-mx-6 lg:-my-4 pt-3 overflow-hidden bg-theme-bg-secondary", children: [
+    /* @__PURE__ */ jsxs13("div", { className: cn(
+      "w-full lg:w-80 shrink-0 border-r border-theme-border-primary flex flex-col bg-theme-bg-secondary",
+      mobileView === "chat" ? "hidden lg:flex" : "flex"
+    ), children: [
+      /* @__PURE__ */ jsxs13("div", { className: "px-4 pt-5 pb-3", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx14("h1", { className: "text-xl font-bold text-theme-text-primary", children: "Messages" }),
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              onClick: () => onNewMessageDialogChange(true),
+              title: "New message",
+              className: "inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--accent-primary))] text-white hover:opacity-90 transition-opacity shadow-sm cursor-pointer",
+              children: /* @__PURE__ */ jsx14(Plus, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx14(Search6, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-theme-text-secondary" }),
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              type: "text",
+              value: searchQuery,
+              onChange: (e) => onSearchChange(e.target.value),
+              placeholder: "Search messages...",
+              className: "w-full rounded-lg border border-theme-border-primary bg-theme-bg-primary pl-10 pr-4 py-2.5 text-sm text-theme-text-primary placeholder:text-theme-text-secondary focus:outline-none focus:ring-2 focus:ring-theme-accent-primary/30 focus:border-theme-accent-primary transition-colors"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-y-auto", children: isLoadingConversations ? /* @__PURE__ */ jsx14("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx14("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" }) }) : conversations.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+        /* @__PURE__ */ jsx14("div", { className: "w-16 h-16 rounded-full bg-theme-bg-tertiary flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx14(MessageSquare, { className: "w-8 h-8 text-theme-text-secondary" }) }),
+        /* @__PURE__ */ jsx14("p", { className: "text-sm text-theme-text-secondary", children: "No conversations found" })
+      ] }) : conversations.map((conv) => {
+        var _a2, _b2, _c, _d, _e;
+        const convId = conv.id || conv.conversationId;
+        const isSelected = (selectedConversation == null ? void 0 : selectedConversation.id) === convId;
+        const name = ((_a2 = conv.participant) == null ? void 0 : _a2.name) || conv.name || ((_b2 = conv.courseContext) == null ? void 0 : _b2.courseName) || "Conversation";
+        const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+        const lastMsg = ((_c = conv.lastMessage) == null ? void 0 : _c.content) || "";
+        const lastTime = (_d = conv.lastMessage) == null ? void 0 : _d.timestamp;
+        const courseName = (_e = conv.courseContext) == null ? void 0 : _e.courseName;
+        const unread = conv.unreadCount || 0;
+        return /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            onClick: () => {
+              onSelectConversation(conv);
+              onMobileViewChange("chat");
+            },
+            className: cn(
+              "w-full flex items-start gap-3 px-4 py-3.5 text-left transition-colors border-l-[3px] border-transparent hover:bg-theme-bg-tertiary/50 cursor-pointer",
+              isSelected && "bg-theme-accent-primary/5 border-l-[rgb(var(--accent-primary))]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs13("div", { className: "relative shrink-0", children: [
+                /* @__PURE__ */ jsx14("div", { className: "w-10 h-10 rounded-full bg-theme-accent-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx14("span", { className: "text-sm font-semibold text-[rgb(var(--accent-primary))]", children: initials }) }),
+                unread > 0 && /* @__PURE__ */ jsx14("span", { className: "absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[rgb(var(--accent-primary))] text-white text-[10px] font-bold flex items-center justify-center", children: unread > 9 ? "9+" : unread })
+              ] }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx14("span", { className: "text-sm font-semibold text-theme-text-primary truncate", children: name }),
+                  lastTime && /* @__PURE__ */ jsx14("span", { className: "text-xs text-theme-text-secondary whitespace-nowrap", children: timeAgo(lastTime) })
+                ] }),
+                /* @__PURE__ */ jsx14("p", { className: "text-xs text-theme-text-secondary truncate mt-0.5", children: lastMsg }),
+                courseName && /* @__PURE__ */ jsx14("p", { className: "text-xs text-[rgb(var(--accent-primary))] mt-1 truncate", children: courseName })
+              ] })
+            ]
+          },
+          convId
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx14("div", { className: cn(
+      "flex-1 min-w-0 flex flex-col bg-theme-bg-primary",
+      mobileView === "list" ? "hidden lg:flex" : "flex"
+    ), children: !selectedConversation ? /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col items-center justify-center gap-3 text-center px-4", children: [
+      /* @__PURE__ */ jsx14("div", { className: "w-20 h-20 rounded-full bg-theme-bg-tertiary flex items-center justify-center", children: /* @__PURE__ */ jsx14(MessageSquare, { className: "w-10 h-10 text-theme-text-secondary" }) }),
+      /* @__PURE__ */ jsx14("h2", { className: "text-lg font-semibold text-theme-text-primary", children: "Select a conversation" }),
+      /* @__PURE__ */ jsx14("p", { className: "text-sm text-theme-text-secondary max-w-xs", children: "Choose a conversation from the list or start a new one" }),
+      /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          onClick: () => onNewMessageDialogChange(true),
+          className: "mt-2 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[rgb(var(--accent-primary))] text-white text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx14(Plus, { className: "w-4 h-4" }),
+            "New Message"
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      /* @__PURE__ */ jsxs13("div", { className: "px-4 py-3 border-b border-theme-border-primary flex items-center gap-3 bg-theme-bg-secondary", children: [
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            onClick: () => onMobileViewChange("list"),
+            className: "lg:hidden text-theme-text-secondary hover:text-theme-text-primary cursor-pointer",
+            children: /* @__PURE__ */ jsx14(ArrowLeft2, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { className: "w-9 h-9 rounded-full bg-theme-accent-primary/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx14("span", { className: "text-sm font-semibold text-[rgb(var(--accent-primary))]", children: selectedName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) }) }),
+        /* @__PURE__ */ jsxs13("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx14("p", { className: "font-semibold text-sm text-theme-text-primary truncate", children: selectedName }),
+          selectedCourse && /* @__PURE__ */ jsx14("p", { className: "text-xs text-[rgb(var(--accent-primary))] truncate", children: selectedCourse })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-3", children: [
+        hasMoreMessages && /* @__PURE__ */ jsx14("div", { className: "flex justify-center pb-2", children: /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            onClick: onLoadMoreMessages,
+            disabled: isLoadingMore,
+            className: "inline-flex items-center gap-1 text-xs text-[rgb(var(--accent-primary))] hover:opacity-80 cursor-pointer disabled:opacity-50",
+            children: [
+              isLoadingMore ? /* @__PURE__ */ jsx14(Loader2, { className: "w-3 h-3 animate-spin" }) : /* @__PURE__ */ jsx14(ChevronUp, { className: "w-3 h-3" }),
+              "Load older messages"
+            ]
+          }
+        ) }),
+        isLoadingMessages ? /* @__PURE__ */ jsx14("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx14("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-theme-border-primary border-t-theme-accent-primary" }) }) : messages.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+          /* @__PURE__ */ jsx14(MessageSquare, { className: "w-10 h-10 text-theme-text-secondary mb-3" }),
+          /* @__PURE__ */ jsx14("p", { className: "text-sm text-theme-text-secondary", children: "No messages yet. Say hello!" })
+        ] }) : messages.map((msg) => {
+          const isOwn = msg.senderId === currentUserId || msg.senderRole === "STUDENT";
+          return /* @__PURE__ */ jsx14("div", { className: cn("flex", isOwn ? "justify-end" : "justify-start"), children: /* @__PURE__ */ jsxs13("div", { className: cn("flex items-end gap-2 max-w-[75%]", isOwn && "flex-row-reverse"), children: [
+            !isOwn && /* @__PURE__ */ jsx14("div", { className: "w-7 h-7 rounded-full bg-theme-accent-primary/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx14("span", { className: "text-[10px] font-semibold text-[rgb(var(--accent-primary))]", children: selectedName.charAt(0).toUpperCase() }) }),
+            /* @__PURE__ */ jsxs13("div", { children: [
+              /* @__PURE__ */ jsx14("div", { className: cn(
+                "rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
+                isOwn ? "bg-[rgb(var(--accent-primary))] text-white rounded-br-md" : "bg-theme-bg-tertiary text-theme-text-primary rounded-bl-md"
+              ), children: msg.content }),
+              /* @__PURE__ */ jsx14("p", { className: cn("text-[10px] text-theme-text-muted mt-1", isOwn ? "text-right" : "text-left"), children: msg.timestamp ? formatTime(msg.timestamp) : "" })
+            ] })
+          ] }) }, msg.id);
+        }),
+        /* @__PURE__ */ jsx14("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ jsx14("div", { className: "px-4 py-3 border-t border-theme-border-primary bg-theme-bg-secondary", children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            type: "text",
+            value: messageText,
+            onChange: (e) => setMessageText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+              }
+            },
+            placeholder: "Type a message...",
+            className: "flex-1 h-10 px-4 text-sm rounded-full border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary placeholder:text-theme-text-muted focus:outline-none focus:border-theme-accent-primary transition-colors"
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            onClick: handleSend,
+            disabled: isSending || !messageText.trim(),
+            className: "flex items-center justify-center w-10 h-10 rounded-full bg-[rgb(var(--accent-primary))] text-white hover:opacity-90 disabled:opacity-50 transition-opacity shrink-0 cursor-pointer",
+            children: isSending ? /* @__PURE__ */ jsx14(Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx14(Send, { className: "w-4 h-4" })
+          }
+        )
+      ] }) })
+    ] }) })
+  ] });
+}
+
+// src/components/pages/ManualReviewPage.tsx
+import { ClipboardList as ClipboardList2, CheckCircle, AlertCircle, FileText as FileText4, Calendar, Search as Search7 } from "lucide-react";
+
+// src/components/atoms/Badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-theme-accent-primary text-white",
+        secondary: "bg-theme-bg-tertiary text-theme-text-primary",
+        success: "border-transparent bg-green-600 text-white",
+        warning: "border-transparent bg-yellow-500 text-white",
+        destructive: "border-transparent bg-red-600 text-white",
+        outline: "text-theme-text-primary border-theme-border-primary"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsx15("div", __spreadValues({ className: cn(badgeVariants({ variant }), className) }, props));
+}
+
+// src/components/atoms/Input.tsx
+import * as React2 from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, type, label } = _b, props = __objRest(_b, ["className", "type", "label"]);
+    const inputElement = /* @__PURE__ */ jsx16(
+      "input",
+      __spreadValues({
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-theme-border-primary bg-theme-bg-primary px-3 py-2 text-sm text-theme-text-primary file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[rgb(var(--text-muted))] focus-visible:outline-none focus-visible:border-theme-accent-primary transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref
+      }, props)
+    );
+    if (label) {
+      return /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs14("label", { className: "text-sm font-medium text-theme-text-primary", children: [
+          label,
+          props.required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        inputElement
+      ] });
+    }
+    return inputElement;
+  }
+);
+Input.displayName = "Input";
+
+// src/components/pages/ManualReviewPage.tsx
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var statusDisplay = {
+  IN_REVIEW: { label: "Pending Review", variant: "warning" },
+  REQUEST_CHANGE: { label: "Changes Requested", variant: "destructive" },
+  GRADED: { label: "Approved", variant: "success" }
+};
+function formatDate(dateString) {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function ManualReviewPage(props) {
+  var _a, _b, _c, _d;
+  const noop = (..._args) => {
+  };
+  const {
+    submissions = [],
+    summary,
+    pagination,
+    isLoading = false,
+    filterStatus = "ALL",
+    onFilterStatusChange = noop,
+    searchQuery = "",
+    onSearchChange = noop,
+    currentPage = 1,
+    onPageChange = noop,
+    onSubmissionClick = noop
+  } = props;
+  return /* @__PURE__ */ jsxs15("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx17("h1", { className: "text-3xl font-bold text-theme-text-primary", children: "Manual Review" }),
+      /* @__PURE__ */ jsx17("p", { className: "text-theme-text-secondary mt-1", children: "Track your assignment submissions and review status" })
+    ] }) }),
+    /* @__PURE__ */ jsxs15("div", { className: "grid grid-cols-2 gap-6 md:grid-cols-4", children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: () => {
+            onFilterStatusChange("IN_REVIEW");
+            onPageChange(1);
+          },
+          className: cn(
+            "relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer",
+            filterStatus === "IN_REVIEW" ? "border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 scale-105 shadow-md z-20" : "border-theme-border-primary hover:border-yellow-500"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium text-theme-text-muted", children: "Pending Review" }),
+                /* @__PURE__ */ jsx17("p", { className: "text-2xl font-bold text-yellow-600", children: (_a = summary == null ? void 0 : summary.inReviewSubmissions) != null ? _a : 0 })
+              ] }),
+              /* @__PURE__ */ jsx17(ClipboardList2, { className: "h-6 w-6 text-yellow-600" })
+            ] }),
+            /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-theme-text-muted", children: "Awaiting review" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: () => {
+            onFilterStatusChange("REQUEST_CHANGE");
+            onPageChange(1);
+          },
+          className: cn(
+            "relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer",
+            filterStatus === "REQUEST_CHANGE" ? "border-red-500 bg-red-50 dark:bg-red-900/20 scale-105 shadow-md z-20" : "border-theme-border-primary hover:border-red-500"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium text-theme-text-muted", children: "Changes Requested" }),
+                /* @__PURE__ */ jsx17("p", { className: "text-2xl font-bold text-red-600", children: (_b = summary == null ? void 0 : summary.requestChangeSubmissions) != null ? _b : 0 })
+              ] }),
+              /* @__PURE__ */ jsx17(AlertCircle, { className: "h-6 w-6 text-red-600" })
+            ] }),
+            /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-theme-text-muted", children: "Needs revision" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: () => {
+            onFilterStatusChange("GRADED");
+            onPageChange(1);
+          },
+          className: cn(
+            "relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer",
+            filterStatus === "GRADED" ? "border-green-500 bg-green-50 dark:bg-green-900/20 scale-105 shadow-md z-20" : "border-theme-border-primary hover:border-green-500"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium text-theme-text-muted", children: "Approved" }),
+                /* @__PURE__ */ jsx17("p", { className: "text-2xl font-bold text-green-600", children: (_c = summary == null ? void 0 : summary.gradedSubmissions) != null ? _c : 0 })
+              ] }),
+              /* @__PURE__ */ jsx17(CheckCircle, { className: "h-6 w-6 text-green-600" })
+            ] }),
+            /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-theme-text-muted", children: "Completed" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          onClick: () => {
+            onFilterStatusChange("ALL");
+            onPageChange(1);
+          },
+          className: cn(
+            "relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer",
+            filterStatus === "ALL" ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 scale-105 shadow-md z-20" : "border-theme-border-primary hover:border-blue-500"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs15("div", { children: [
+                /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium text-theme-text-muted", children: "Total" }),
+                /* @__PURE__ */ jsx17("p", { className: "text-2xl font-bold text-blue-600", children: (_d = summary == null ? void 0 : summary.totalSubmissions) != null ? _d : 0 })
+              ] }),
+              /* @__PURE__ */ jsx17(FileText4, { className: "h-6 w-6 text-blue-600" })
+            ] }),
+            /* @__PURE__ */ jsx17("p", { className: "mt-1 text-xs text-theme-text-muted", children: "All submissions" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx17("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-3 sm:flex-row", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx17(Search7, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-theme-text-tertiary z-10 pointer-events-none" }),
+        /* @__PURE__ */ jsx17(
+          Input,
+          {
+            type: "text",
+            placeholder: "Search learner, course, or assignment...",
+            value: searchQuery,
+            onChange: (e) => onSearchChange(e.target.value),
+            className: "pl-10"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx17("div", { className: "w-full sm:w-auto", children: /* @__PURE__ */ jsxs15(
+        "select",
+        {
+          value: filterStatus,
+          onChange: (e) => {
+            onFilterStatusChange(e.target.value);
+            onPageChange(1);
+          },
+          className: "w-full h-10 px-3 rounded-md border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-theme-accent-primary cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx17("option", { value: "ALL", children: "All Statuses" }),
+            /* @__PURE__ */ jsx17("option", { value: "IN_REVIEW", children: "Pending Review" }),
+            /* @__PURE__ */ jsx17("option", { value: "REQUEST_CHANGE", children: "Changes Requested" }),
+            /* @__PURE__ */ jsx17("option", { value: "GRADED", children: "Approved" })
+          ]
+        }
+      ) })
+    ] }) }),
+    isLoading ? /* @__PURE__ */ jsx17(LoadingSpinner, { className: "py-20", text: "Loading submissions..." }) : submissions.length === 0 ? /* @__PURE__ */ jsx17(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx17(ClipboardList2, { className: "w-16 h-16" }),
+        title: "No submissions found",
+        description: "You haven't submitted anything for manual review yet."
+      }
+    ) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
+      /* @__PURE__ */ jsxs15("div", { className: "bg-theme-bg-primary rounded-lg border border-theme-border-primary", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "hidden sm:grid grid-cols-12 gap-4 px-5 py-3 bg-theme-bg-secondary text-xs font-semibold text-theme-text-muted uppercase tracking-wider border-b border-theme-border-primary rounded-t-lg", children: [
+          /* @__PURE__ */ jsx17("div", { className: "col-span-5", children: "Assignment" }),
+          /* @__PURE__ */ jsx17("div", { className: "col-span-2", children: "Submitted" }),
+          /* @__PURE__ */ jsx17("div", { className: "col-span-3", children: "Status" }),
+          /* @__PURE__ */ jsx17("div", { className: "col-span-2 text-right", children: "Score" })
+        ] }),
+        /* @__PURE__ */ jsx17("div", { className: "divide-y divide-theme-border-primary", children: submissions.map((sub) => {
+          var _a2, _b2, _c2, _d2, _e, _f;
+          return /* @__PURE__ */ jsxs15(
+            "div",
+            {
+              onClick: () => onSubmissionClick(sub.id),
+              className: "grid grid-cols-1 sm:grid-cols-12 gap-2 sm:gap-4 px-5 py-4 hover:bg-theme-bg-secondary/50 transition-colors cursor-pointer group",
+              children: [
+                /* @__PURE__ */ jsxs15("div", { className: "sm:col-span-5", children: [
+                  /* @__PURE__ */ jsx17("div", { className: "font-medium text-theme-text-primary group-hover:text-theme-accent-primary transition-colors truncate max-w-xs", children: ((_a2 = sub.assignment) == null ? void 0 : _a2.title) || sub.lessonTitle || sub.title || "Submission" }),
+                  /* @__PURE__ */ jsx17("div", { className: "text-xs text-theme-text-tertiary", children: ((_b2 = sub.assignment) == null ? void 0 : _b2.courseName) || sub.courseName || "" })
+                ] }),
+                /* @__PURE__ */ jsxs15("div", { className: "sm:col-span-2 flex items-center gap-1 text-sm text-theme-text-secondary", children: [
+                  /* @__PURE__ */ jsx17(Calendar, { className: "h-4 w-4" }),
+                  sub.submittedAt ? formatDate(sub.submittedAt) : "\u2014"
+                ] }),
+                /* @__PURE__ */ jsx17("div", { className: "sm:col-span-3 flex items-center", children: /* @__PURE__ */ jsx17(Badge, { variant: ((_c2 = statusDisplay[sub.status]) == null ? void 0 : _c2.variant) || "secondary", children: ((_d2 = statusDisplay[sub.status]) == null ? void 0 : _d2.label) || sub.status }) }),
+                /* @__PURE__ */ jsx17("div", { className: "sm:col-span-2 flex items-center justify-end", children: /* @__PURE__ */ jsxs15("span", { className: "font-medium text-theme-text-primary", children: [
+                  (_e = sub.score) != null ? _e : 0,
+                  "/",
+                  (_f = sub.totalPoints) != null ? _f : 0
+                ] }) })
+              ]
+            },
+            sub.id
+          );
+        }) })
+      ] }),
+      pagination && pagination.totalPages > 1 && /* @__PURE__ */ jsx17(
+        Pagination,
+        {
+          currentPage,
+          totalPages: pagination.totalPages,
+          total: pagination.totalItems,
+          pageSize: pagination.itemsPerPage || 10,
+          hasNextPage: pagination.hasNextPage,
+          hasPreviousPage: pagination.hasPreviousPage,
+          onPageChange,
+          className: "mt-4"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/pages/ManualReviewDetailPage.tsx
+import { ArrowLeft as ArrowLeft3, Calendar as Calendar2, BookOpen as BookOpen5, Award as Award3, AlertCircle as AlertCircle2, CheckCircle as CheckCircle3, Clock as Clock4, FileText as FileText5 } from "lucide-react";
+
+// src/components/atoms/Card.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Card(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx18(
+    "div",
+    __spreadValues({
+      className: cn("rounded-lg border border-theme-border-primary bg-theme-bg-primary shadow-sm", className)
+    }, props)
+  );
+}
+function CardHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx18("div", __spreadValues({ className: cn("flex flex-col space-y-1.5 p-6", className) }, props));
+}
+function CardTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx18("h3", __spreadValues({ className: cn("text-2xl font-semibold leading-none tracking-tight", className) }, props));
+}
+function CardContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx18("div", __spreadValues({ className: cn("p-6 pt-0", className) }, props));
+}
+
+// src/components/pages/ManualReviewDetailPage.tsx
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function formatDate2(dateString) {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatQuestionType(type) {
+  switch (type) {
+    case "TRUE_FALSE":
+      return "True/False";
+    case "SINGLE_CHOICE":
+      return "Single Choice";
+    case "MULTIPLE_SELECT":
+      return "Multiple Select";
+    case "TEXT":
+      return "Short Answer";
+    case "ESSAY":
+      return "Essay";
+    default:
+      return type;
+  }
+}
+function getStatusBadge(status) {
+  switch (status) {
+    case "IN_REVIEW":
+      return /* @__PURE__ */ jsxs16(Badge, { variant: "warning", className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx19(Clock4, { className: "h-3 w-3" }),
+        "Pending Review"
+      ] });
+    case "REQUEST_CHANGE":
+      return /* @__PURE__ */ jsxs16(Badge, { variant: "destructive", className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx19(AlertCircle2, { className: "h-3 w-3" }),
+        "Changes Requested"
+      ] });
+    case "GRADED":
+      return /* @__PURE__ */ jsxs16(Badge, { variant: "success", className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx19(CheckCircle3, { className: "h-3 w-3" }),
+        "Approved"
+      ] });
+    default:
+      return /* @__PURE__ */ jsx19(Badge, { variant: "secondary", children: status });
+  }
+}
+function ManualReviewDetailPage(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const noop = (..._args) => {
+  };
+  const { submission, isLoading = false, notFound = false, onBack = noop } = props;
+  if (isLoading) return /* @__PURE__ */ jsx19(LoadingSpinner, { className: "py-20", text: "Loading submission..." });
+  if (notFound || !submission) {
+    return /* @__PURE__ */ jsx19("div", { className: "container mx-auto p-6", children: /* @__PURE__ */ jsxs16("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsx19(AlertCircle2, { className: "h-12 w-12 text-theme-text-tertiary mx-auto mb-4" }),
+      /* @__PURE__ */ jsx19("h2", { className: "text-xl font-semibold text-theme-text-primary mb-2", children: "Submission Not Found" }),
+      /* @__PURE__ */ jsx19("p", { className: "text-theme-text-secondary mb-4", children: "The submission you're looking for doesn't exist or has been removed." }),
+      /* @__PURE__ */ jsx19(Button, { onClick: onBack, children: "Back to Manual Review" })
+    ] }) });
+  }
+  const detail = submission;
+  const status = ((_a = detail.context) == null ? void 0 : _a.status) || detail.status || "IN_REVIEW";
+  const assignmentTitle = ((_c = (_b = detail.context) == null ? void 0 : _b.assignment) == null ? void 0 : _c.title) || detail.lessonTitle || "Submission Detail";
+  const courseName = ((_e = (_d = detail.context) == null ? void 0 : _d.course) == null ? void 0 : _e.name) || detail.courseName || "";
+  const submittedAt = ((_f = detail.context) == null ? void 0 : _f.submittedAt) || detail.submittedAt || "";
+  const totalQuestions = ((_h = (_g = detail.context) == null ? void 0 : _g.assignment) == null ? void 0 : _h.totalQuestions) || 0;
+  const totalPoints = ((_j = (_i = detail.context) == null ? void 0 : _i.assignment) == null ? void 0 : _j.totalPoints) || 0;
+  const score = (_n = (_m = (_k = detail.latestReview) == null ? void 0 : _k.score) != null ? _m : (_l = detail.answers) == null ? void 0 : _l.reduce((sum, a) => sum + (a.pointsAwarded || 0), 0)) != null ? _n : 0;
+  const answers = detail.answers || [];
+  return /* @__PURE__ */ jsxs16("div", { className: "container mx-auto space-y-6 max-w-6xl", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", onClick: onBack, children: /* @__PURE__ */ jsx19(ArrowLeft3, { className: "h-5 w-5" }) }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx19("h1", { className: "text-3xl font-bold text-theme-text-primary", children: assignmentTitle }),
+        courseName && /* @__PURE__ */ jsx19("p", { className: "text-theme-text-secondary mt-1", children: courseName })
+      ] }),
+      getStatusBadge(status)
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsx19(Card, { children: /* @__PURE__ */ jsxs16(CardContent, { className: "pt-6", children: [
+        /* @__PURE__ */ jsx19(Calendar2, { className: "h-5 w-5 text-purple-600 dark:text-purple-400 mb-3" }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx19("p", { className: "text-sm text-theme-text-secondary", children: "Submitted" }),
+          /* @__PURE__ */ jsx19("p", { className: "font-medium text-theme-text-primary", children: submittedAt ? formatDate2(submittedAt) : "\u2014" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx19(Card, { children: /* @__PURE__ */ jsxs16(CardContent, { className: "pt-6", children: [
+        /* @__PURE__ */ jsx19(BookOpen5, { className: "h-5 w-5 text-green-600 dark:text-green-400 mb-3" }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx19("p", { className: "text-sm text-theme-text-secondary", children: "Assignment Info" }),
+          /* @__PURE__ */ jsxs16("p", { className: "font-medium text-theme-text-primary", children: [
+            totalQuestions,
+            " Questions"
+          ] })
+        ] })
+      ] }) }),
+      status === "IN_REVIEW" ? /* @__PURE__ */ jsx19(Card, { children: /* @__PURE__ */ jsxs16(CardContent, { className: "pt-6", children: [
+        /* @__PURE__ */ jsx19(Clock4, { className: "h-5 w-5 text-yellow-600 dark:text-yellow-400 mb-3" }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx19("p", { className: "text-sm text-theme-text-secondary", children: "Status" }),
+          /* @__PURE__ */ jsx19("p", { className: "font-medium text-theme-text-primary", children: "Waiting for Review" }),
+          /* @__PURE__ */ jsx19("p", { className: "text-xs text-theme-text-tertiary mt-1", children: "Your submission is being reviewed by the instructor." })
+        ] })
+      ] }) }) : /* @__PURE__ */ jsx19(Card, { children: /* @__PURE__ */ jsxs16(CardContent, { className: "pt-6", children: [
+        /* @__PURE__ */ jsx19(Award3, { className: "h-5 w-5 text-blue-600 dark:text-blue-400 mb-3" }),
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx19("p", { className: "text-sm text-theme-text-secondary", children: "Score" }),
+          /* @__PURE__ */ jsxs16("p", { className: "text-2xl font-bold text-theme-accent-primary", children: [
+            score,
+            "/",
+            totalPoints
+          ] }),
+          status === "REQUEST_CHANGE" && /* @__PURE__ */ jsx19("p", { className: "text-xs text-theme-text-tertiary mt-1", children: "Score is provisional until review completes." })
+        ] })
+      ] }) })
+    ] }),
+    status === "REQUEST_CHANGE" && /* @__PURE__ */ jsx19(Card, { className: "border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10", children: /* @__PURE__ */ jsx19(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx19(AlertCircle2, { className: "h-6 w-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-1" }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx19("h3", { className: "font-semibold text-theme-text-primary mb-2", children: "Changes Requested" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-sm text-theme-text-secondary", children: "Your instructor has requested changes to your submission. Please review the feedback below and resubmit your assignment through the course player." })
+      ] })
+    ] }) }) }),
+    answers.length > 0 && /* @__PURE__ */ jsxs16(Card, { children: [
+      /* @__PURE__ */ jsx19(CardHeader, { children: /* @__PURE__ */ jsxs16(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx19(FileText5, { className: "h-5 w-5" }),
+        "Submitted Answers (",
+        answers.length,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsx19(CardContent, { className: "space-y-6", children: answers.map((answer, index) => /* @__PURE__ */ jsx19(
+        "div",
+        {
+          className: "pb-6 border-b border-theme-border-primary last:border-b-0 last:pb-0",
+          children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3 mb-3", children: [
+            /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-theme-accent-primary text-white flex items-center justify-center font-semibold text-sm", children: index + 1 }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsxs16("div", { className: "flex items-start justify-between gap-4 mb-2", children: [
+                /* @__PURE__ */ jsx19("h4", { className: "font-medium text-theme-text-primary", children: answer.questionText }),
+                /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                  /* @__PURE__ */ jsx19(Badge, { variant: "secondary", className: "text-xs", children: formatQuestionType(answer.questionType) }),
+                  /* @__PURE__ */ jsxs16("span", { className: "text-sm text-theme-text-secondary", children: [
+                    answer.questionPoints,
+                    " pts"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs16("div", { className: "mt-3 space-y-3", children: [
+                answer.selectedOptionText && /* @__PURE__ */ jsxs16("div", { className: "p-4 bg-theme-bg-secondary rounded-lg border border-theme-border-primary", children: [
+                  /* @__PURE__ */ jsx19("p", { className: "text-xs font-medium text-theme-text-secondary mb-2", children: "Your Answer:" }),
+                  /* @__PURE__ */ jsx19("p", { className: "text-theme-text-primary font-medium", children: answer.selectedOptionText })
+                ] }),
+                answer.selectedOptionIds && answer.selectedOptionIds.length > 0 && !answer.selectedOptionText && /* @__PURE__ */ jsxs16("div", { className: "p-4 bg-theme-bg-secondary rounded-lg border border-theme-border-primary", children: [
+                  /* @__PURE__ */ jsx19("p", { className: "text-xs font-medium text-theme-text-secondary mb-2", children: "Selected Options:" }),
+                  /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: answer.selectedOptions && answer.selectedOptions.length > 0 ? answer.selectedOptions.map((option, idx) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx19("div", { className: "h-2 w-2 rounded-full bg-theme-accent-primary" }),
+                    /* @__PURE__ */ jsx19("span", { className: "text-theme-text-primary", children: option.text })
+                  ] }, idx)) : /* @__PURE__ */ jsxs16("p", { className: "text-theme-text-secondary text-sm", children: [
+                    answer.selectedOptionIds.length,
+                    " option",
+                    answer.selectedOptionIds.length !== 1 ? "s" : "",
+                    " selected"
+                  ] }) })
+                ] }),
+                answer.answerText && /* @__PURE__ */ jsxs16("div", { className: "p-4 bg-theme-bg-secondary rounded-lg border border-theme-border-primary", children: [
+                  /* @__PURE__ */ jsx19("p", { className: "text-xs font-medium text-theme-text-secondary mb-2", children: "Your Answer:" }),
+                  /* @__PURE__ */ jsx19("p", { className: "text-theme-text-primary whitespace-pre-wrap", children: answer.answerText })
+                ] })
+              ] })
+            ] })
+          ] })
+        },
+        answer.questionId || index
+      )) })
+    ] })
+  ] });
+}
+
+// src/components/pages/LearnerSettingsPage.tsx
+import { useState as useState9 } from "react";
+import { Mail } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function LearnerSettingsPage(props) {
+  const [marketingEmails, setMarketingEmails] = useState9(true);
+  return /* @__PURE__ */ jsxs17("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxs17("div", { children: [
+      /* @__PURE__ */ jsx20("h1", { className: "text-3xl font-bold text-theme-text-primary", children: "Settings" }),
+      /* @__PURE__ */ jsx20("p", { className: "mt-2 text-lg text-theme-text-secondary", children: "Manage your account settings and preferences" })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs17("div", { children: [
+        /* @__PURE__ */ jsx20("h2", { className: "text-2xl font-bold text-theme-text-primary", children: "Email Preferences" }),
+        /* @__PURE__ */ jsx20("p", { className: "mt-1 text-theme-text-secondary", children: "Control what emails you receive from us" })
+      ] }),
+      /* @__PURE__ */ jsx20("div", { className: "p-6 w-full max-w-2xl rounded-lg border border-theme-border-primary bg-theme-bg-secondary", children: /* @__PURE__ */ jsxs17("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-start gap-4", children: [
+          /* @__PURE__ */ jsx20("div", { className: "rounded-lg bg-theme-bg-tertiary p-3", children: /* @__PURE__ */ jsx20(Mail, { className: "h-5 w-5 text-theme-accent-primary" }) }),
+          /* @__PURE__ */ jsxs17("div", { children: [
+            /* @__PURE__ */ jsx20("h3", { className: "text-base font-semibold text-theme-text-primary", children: "Marketing Emails" }),
+            /* @__PURE__ */ jsx20("p", { className: "mt-1 text-sm text-theme-text-secondary", children: "Receive promotional updates, new courses, and special offers about our academy" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: () => setMarketingEmails(!marketingEmails),
+            className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${marketingEmails ? "bg-theme-accent-primary" : "bg-gray-200"}`,
+            role: "switch",
+            "aria-checked": marketingEmails,
+            children: /* @__PURE__ */ jsx20(
+              "span",
+              {
+                className: `pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 ${marketingEmails ? "translate-x-5" : "translate-x-0"}`
+              }
+            )
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/components/pages/PaymentSuccessPage.tsx
+import { useEffect as useEffect2, useState as useState10 } from "react";
+import { CheckCircle as CheckCircle4, Loader2 as Loader22 } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function PaymentSuccessPage({ onContinueLearning = () => {
+} }) {
+  const [countdown, setCountdown] = useState10(5);
+  const [isRedirecting, setIsRedirecting] = useState10(false);
+  useEffect2(() => {
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          setIsRedirecting(true);
+          onContinueLearning();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ jsx21("div", { className: "min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center px-4 py-12", children: /* @__PURE__ */ jsx21("div", { className: "max-w-lg w-full", children: /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsx21("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 bg-green-400 rounded-full animate-ping opacity-20" }),
+      /* @__PURE__ */ jsx21("div", { className: "relative bg-gradient-to-br from-green-400 to-green-500 rounded-full p-5 shadow-lg", children: /* @__PURE__ */ jsx21(CheckCircle4, { className: "h-16 w-16 text-white", strokeWidth: 2.5 }) })
+    ] }) }),
+    /* @__PURE__ */ jsx21("h1", { className: "text-2xl font-bold text-gray-900 mb-3 text-center", children: "Payment Successful!" }),
+    /* @__PURE__ */ jsx21("p", { className: "text-gray-600 text-sm mb-8 text-center leading-relaxed", children: "Thank you for your purchase. You're now enrolled in the course and can start learning immediately." }),
+    /* @__PURE__ */ jsx21("div", { className: "mb-8 p-4 bg-blue-50 rounded-xl border border-blue-100", children: isRedirecting ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-center gap-2 text-blue-600", children: [
+      /* @__PURE__ */ jsx21(Loader22, { className: "h-5 w-5 animate-spin" }),
+      /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium", children: "Redirecting..." })
+    ] }) : /* @__PURE__ */ jsxs18("p", { className: "text-sm text-blue-600 text-center font-medium", children: [
+      "Redirecting to course page in ",
+      countdown,
+      " second",
+      countdown !== 1 ? "s" : "",
+      "..."
+    ] }) }),
+    /* @__PURE__ */ jsx21("div", { className: "text-center", children: /* @__PURE__ */ jsx21(
+      "button",
+      {
+        onClick: onContinueLearning,
+        className: "inline-flex items-center gap-2 px-6 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors cursor-pointer",
+        children: "Continue Learning"
+      }
+    ) })
+  ] }) }) });
+}
+
+// src/components/pages/PaymentCancelPage.tsx
+import { useEffect as useEffect3, useState as useState11 } from "react";
+import { XCircle } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function PaymentCancelPage({ onRetry = () => {
+}, onGoBack = () => {
+} }) {
+  const [countdown, setCountdown] = useState11(10);
+  useEffect3(() => {
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          onGoBack();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ jsx22("div", { className: "min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center px-4 py-12", children: /* @__PURE__ */ jsx22("div", { className: "max-w-lg w-full", children: /* @__PURE__ */ jsxs19("div", { children: [
+    /* @__PURE__ */ jsx22("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsx22("div", { className: "bg-gradient-to-br from-orange-400 to-orange-500 rounded-full p-5 shadow-lg", children: /* @__PURE__ */ jsx22(XCircle, { className: "h-16 w-16 text-white", strokeWidth: 2.5 }) }) }),
+    /* @__PURE__ */ jsx22("h1", { className: "text-2xl font-bold text-gray-900 mb-3 text-center", children: "Payment Cancelled" }),
+    /* @__PURE__ */ jsx22("p", { className: "text-gray-600 text-sm mb-8 text-center leading-relaxed", children: "Your payment was cancelled. No charges have been made to your account." }),
+    /* @__PURE__ */ jsx22("div", { className: "mb-6 p-4 bg-blue-50 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx22("p", { className: "text-sm text-blue-600 text-center font-medium leading-relaxed", children: "You can complete your purchase anytime. The course will be waiting for you!" }) }),
+    /* @__PURE__ */ jsx22("div", { className: "mb-8 p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border border-gray-200", children: /* @__PURE__ */ jsxs19("p", { className: "text-sm text-gray-600 text-center font-medium", children: [
+      "Redirecting in ",
+      countdown,
+      " second",
+      countdown !== 1 ? "s" : "",
+      "..."
+    ] }) }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex gap-4 justify-center", children: [
+      /* @__PURE__ */ jsx22(
+        "button",
+        {
+          onClick: onRetry,
+          className: "px-6 py-2 bg-theme-accent-primary text-white rounded-lg font-medium hover:opacity-90 transition-opacity cursor-pointer",
+          children: "Try Again"
+        }
+      ),
+      /* @__PURE__ */ jsx22(
+        "button",
+        {
+          onClick: onGoBack,
+          className: "px-6 py-2 border border-theme-border-primary rounded-lg font-medium text-theme-text-primary hover:bg-theme-bg-secondary transition-colors cursor-pointer",
+          children: "Go Back"
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/components/pages/CreatorProfilePage.tsx
+import { Mail as Mail2, BookOpen as BookOpen6, Award as Award4 } from "lucide-react";
+import { User } from "lucide-react";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function CreatorProfilePage(props) {
+  var _a;
+  const noop = (..._args) => {
+  };
+  const { creator, courses = [], isLoading = false, onCourseClick = noop } = props;
+  if (isLoading) return /* @__PURE__ */ jsx23(LoadingSpinner, { className: "py-20" });
+  if (!creator) return /* @__PURE__ */ jsx23(EmptyState, { icon: /* @__PURE__ */ jsx23(User, { className: "w-16 h-16" }), title: "Creator not found" });
+  const name = creator.name || "Course Creator";
+  const email = creator.email || "";
+  const bio = creator.bio || "An experienced educator and software developer with expertise in modern web development and software engineering. With years of industry experience, they create comprehensive courses that help students master cutting-edge technologies and build real-world applications.";
+  const expertise = creator.expertise || [];
+  const avatarInitial = name.charAt(0).toUpperCase();
+  const totalCourses = (_a = creator.totalCourses) != null ? _a : courses.length;
+  const totalLessons = creator.totalLessons;
+  const totalStudents = creator.totalStudents;
+  return /* @__PURE__ */ jsx23("div", { className: "min-h-screen", children: /* @__PURE__ */ jsxs20("div", { children: [
+    /* @__PURE__ */ jsx23("div", { className: "mb-12", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col md:flex-row items-center gap-10", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex-1 text-gray-900 text-center md:text-left space-y-4", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "inline-flex items-center gap-2 bg-indigo-100 px-4 py-2 rounded-full text-sm font-medium text-indigo-700", children: [
+          /* @__PURE__ */ jsx23(Award4, { className: "h-4 w-4" }),
+          "Professional Creator"
+        ] }),
+        /* @__PURE__ */ jsx23("h1", { className: "text-5xl md:text-6xl font-bold tracking-tight", children: name }),
+        email && /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-gray-600 justify-center md:justify-start", children: [
+          /* @__PURE__ */ jsx23(Mail2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx23("span", { className: "text-lg", children: email })
+        ] }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-6 pt-4 justify-center md:justify-start", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx23("div", { className: "text-3xl font-bold text-gray-900", children: totalCourses }),
+            /* @__PURE__ */ jsx23("div", { className: "text-sm text-gray-600", children: "Courses" })
+          ] }),
+          totalLessons != null && /* @__PURE__ */ jsxs20(Fragment8, { children: [
+            /* @__PURE__ */ jsx23("div", { className: "w-px h-12 bg-gray-300" }),
+            /* @__PURE__ */ jsxs20("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx23("div", { className: "text-3xl font-bold text-gray-900", children: totalLessons }),
+              /* @__PURE__ */ jsx23("div", { className: "text-sm text-gray-600", children: "Lessons" })
+            ] })
+          ] }),
+          totalStudents != null && /* @__PURE__ */ jsxs20(Fragment8, { children: [
+            /* @__PURE__ */ jsx23("div", { className: "w-px h-12 bg-gray-300" }),
+            /* @__PURE__ */ jsxs20("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx23("div", { className: "text-3xl font-bold text-gray-900", children: totalStudents }),
+              /* @__PURE__ */ jsx23("div", { className: "text-sm text-gray-600", children: "Students" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
+        creator.profileImage ? /* @__PURE__ */ jsx23(
+          "img",
+          {
+            src: creator.profileImage,
+            alt: name,
+            className: "w-48 h-48 rounded-full object-cover shadow-2xl"
+          }
+        ) : /* @__PURE__ */ jsx23("div", { className: "w-48 h-48 rounded-full bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center text-white text-7xl font-bold shadow-2xl", children: avatarInitial }),
+        /* @__PURE__ */ jsx23("div", { className: "absolute -bottom-2 -right-2 bg-green-500 h-12 w-12 rounded-full border-4 border-white shadow-lg" })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs20("div", { className: "mb-12", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 mb-6", children: [
+        /* @__PURE__ */ jsx23("div", { className: "h-1 w-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full" }),
+        /* @__PURE__ */ jsx23("h2", { className: "text-3xl font-bold text-gray-900", children: "About" })
+      ] }),
+      /* @__PURE__ */ jsx23("p", { className: "text-gray-700 leading-relaxed text-lg", children: bio })
+    ] }),
+    expertise.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "mb-12", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 mb-6", children: [
+        /* @__PURE__ */ jsx23("div", { className: "h-1 w-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full" }),
+        /* @__PURE__ */ jsx23("h2", { className: "text-3xl font-bold text-gray-900", children: "Expertise" })
+      ] }),
+      /* @__PURE__ */ jsx23("div", { className: "flex flex-wrap gap-3", children: expertise.map((skill) => /* @__PURE__ */ jsx23(
+        "span",
+        {
+          className: "px-4 py-2 bg-indigo-50 text-indigo-700 rounded-full text-sm font-medium",
+          children: skill
+        },
+        skill
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between mb-8", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx23("div", { className: "h-1 w-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full" }),
+          /* @__PURE__ */ jsx23("h2", { className: "text-3xl font-bold text-gray-900", children: "Featured Courses" })
+        ] }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 bg-indigo-50 px-4 py-2 rounded-full", children: [
+          /* @__PURE__ */ jsx23(BookOpen6, { className: "h-5 w-5 text-indigo-600" }),
+          /* @__PURE__ */ jsxs20("span", { className: "font-semibold text-indigo-600", children: [
+            courses.length,
+            " Courses"
+          ] })
+        ] })
+      ] }),
+      courses.length === 0 ? /* @__PURE__ */ jsx23(EmptyState, { title: "No courses yet" }) : /* @__PURE__ */ jsx23("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: courses.map((course) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsx23(
+          CourseCard,
+          {
+            id: course.id,
+            title: course.title || "",
+            thumbnail: course.thumbnail,
+            totalLessons: course.totalLessons || 0,
+            progress: 0,
+            isFree: (_a2 = course.isFree) != null ? _a2 : false,
+            price: course.price,
+            showProgress: false,
+            showPrice: true,
+            description: course.description || ((_b = course.summary) == null ? void 0 : _b.replace(/<[^>]*>/g, "")) || "",
+            instructorName: creator.name,
+            category: course.category,
+            onClick: () => onCourseClick(course.id)
+          },
+          course.id
+        );
+      }) })
+    ] })
+  ] }) });
+}
+export {
+  BundleDetailPage,
+  CatalogBundlesPage,
+  CatalogCoursesPage,
+  CourseDetailPage,
+  CoursePlayerPage,
+  CreatorProfilePage,
+  LearnerSettingsPage,
+  ManualReviewDetailPage,
+  ManualReviewPage,
+  MessagesPage,
+  MyLearningPage,
+  PaymentCancelPage,
+  PaymentSuccessPage
+};