{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "course-content-page-shadcnui",
  "type": "registry:component",
  "title": "Course Content Page",
  "description": "Interactive course page with video player, instructor details, curriculum sections, and progress tracking",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/course-content/course-content-page.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion, type Variants } from \"framer-motion\";\nimport {\n  AlertTriangle,\n  Award,\n  BookOpen,\n  CheckCircle2,\n  ChevronRight,\n  Clock,\n  Download,\n  FileText,\n  Languages,\n  Lock,\n  Play,\n  PlayCircle,\n  Share2,\n  Star,\n  Timer,\n  Users,\n  Video,\n  Zap,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\n// ============================================================================\n// TYPES & INTERFACES\n// ============================================================================\n\ninterface InstructorCardProps {\n  name: string;\n  title: string;\n  bio: string;\n  image: string;\n  rating: number;\n  students: string;\n  courses: number;\n}\n\ninterface CourseStatsProps {\n  label: string;\n  value: string;\n  icon: React.ReactNode;\n}\n\ninterface CurriculumSection {\n  title: string;\n  lessons: CurriculumLesson[];\n  duration: string;\n}\n\ninterface CurriculumLesson {\n  title: string;\n  duration: string;\n  isCompleted: boolean;\n  isLocked: boolean;\n  type: \"video\" | \"article\" | \"quiz\";\n}\n\n// ============================================================================\n// STATIC DATA\n// ============================================================================\n\nconst COURSE_DATA = {\n  title: \"Advanced React Development & Performance Optimization\",\n  description:\n    \"Master modern React patterns, state management, and performance optimization techniques to build production-ready applications.\",\n  rating: 4.8,\n  totalRatings: \"12,543\",\n  students: \"45,892\",\n  lastUpdated: \"November 2024\",\n  language: \"English\",\n  duration: \"18.5 hours\",\n  lectures: 156,\n};\n\nconst INSTRUCTOR_DATA = {\n  name: \"shadcn\",\n  title: \"Creator of shadcn/ui · Open Source Developer\",\n  bio: \"Building beautiful, accessible component libraries for the web. Passionate about design systems, developer experience, and making UI development enjoyable.\",\n  image: \"https://avatars.githubusercontent.com/u/139895814?v=4\",\n  rating: 4.9,\n  students: \"125,000\",\n  courses: 12,\n};\n\nconst PROMO_DATA = {\n  discount: 60,\n  originalPrice: 299,\n  discountedPrice: 119,\n  spotsLeft: 12,\n  deadline: new Date(Date.now() + 24 * 60 * 60 * 1000 + 5 * 60 * 60 * 1000), // 1 day 5 hours from now\n};\n\nconst CURRICULUM_DATA: CurriculumSection[] = [\n  {\n    title: \"Getting Started with React\",\n    duration: \"1h 45m\",\n    lessons: [\n      {\n        title: \"Introduction to Modern React\",\n        duration: \"12:30\",\n        isCompleted: true,\n        isLocked: false,\n        type: \"video\",\n      },\n      {\n        title: \"Setting Up Your Development Environment\",\n        duration: \"18:45\",\n        isCompleted: true,\n        isLocked: false,\n        type: \"video\",\n      },\n      {\n        title: \"Understanding Component Architecture\",\n        duration: \"25:15\",\n        isCompleted: false,\n        isLocked: false,\n        type: \"video\",\n      },\n      {\n        title: \"Quick Quiz: React Basics\",\n        duration: \"10:00\",\n        isCompleted: false,\n        isLocked: false,\n        type: \"quiz\",\n      },\n    ],\n  },\n  {\n    title: \"Advanced React Patterns\",\n    duration: \"3h 20m\",\n    lessons: [\n      {\n        title: \"Compound Components Pattern\",\n        duration: \"28:30\",\n        isCompleted: false,\n        isLocked: false,\n        type: \"video\",\n      },\n      {\n        title: \"Render Props & Higher-Order Components\",\n        duration: \"32:15\",\n        isCompleted: false,\n        isLocked: false,\n        type: \"video\",\n      },\n      {\n        title: \"Custom Hooks Deep Dive\",\n        duration: \"40:20\",\n        isCompleted: false,\n        isLocked: false,\n        type: \"video\",\n      },\n      {\n        title: \"Best Practices Guide\",\n        duration: \"15:00\",\n        isCompleted: false,\n        isLocked: false,\n        type: \"article\",\n      },\n    ],\n  },\n  {\n    title: \"State Management Mastery\",\n    duration: \"4h 15m\",\n    lessons: [\n      {\n        title: \"Context API vs Redux\",\n        duration: \"22:45\",\n        isCompleted: false,\n        isLocked: true,\n        type: \"video\",\n      },\n      {\n        title: \"Zustand State Management\",\n        duration: \"35:20\",\n        isCompleted: false,\n        isLocked: true,\n        type: \"video\",\n      },\n      {\n        title: \"Server State with React Query\",\n        duration: \"42:10\",\n        isCompleted: false,\n        isLocked: true,\n        type: \"video\",\n      },\n    ],\n  },\n];\n\n// ============================================================================\n// ANIMATION VARIANTS\n// ============================================================================\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.2,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.4 },\n  },\n};\n\n// ============================================================================\n// COMPONENTS\n// ============================================================================\n\nfunction CountdownTimer({ deadline }: { deadline: Date }) {\n  const [timeLeft, setTimeLeft] = useState({\n    days: 0,\n    hours: 0,\n    minutes: 0,\n    seconds: 0,\n  });\n\n  useEffect(() => {\n    const calculateTimeLeft = () => {\n      const difference = deadline.getTime() - Date.now();\n\n      if (difference > 0) {\n        setTimeLeft({\n          days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n          minutes: Math.floor((difference / 1000 / 60) % 60),\n          seconds: Math.floor((difference / 1000) % 60),\n        });\n      }\n    };\n\n    calculateTimeLeft();\n    const timer = setInterval(calculateTimeLeft, 1000);\n\n    return () => clearInterval(timer);\n  }, [deadline]);\n\n  const TimeUnit = ({ value, label }: { value: number; label: string }) => (\n    <div className=\"flex flex-col items-center\">\n      <motion.div\n        key={value}\n        initial={{ scale: 1.2, opacity: 0 }}\n        animate={{ scale: 1, opacity: 1 }}\n        className=\"relative flex h-14 w-14 sm:h-16 sm:w-16 items-center justify-center rounded-xl border border-border/40 bg-background/80 backdrop-blur\"\n      >\n        <span className=\"text-2xl sm:text-3xl font-bold tabular-nums text-foreground\">\n          {String(value).padStart(2, \"0\")}\n        </span>\n      </motion.div>\n      <span className=\"mt-2 text-xs font-medium uppercase tracking-wider text-foreground/60\">\n        {label}\n      </span>\n    </div>\n  );\n\n  return (\n    <div className=\"flex items-center gap-2 sm:gap-3\">\n      <TimeUnit value={timeLeft.days} label=\"Days\" />\n      <span className=\"text-2xl font-bold text-foreground/40\">:</span>\n      <TimeUnit value={timeLeft.hours} label=\"Hours\" />\n      <span className=\"text-2xl font-bold text-foreground/40\">:</span>\n      <TimeUnit value={timeLeft.minutes} label=\"Mins\" />\n      <span className=\"text-2xl font-bold text-foreground/40\">:</span>\n      <TimeUnit value={timeLeft.seconds} label=\"Secs\" />\n    </div>\n  );\n}\n\nfunction CourseHeader() {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5 }}\n      className=\"mb-8 space-y-6\"\n    >\n      {/* Promotional Offer Card */}\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.5, delay: 0.2 }}\n        className=\"relative overflow-hidden rounded-2xl border-2 border-primary/40 bg-gradient-to-br from-primary/10 via-background/80 to-background/60 p-6 backdrop-blur\"\n      >\n        {/* Animated background gradient */}\n        <div className=\"absolute inset-0 bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5 opacity-50 animate-pulse\" />\n\n        <div className=\"relative space-y-4\">\n          {/* Header with badges */}\n          <div className=\"flex flex-wrap items-center justify-between gap-3\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge className=\"bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 px-3 py-1\">\n                <Zap className=\"h-3 w-3 mr-1\" />\n                {PROMO_DATA.discount}% OFF\n              </Badge>\n              <Badge className=\"bg-gradient-to-r from-red-500 to-pink-500 text-white border-0 px-3 py-1 animate-pulse\">\n                <AlertTriangle className=\"h-3 w-3 mr-1\" />\n                Only {PROMO_DATA.spotsLeft} Spots Left\n              </Badge>\n            </div>\n            <Badge\n              variant=\"outline\"\n              className=\"border-primary/40 bg-background/60 text-foreground\"\n            >\n              <Timer className=\"h-3 w-3 mr-1\" />\n              Limited Time Offer\n            </Badge>\n          </div>\n\n          {/* Countdown Timer */}\n          <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-1\">\n              <h3 className=\"text-lg sm:text-xl font-bold text-foreground\">\n                Offer Ends In:\n              </h3>\n              <p className=\"text-sm text-foreground/70\">\n                Don't miss this opportunity to save $\n                {PROMO_DATA.originalPrice - PROMO_DATA.discountedPrice}!\n              </p>\n            </div>\n          </div>\n\n          <CountdownTimer deadline={PROMO_DATA.deadline} />\n\n          {/* Pricing */}\n          <div className=\"flex flex-wrap items-end gap-4 pt-2 border-t border-border/40\">\n            <div className=\"space-y-1\">\n              <p className=\"text-sm text-foreground/60\">Original Price</p>\n              <p className=\"text-2xl font-bold text-foreground/40 line-through\">\n                ${PROMO_DATA.originalPrice}\n              </p>\n            </div>\n            <div className=\"space-y-1\">\n              <p className=\"text-sm text-foreground/60\">Discounted Price</p>\n              <p className=\"text-4xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\n                ${PROMO_DATA.discountedPrice}\n              </p>\n            </div>\n            <div className=\"ml-auto\">\n              <Button\n                size=\"lg\"\n                className=\"rounded-full bg-gradient-to-r from-primary to-primary/80 text-primary-foreground hover:from-primary/90 hover:to-primary/70 shadow-lg shadow-primary/25\"\n                aria-label=\"Enroll now and save\"\n              >\n                Enroll Now & Save $\n                {PROMO_DATA.originalPrice - PROMO_DATA.discountedPrice}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </motion.div>\n\n      {/* Original Header Content */}\n      <div className=\"flex flex-col justify-between gap-4 md:flex-row md:items-start\">\n        <div className=\"flex-1 space-y-3\">\n          <Badge\n            variant=\"outline\"\n            className=\"inline-flex items-center gap-2 rounded-full border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n          >\n            <BookOpen className=\"h-3.5 w-3.5\" />\n            Online Course\n          </Badge>\n\n          <h1 className=\"text-balance text-3xl font-semibold tracking-tight text-foreground md:text-4xl\">\n            {COURSE_DATA.title}\n          </h1>\n          <p className=\"max-w-3xl text-foreground/70\">\n            {COURSE_DATA.description}\n          </p>\n\n          <div className=\"flex flex-wrap items-center gap-4 text-sm\">\n            <div className=\"flex items-center gap-1\">\n              <Star className=\"h-4 w-4 fill-amber-500 text-amber-500\" />\n              <span className=\"font-semibold text-foreground\">\n                {COURSE_DATA.rating}\n              </span>\n              <span className=\"text-foreground/60\">\n                ({COURSE_DATA.totalRatings} ratings)\n              </span>\n            </div>\n            <div className=\"flex items-center gap-1 text-foreground/60\">\n              <Users className=\"h-4 w-4\" />\n              {COURSE_DATA.students} students\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex flex-wrap gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"rounded-full border-border/40 bg-background/60 backdrop-blur hover:border-border/60 hover:bg-background/70\"\n            aria-label=\"Share this course\"\n          >\n            <Share2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </Button>\n          <Button\n            className=\"rounded-full bg-primary text-primary-foreground hover:bg-primary/90\"\n            aria-label=\"Enroll in Advanced React Development course\"\n          >\n            Enroll Now\n          </Button>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nfunction VideoPlayer() {\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 backdrop-blur aspect-video\"\n      role=\"region\"\n      aria-label=\"Course video player\"\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      {/* Video Thumbnail/Player */}\n      <div className=\"relative h-full w-full bg-gradient-to-br from-primary/10 via-primary/5 to-background/50\">\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          {!isPlaying ? (\n            <motion.button\n              whileHover={{ scale: 1.1 }}\n              whileTap={{ scale: 0.95 }}\n              onClick={() => setIsPlaying(true)}\n              className=\"flex h-20 w-20 items-center justify-center rounded-full border-2 border-primary/40 bg-background/80 backdrop-blur transition-all hover:border-primary hover:bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2\"\n              aria-label=\"Play lesson: Introduction to Modern React\"\n            >\n              <Play\n                className=\"h-8 w-8 text-primary ml-1\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              />\n            </motion.button>\n          ) : (\n            <div className=\"flex h-full w-full items-center justify-center\">\n              <p className=\"text-sm text-foreground/60\">\n                Video player would appear here\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Video Info Overlay */}\n        <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background/90 to-transparent p-6\">\n          <div className=\"flex items-center gap-2 text-sm text-foreground/70\">\n            <Video className=\"h-4 w-4\" />\n            <span>Lesson 1: Introduction to Modern React</span>\n            <span className=\"ml-auto\">12:30</span>\n          </div>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nfunction CourseStats() {\n  const stats: CourseStatsProps[] = [\n    {\n      label: \"Total Duration\",\n      value: COURSE_DATA.duration,\n      icon: <Clock className=\"h-5 w-5\" />,\n    },\n    {\n      label: \"Lectures\",\n      value: COURSE_DATA.lectures.toString(),\n      icon: <PlayCircle className=\"h-5 w-5\" />,\n    },\n    {\n      label: \"Language\",\n      value: COURSE_DATA.language,\n      icon: <Languages className=\"h-5 w-5\" />,\n    },\n    {\n      label: \"Last Updated\",\n      value: COURSE_DATA.lastUpdated,\n      icon: <Download className=\"h-5 w-5\" />,\n    },\n  ];\n\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\"\n      role=\"list\"\n      aria-label=\"Course statistics\"\n    >\n      {stats.map((stat, index) => (\n        <motion.div\n          key={index}\n          whileHover={{ y: -4 }}\n          className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n          role=\"listitem\"\n        >\n          <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n          <div className=\"flex items-start gap-4\">\n            <div\n              className=\"rounded-lg border border-border/20 bg-background/50 p-2 text-foreground/70\"\n              aria-hidden=\"true\"\n            >\n              {stat.icon}\n            </div>\n            <div className=\"space-y-1\">\n              <p className=\"text-sm font-medium text-foreground/60\">\n                {stat.label}\n              </p>\n              <p className=\"text-lg font-semibold text-foreground\">\n                {stat.value}\n              </p>\n            </div>\n          </div>\n        </motion.div>\n      ))}\n    </motion.div>\n  );\n}\n\nfunction InstructorCard({\n  name,\n  title,\n  bio,\n  image,\n  rating,\n  students,\n  courses,\n}: InstructorCardProps) {\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n    >\n      {/* Gradient overlay on hover */}\n      <div className=\"absolute inset-0 bg-gradient-to-br from-primary/[0.08] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      {/* Top gradient accent */}\n      <div className=\"absolute top-0 left-0 right-0 h-24 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent\" />\n\n      <div className=\"relative space-y-6 p-6\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold uppercase tracking-[0.25em] text-foreground\">\n            Your Instructor\n          </h3>\n          <Badge className=\"bg-primary/10 text-primary border-primary/20 hover:bg-primary/20\">\n            <CheckCircle2 className=\"h-3 w-3 mr-1\" />\n            Verified\n          </Badge>\n        </div>\n\n        <div className=\"flex flex-col gap-6\">\n          {/* Profile Header */}\n          <div className=\"flex items-start gap-4\">\n            {/* Avatar with gradient border */}\n            <div className=\"relative\">\n              <div className=\"absolute inset-0 rounded-full bg-gradient-to-br from-primary/40 to-primary/10 blur-lg\" />\n              <div className=\"relative h-20 w-20 shrink-0 overflow-hidden rounded-full border-2 border-border/60 bg-background ring-4 ring-background/50\">\n                <img\n                  src={image}\n                  alt={name}\n                  className=\"h-full w-full object-cover\"\n                />\n              </div>\n            </div>\n\n            {/* Name and Title */}\n            <div className=\"flex-1 space-y-1.5\">\n              <h4 className=\"text-xl font-semibold text-foreground tracking-tight\">\n                {name}\n              </h4>\n              <p className=\"text-sm text-foreground/70 leading-relaxed\">\n                {title}\n              </p>\n            </div>\n          </div>\n\n          {/* Bio */}\n          <p className=\"text-sm leading-relaxed text-foreground/70 border-l-2 border-primary/20 pl-4\">\n            {bio}\n          </p>\n\n          {/* Stats Grid */}\n          <div\n            className=\"grid grid-cols-1 gap-3\"\n            role=\"list\"\n            aria-label=\"Instructor statistics\"\n          >\n            <motion.div\n              whileHover={{ y: -2 }}\n              className=\"group/stat relative overflow-hidden rounded-xl border border-border/30 bg-gradient-to-br from-amber-500/10 to-transparent p-4 transition-all hover:border-amber-500/30\"\n              role=\"listitem\"\n            >\n              <div className=\"absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-0 transition-opacity group-hover/stat:opacity-100\" />\n              <div className=\"relative space-y-1\">\n                <div className=\"flex items-center gap-1.5\">\n                  <Star\n                    className=\"h-3.5 w-3.5 fill-amber-500 text-amber-500\"\n                    aria-hidden=\"true\"\n                  />\n                  <span className=\"text-xs font-medium uppercase tracking-wider text-foreground/60\">\n                    Rating\n                  </span>\n                </div>\n                <p className=\"text-2xl font-bold text-foreground tabular-nums\">\n                  {rating}\n                </p>\n                <p className=\"text-xs text-foreground/50\">Instructor Score</p>\n              </div>\n            </motion.div>\n\n            <motion.div\n              whileHover={{ y: -2 }}\n              className=\"group/stat relative overflow-hidden rounded-xl border border-border/30 bg-gradient-to-br from-primary/10 to-transparent p-4 transition-all hover:border-primary/30\"\n              role=\"listitem\"\n            >\n              <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 transition-opacity group-hover/stat:opacity-100\" />\n              <div className=\"relative space-y-1\">\n                <div className=\"flex items-center gap-1.5\">\n                  <Users\n                    className=\"h-3.5 w-3.5 text-primary\"\n                    aria-hidden=\"true\"\n                  />\n                  <span className=\"text-xs font-medium uppercase tracking-wider text-foreground/60\">\n                    Students\n                  </span>\n                </div>\n                <p className=\"text-2xl font-bold text-foreground tabular-nums\">\n                  {students}\n                </p>\n                <p className=\"text-xs text-foreground/50\">Total Enrolled</p>\n              </div>\n            </motion.div>\n\n            <motion.div\n              whileHover={{ y: -2 }}\n              className=\"group/stat relative overflow-hidden rounded-xl border border-border/30 bg-gradient-to-br from-emerald-500/10 to-transparent p-4 transition-all hover:border-emerald-500/30\"\n              role=\"listitem\"\n            >\n              <div className=\"absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 transition-opacity group-hover/stat:opacity-100\" />\n              <div className=\"relative space-y-1\">\n                <div className=\"flex items-center gap-1.5\">\n                  <Award\n                    className=\"h-3.5 w-3.5 text-emerald-500\"\n                    aria-hidden=\"true\"\n                  />\n                  <span className=\"text-xs font-medium uppercase tracking-wider text-foreground/60\">\n                    Courses\n                  </span>\n                </div>\n                <p className=\"text-2xl font-bold text-foreground tabular-nums\">\n                  {courses}\n                </p>\n                <p className=\"text-xs text-foreground/50\">Published</p>\n              </div>\n            </motion.div>\n          </div>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nfunction CourseCurriculum() {\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      <div className=\"space-y-6\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-sm font-semibold uppercase tracking-[0.25em] text-foreground\">\n            Course Curriculum\n          </h3>\n          <Badge variant=\"secondary\" className=\"bg-background/50\">\n            {CURRICULUM_DATA.length} Sections\n          </Badge>\n        </div>\n\n        <div className=\"space-y-4\">\n          {CURRICULUM_DATA.map((section, sectionIndex) => (\n            <div\n              key={sectionIndex}\n              className=\"overflow-hidden rounded-xl border border-border/30 bg-background/30\"\n            >\n              {/* Section Header */}\n              <button\n                className=\"w-full p-4 text-left transition-colors hover:bg-background/50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset\"\n                aria-expanded=\"false\"\n                aria-label={`${section.title}, ${section.lessons.length} lessons, ${section.duration}`}\n              >\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex-1\">\n                    <h4 className=\"font-semibold text-foreground\">\n                      {section.title}\n                    </h4>\n                    <p className=\"text-xs text-foreground/60\">\n                      {section.lessons.length} lessons · {section.duration}\n                    </p>\n                  </div>\n                  <ChevronRight\n                    className=\"h-5 w-5 text-foreground/40 transition-transform\"\n                    aria-hidden=\"true\"\n                  />\n                </div>\n              </button>\n\n              {/* Lessons List */}\n              <div className=\"space-y-0 border-t border-border/20\">\n                {section.lessons.map((lesson, lessonIndex) => {\n                  const Icon =\n                    lesson.type === \"video\"\n                      ? PlayCircle\n                      : lesson.type === \"article\"\n                        ? FileText\n                        : CheckCircle2;\n\n                  return (\n                    <motion.button\n                      key={lessonIndex}\n                      whileHover={{ x: 4 }}\n                      transition={{ duration: 0.2 }}\n                      disabled={lesson.isLocked}\n                      className=\"group/lesson flex w-full items-center justify-between border-b border-border/10 p-4 text-left transition-all hover:bg-background/40 disabled:cursor-not-allowed disabled:opacity-50 last:border-b-0 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset\"\n                      aria-label={`${lesson.title}, ${lesson.type}, ${lesson.duration}${lesson.isLocked ? \", locked\" : \"\"}${lesson.isCompleted ? \", completed\" : \"\"}`}\n                    >\n                      <div className=\"flex items-center gap-3 flex-1\">\n                        <div\n                          className={`flex h-8 w-8 items-center justify-center rounded-full border ${\n                            lesson.isCompleted\n                              ? \"border-emerald-500/40 bg-emerald-500/10 text-emerald-500\"\n                              : \"border-border/40 bg-background/50 text-foreground/60\"\n                          }`}\n                        >\n                          {lesson.isLocked ? (\n                            <Lock className=\"h-4 w-4\" />\n                          ) : lesson.isCompleted ? (\n                            <CheckCircle2 className=\"h-4 w-4\" />\n                          ) : (\n                            <Icon className=\"h-4 w-4\" />\n                          )}\n                        </div>\n                        <div className=\"flex-1\">\n                          <p className=\"text-sm font-medium text-foreground\">\n                            {lesson.title}\n                          </p>\n                          <p className=\"text-xs text-foreground/50 capitalize\">\n                            {lesson.type} · {lesson.duration}\n                          </p>\n                        </div>\n                      </div>\n                      {!lesson.isLocked && (\n                        <PlayCircle className=\"h-4 w-4 text-foreground/40 opacity-0 transition-opacity group-hover/lesson:opacity-100\" />\n                      )}\n                    </motion.button>\n                  );\n                })}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n// ============================================================================\n// MAIN PAGE COMPONENT\n// ============================================================================\n\nexport function CourseContentPage() {\n  return (\n    <main className=\"relative min-h-screen overflow-hidden bg-background\">\n      {/* Glassmorphism background blobs */}\n      <div className=\"absolute inset-0 -z-10 pointer-events-none\">\n        <div className=\"absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]\" />\n        <div className=\"absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-foreground/[0.025] blur-[120px]\" />\n        <div className=\"absolute top-1/2 left-1/4 h-[400px] w-[400px] rounded-full bg-primary/[0.02] blur-[150px]\" />\n      </div>\n\n      <div className=\"relative px-6 py-8 lg:py-12\">\n        <div className=\"mx-auto max-w-7xl\">\n          <CourseHeader />\n\n          <motion.div\n            variants={containerVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className=\"space-y-6\"\n          >\n            {/* Video Player */}\n            <VideoPlayer />\n\n            {/* Course Stats */}\n            <CourseStats />\n\n            {/* Two Column Layout */}\n            <div className=\"grid gap-6 lg:grid-cols-3\">\n              {/* Curriculum - Takes 2 columns */}\n              <div className=\"lg:col-span-2\">\n                <CourseCurriculum />\n              </div>\n\n              {/* Instructor - Takes 1 column */}\n              <div className=\"lg:col-span-1\">\n                <InstructorCard {...INSTRUCTOR_DATA} />\n              </div>\n            </div>\n          </motion.div>\n        </div>\n      </div>\n    </main>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/course-content-page-shadcnui.tsx"
    }
  ]
}