fixes and architecture

src/components/catalog/CatalogSidebar.tsx

@@ -0,0 +1,115 @@
+"use client";
+import { FiSliders, FiStar } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+import { Checkbox } from "@/components/ui/Checkbox";
+import { FilterSection } from "./FilterSection";
+import { mockCategories } from "@/data/mockCourses";
+import type { CourseLevel } from "@/types/course";
+
+const LEVELS: CourseLevel[] = ["Principiante", "Intermedio", "Avanzado", "Todos los niveles"];
+const RATINGS = [4.5, 4.0, 3.5, 3.0];
+const PRICES = [15, 25, 50, 100];
+
+interface Props {
+  selectedCategories: string[];
+  onToggleCategory: (v: string) => void;
+  selectedLevels: string[];
+  onToggleLevel: (v: string) => void;
+  minRating: number | null;
+  onToggleRating: (r: number) => void;
+  maxPrice: number | null;
+  onTogglePrice: (p: number) => void;
+  activeFiltersCount: number;
+  onClearAll: () => void;
+}
+
+export function CatalogSidebar({
+  selectedCategories, onToggleCategory,
+  selectedLevels, onToggleLevel,
+  minRating, onToggleRating,
+  maxPrice, onTogglePrice,
+  activeFiltersCount, onClearAll,
+}: Props) {
+  const { isDark } = useTheme();
+  const hoverRow = isDark ? "hover:bg-slate-800" : "hover:bg-slate-50";
+  const ratingActive = isDark ? "bg-violet-600/20 text-violet-300" : "bg-violet-50 text-violet-700";
+  const ratingIdle   = isDark ? `text-slate-400 hover:text-slate-200 ${hoverRow}` : `text-slate-600 ${hoverRow}`;
+
+  return (
+    <>
+      <div className="flex items-center justify-between mb-5">
+        <span className={`text-sm font-bold flex items-center gap-2 ${isDark ? "text-white" : "text-slate-800"}`}>
+          <FiSliders /> Filtros
+          {activeFiltersCount > 0 && (
+            <span className="bg-violet-600 text-white text-[10px] font-black px-1.5 py-0.5 rounded-full">
+              {activeFiltersCount}
+            </span>
+          )}
+        </span>
+        {activeFiltersCount > 0 && (
+          <button onClick={onClearAll} className="text-xs text-violet-400 hover:text-violet-300 font-semibold">
+            Limpiar todo
+          </button>
+        )}
+      </div>
+
+      <FilterSection title="Categoría">
+        <div className="space-y-0.5">
+          {mockCategories.filter((c) => c.id !== "all").map((cat) => (
+            <div key={cat.id} className={`flex items-center justify-between px-2 py-1 rounded-lg transition-colors ${hoverRow}`}>
+              <Checkbox
+                label={cat.name}
+                checked={selectedCategories.includes(cat.name)}
+                onChange={() => onToggleCategory(cat.name)}
+              />
+              <span className="text-[10px] px-1.5 py-0.5 rounded">{cat.count}</span>
+            </div>
+          ))}
+        </div>
+      </FilterSection>
+
+      <FilterSection title="Nivel">
+        <div className="space-y-0.5">
+          {LEVELS.map((lvl) => (
+            <div key={lvl} className={`px-2 py-1 rounded-lg transition-colors ${hoverRow}`}>
+              <Checkbox
+                label={lvl}
+                checked={selectedLevels.includes(lvl)}
+                onChange={() => onToggleLevel(lvl)}
+              />
+            </div>
+          ))}
+        </div>
+      </FilterSection>
+
+      <FilterSection title="Valoración mínima">
+        <div className="space-y-0.5">
+          {RATINGS.map((r) => (
+            <button
+              key={r}
+              onClick={() => onToggleRating(r)}
+              className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs transition-colors ${minRating === r ? ratingActive : ratingIdle}`}
+            >
+              <FiStar className={minRating === r ? "fill-amber-400 text-amber-400" : "text-amber-400"} />
+              <span className="font-medium">{r}+ estrellas</span>
+            </button>
+          ))}
+        </div>
+      </FilterSection>
+
+      <FilterSection title="Precio máximo" defaultOpen={false}>
+        <div className="space-y-0.5">
+          {PRICES.map((p) => (
+            <button
+              key={p}
+              onClick={() => onTogglePrice(p)}
+              className={`w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs transition-colors ${maxPrice === p ? ratingActive : ratingIdle}`}
+            >
+              <span className="font-medium">Hasta ${p} USD</span>
+            </button>
+          ))}
+        </div>
+      </FilterSection>
+    </>
+  );
+}

src/components/catalog/CatalogToolbar.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { FiSearch, FiX, FiFilter, FiGrid, FiList } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+import { SortDropdown } from "./SortDropdown";
+
+interface Props {
+  search: string;
+  onSearchChange: (v: string) => void;
+  sort: string;
+  onSortChange: (v: string) => void;
+  gridView: "grid" | "list";
+  onGridViewChange: (v: "grid" | "list") => void;
+  activeFiltersCount: number;
+  onOpenMobileSidebar: () => void;
+}
+
+export function CatalogToolbar({
+  search, onSearchChange,
+  sort, onSortChange,
+  gridView, onGridViewChange,
+  activeFiltersCount, onOpenMobileSidebar,
+}: Props) {
+  const { isDark } = useTheme();
+  const inputCl = isDark
+    ? "bg-slate-900 border-slate-700 text-white placeholder:text-slate-500 focus:border-violet-500"
+    : "bg-white border-slate-300 text-slate-800 placeholder:text-slate-400 focus:border-violet-500";
+  const toggleBorder = isDark ? "border-slate-700" : "border-slate-200";
+  const toggleActive = "bg-violet-600 text-white";
+  const toggleIdle   = isDark ? "bg-slate-900 text-slate-400 hover:text-slate-200" : "bg-white text-slate-400 hover:text-slate-700";
+
+  return (
+    <div className="flex items-center gap-3 mb-5 flex-wrap">
+      <button
+        onClick={onOpenMobileSidebar}
+        className={`lg:hidden flex items-center gap-1.5 px-3 py-2 rounded-xl border text-xs font-semibold shrink-0 ${isDark ? "border-slate-700 text-slate-300 bg-slate-900" : "border-slate-200 text-slate-600 bg-white"}`}
+      >
+        <FiFilter /> Filtros
+        {activeFiltersCount > 0 && ` (${activeFiltersCount})`}
+      </button>
+
+      <div className="relative flex-1 min-w-48">
+        <FiSearch className={`absolute left-3.5 top-1/2 -translate-y-1/2 text-sm pointer-events-none ${isDark ? "text-slate-500" : "text-slate-400"}`} />
+        <input
+          type="text"
+          placeholder="Buscar cursos, instructores..."
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className={`w-full h-9 pl-9 pr-9 rounded-xl border text-sm outline-none transition-colors ${inputCl}`}
+        />
+        {search && (
+          <button onClick={() => onSearchChange("")} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-300">
+            <FiX className="text-sm" />
+          </button>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        <SortDropdown value={sort} onChange={onSortChange} />
+        <div className={`flex rounded-xl border overflow-hidden ${toggleBorder}`}>
+          {(["grid", "list"] as const).map((v) => (
+            <button
+              key={v}
+              onClick={() => onGridViewChange(v)}
+              className={`w-9 h-9 flex items-center justify-center transition-colors ${gridView === v ? toggleActive : toggleIdle}`}
+            >
+              {v === "grid" ? <FiGrid className="text-sm" /> : <FiList className="text-sm" />}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/catalog/FilterSection.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { useState } from "react";
+import { FiChevronDown, FiChevronUp } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function FilterSection({ title, children, defaultOpen = true }: Props) {
+  const [open, setOpen] = useState(defaultOpen);
+  const { isDark } = useTheme();
+
+  return (
+    <div className={`border-b pb-4 mb-4 -mx-5 px-5 ${isDark ? "border-slate-800" : "border-slate-200"}`}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`flex items-center justify-between w-full text-sm font-semibold mb-3 ${isDark ? "text-white" : "text-slate-800"}`}
+      >
+        {title}
+        {open ? <FiChevronUp className="text-slate-400" /> : <FiChevronDown className="text-slate-400" />}
+      </button>
+      {open && children}
+    </div>
+  );
+}

src/components/catalog/ListCourseCard.tsx

@@ -0,0 +1,100 @@
+"use client";
+import { useRef } from "react";
+import { useRouter } from "next/navigation";
+import { FiStar, FiShoppingCart, FiCheck } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+import { useCart } from "@/context/CartContext";
+import type { Course } from "@/types/course";
+
+export function ListCourseCard({ course }: { course: Course }) {
+  const { isDark } = useTheme();
+  const { addToCart, isInCart: isInCartFn } = useCart();
+  const isInCart = isInCartFn(course.id);
+  const router = useRouter();
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const discountPercent = Math.round(
+    ((course.originalPrice - course.price) / course.originalPrice) * 100,
+  );
+
+  return (
+    <div
+      className={`flex gap-4 rounded-2xl border p-4 transition-all hover:-translate-y-0.5 ${
+        isDark
+          ? "bg-slate-900/90 border-slate-800 hover:border-slate-700"
+          : "bg-white border-slate-200 hover:border-slate-300 hover:shadow-md"
+      }`}
+    >
+      <img
+        src={course.thumbnail}
+        alt={course.title}
+        onClick={() => router.push(`/course/${course.id}`)}
+        className="w-40 h-24 rounded-xl object-cover shrink-0 cursor-pointer"
+      />
+      <div className="flex-1 min-w-0 flex flex-col justify-between">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <span className={`text-[10px] font-bold uppercase tracking-wider ${isDark ? "text-violet-400" : "text-violet-600"}`}>
+              {course.category}
+            </span>
+            {course.badge && (
+              <span className="text-[10px] font-black px-2 py-0.5 rounded bg-amber-500 text-slate-950">
+                {course.badge}
+              </span>
+            )}
+          </div>
+          <h3
+            onClick={() => router.push(`/course/${course.id}`)}
+            className={`text-sm font-bold line-clamp-1 cursor-pointer hover:text-violet-400 transition-colors ${isDark ? "text-white" : "text-slate-900"}`}
+          >
+            {course.title}
+          </h3>
+          <p className={`text-xs line-clamp-1 mt-0.5 ${isDark ? "text-slate-400" : "text-slate-500"}`}>
+            {course.subtitle}
+          </p>
+          <div className="flex items-center gap-3 mt-2 text-xs">
+            <span className="flex items-center gap-1 font-bold text-amber-400">
+              <FiStar className="fill-amber-400" /> {course.rating.toFixed(1)}
+            </span>
+            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
+              ({course.reviewsCount.toLocaleString()})
+            </span>
+            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
+              {course.studentsCount.toLocaleString()} alumnos
+            </span>
+            <span className={isDark ? "text-slate-500" : "text-slate-400"}>
+              {course.duration}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-end justify-between shrink-0">
+        <div className="text-right">
+          <div className={`text-lg font-black font-mono ${isDark ? "text-white" : "text-slate-900"}`}>
+            ${course.price.toFixed(2)}
+          </div>
+          {discountPercent > 0 && (
+            <div className={`text-xs line-through font-mono ${isDark ? "text-slate-500" : "text-slate-400"}`}>
+              ${course.originalPrice.toFixed(2)}
+            </div>
+          )}
+        </div>
+        <button
+          ref={btnRef}
+          onClick={() => !isInCart && addToCart(course, btnRef.current)}
+          disabled={isInCart}
+          className={`px-3 py-2 rounded-xl text-xs font-bold flex items-center gap-1.5 transition-all ${
+            isInCart
+              ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 cursor-default"
+              : "bg-violet-600 hover:bg-violet-500 text-white hover:scale-105 active:scale-95"
+          }`}
+        >
+          {isInCart ? (
+            <><FiCheck /><span>En carrito</span></>
+          ) : (
+            <><FiShoppingCart /><span>Añadir</span></>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/catalog/SortDropdown.tsx

@@ -0,0 +1,67 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { FiChevronDown, FiCheck } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+import { SORT_OPTIONS } from "./sortOptions";
+
+interface Props { value: string; onChange: (v: string) => void; }
+
+export function SortDropdown({ value, onChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const { isDark } = useTheme();
+  const ref = useRef<HTMLDivElement>(null);
+  const active = SORT_OPTIONS.find((o) => o.value === value) ?? SORT_OPTIONS[0];
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const triggerCl = isDark
+    ? "bg-slate-900 border-slate-700 text-slate-200 hover:border-violet-500/50"
+    : "bg-white border-slate-200 text-slate-700 hover:border-violet-400";
+  const menuCl = isDark
+    ? "bg-slate-900 border-slate-700 shadow-xl shadow-black/40"
+    : "bg-white border-slate-200 shadow-xl shadow-slate-200/60";
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((p) => !p)}
+        className={`flex items-center gap-2 h-9 pl-3 pr-2.5 rounded-xl border text-xs font-medium transition-all ${triggerCl} ${open ? "border-violet-500/60" : ""}`}
+      >
+        <active.icon className={`text-sm shrink-0 ${isDark ? "text-violet-400" : "text-violet-500"}`} />
+        <span className="whitespace-nowrap">{active.label}</span>
+        <FiChevronDown className={`text-slate-400 text-xs shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
+      </button>
+
+      {open && (
+        <div className={`absolute right-0 top-full mt-1.5 z-50 min-w-[188px] rounded-2xl border overflow-hidden ${menuCl}`}>
+          <div className="py-1.5">
+            {SORT_OPTIONS.map((opt) => {
+              const isActive = opt.value === value;
+              return (
+                <button
+                  key={opt.value}
+                  onClick={() => { onChange(opt.value); setOpen(false); }}
+                  className={`w-full flex items-center gap-3 px-3.5 py-2.5 text-xs font-medium transition-colors text-left ${
+                    isActive
+                      ? isDark ? "bg-violet-600/20 text-violet-300" : "bg-violet-50 text-violet-700"
+                      : isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-600 hover:bg-slate-50"
+                  }`}
+                >
+                  <opt.icon className={`text-sm shrink-0 ${isActive ? (isDark ? "text-violet-400" : "text-violet-500") : "text-slate-400"}`} />
+                  <span className="flex-1">{opt.label}</span>
+                  {isActive && <FiCheck className={`text-xs shrink-0 ${isDark ? "text-violet-400" : "text-violet-500"}`} />}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/catalog/sortOptions.ts

@@ -0,0 +1,9 @@
+import { FiTrendingUp, FiAward, FiClock, FiArrowUp, FiArrowDown } from "react-icons/fi";
+
+export const SORT_OPTIONS = [
+  { value: "popular",  label: "Más populares",        icon: FiTrendingUp },
+  { value: "rating",   label: "Mejor valorados",       icon: FiAward      },
+  { value: "newest",   label: "Más recientes",         icon: FiClock      },
+  { value: "price_lo", label: "Precio: menor a mayor", icon: FiArrowUp    },
+  { value: "price_hi", label: "Precio: mayor a menor", icon: FiArrowDown  },
+];