import React, { useState, useEffect, useCallback } from 'react';
import { useAppState, useAction } from './sdk';
import { Badge, Glass, Icon, Metric } from './components';
import { 
  BookOpen, Code, CheckCircle, Play, ChevronRight, ChevronDown, 
  Trophy, Award, Clock, Target, Lightbulb, FileCode, 
  ChevronLeft, Menu, X, Star, Zap, Brain, Terminal
} from 'lucide-react';

// ============================================================================
// CURRICULUM DATA - Complete 6-Week Python Bootcamp
// ============================================================================

const CURRICULUM = {
  weeks: [
    {
      id: 1,
      title: "Python Basics",
      description: "Variables, data types, operators, and input/output",
      icon: "terminal",
      lessons: [
        {
          id: "1.1",
          title: "Welcome to Python",
          content: `Python is a powerful, easy-to-read programming language used for web development, data science, automation, and more.

**Why Python?**
- Clean, readable syntax
- Huge ecosystem of libraries
- Great for beginners and experts
- Used by Google, Netflix, NASA, and more

**Your First Program:**
\`\`\`python
print("Hello, World!")
\`\`\`

The \`print()\` function displays text on the screen. This is your first step into programming!`,
          codeExample: 'print("Hello, World!")',
          exercises: [
            {
              id: "ex-1.1.1",
              type: "code",
              instruction: "Print your name to the screen",
              starter: "# Write your code here\n",
              solution: 'print("Your Name")',
              test: 'output.contains("name")',
              hint: "Use print() with your name in quotes"
            }
          ]
        },
        {
          id: "1.2",
          title: "Variables & Data Types",
          content: `Variables store data that your program can use and manipulate.

**Basic Data Types:**
- \`int\` - Whole numbers (42, -17, 0)
- \`float\` - Decimal numbers (3.14, -0.5)
- \`str\` - Text strings ("hello", 'world')
- \`bool\` - True or False

**Creating Variables:**
\`\`\`python
name = "Alice"      # string
age = 25            # integer
height = 5.9        # float
is_student = True   # boolean
\`\`\`

**Naming Rules:**
- Start with letter or underscore
- No spaces (use underscores)
- Case-sensitive (age ≠ Age)`,
          codeExample: `name = "Alice"
age = 25
height = 5.9
print(f"{name} is {age} years old")`,
          exercises: [
            {
              id: "ex-1.2.1",
              type: "code",
              instruction: "Create variables for your favorite color and age, then print them",
              starter: "# Create your variables here\n\n# Print them\n",
              solution: `color = "blue"
age = 30
print(f"My favorite color is {color} and I am {age} years old")`,
              hint: "Use f-strings to combine text and variables"
            },
            {
              id: "ex-1.2.2",
              type: "multiple-choice",
              instruction: "Which is a valid variable name?",
              options: [
                "2name",
                "my_variable",
                "my variable",
                "class"
              ],
              correct: 1,
              explanation: "Variable names can't start with numbers, can't have spaces, and can't be Python keywords like 'class'"
            }
          ]
        },
        {
          id: "1.3",
          title: "Operators & Expressions",
          content: `Operators perform operations on values and variables.

**Arithmetic Operators:**
- \`+\` Addition
- \`-\` Subtraction
- \`*\` Multiplication
- \`/\` Division (returns float)
- \`//\` Floor division (returns int)
- \`%\` Modulo (remainder)
- \`**\` Exponentiation

**Examples:**
\`\`\`python
x = 10
y = 3
print(x + y)   # 13
print(x / y)   # 3.333...
print(x // y)  # 3
print(x % y)   # 1
print(x ** y)  # 1000
\`\`\``,
          codeExample: `price = 29.99
quantity = 3
total = price * quantity
print(f"Total: ${total:.2f}")`,
          exercises: [
            {
              id: "ex-1.3.1",
              type: "code",
              instruction: "Calculate the area of a rectangle with width=5 and height=8",
              starter: "width = 5\nheight = 8\n# Calculate area\n",
              solution: `width = 5
height = 8
area = width * height
print(f"Area: {area}")`,
              hint: "Area = width × height"
            }
          ]
        },
        {
          id: "1.4",
          title: "Input & Output",
          content: `Get input from users and display results.

**Getting Input:**
\`\`\`python
name = input("What is your name? ")
age = input("How old are you? ")
print(f"Hello {name}, you are {age} years old!")
\`\`\`

**Important:** \`input()\` always returns a string. Convert to numbers:
\`\`\`python
age = int(input("Your age: "))
price = float(input("Price: $"))
\`\`\`

**Type Conversion:**
- \`int("42")\` → 42
- \`float("3.14")\` → 3.14
- \`str(100)\` → "100"`,
          codeExample: `name = input("Enter your name: ")
birth_year = int(input("Enter birth year: "))
age = 2024 - birth_year
print(f"{name}, you are approximately {age} years old")`,
          exercises: [
            {
              id: "ex-1.4.1",
              type: "code",
              instruction: "Create a tip calculator: get bill amount and tip percentage, calculate total",
              starter: "# Get bill amount\n# Get tip percentage\n# Calculate total\n# Print result\n",
              solution: `bill = float(input("Bill amount: $"))
tip_percent = float(input("Tip %: "))
tip = bill * (tip_percent / 100)
total = bill + tip
print(f"Tip: ${tip:.2f}, Total: ${total:.2f}")`,
              hint: "Remember to convert input to float"
            }
          ]
        }
      ],
      project: {
        title: "Unit Converter",
        description: "Build a program that converts between different units (temperature, length, weight)",
        requirements: [
          "Convert Celsius ↔ Fahrenheit",
          "Convert miles ↔ kilometers",
          "Convert pounds ↔ kilograms",
          "User-friendly menu interface",
          "Handle invalid input gracefully"
        ],
        starterCode: `def celsius_to_fahrenheit(c):
    return c * 9/5 + 32

def fahrenheit_to_celsius(f):
    return (f - 32) * 5/9

# Add more conversion functions here

print("=== Unit Converter ===")
# Build your menu system`,
        solution: `def celsius_to_fahrenheit(c):
    return c * 9/5 + 32

def fahrenheit_to_celsius(f):
    return (f - 32) * 5/9

def miles_to_km(m):
    return m * 1.609

def km_to_miles(k):
    return k / 1.609

def lbs_to_kg(l):
    return l * 0.454

def kg_to_lbs(k):
    return k / 0.454

while True:
    print("\\n=== Unit Converter ===")
    print("1. Celsius to Fahrenheit")
    print("2. Fahrenheit to Celsius")
    print("3. Miles to Kilometers")
    print("4. Kilometers to Miles")
    print("5. Pounds to Kilograms")
    print("6. Kilograms to Pounds")
    print("0. Exit")
    
    choice = input("Choose conversion: ")
    
    if choice == "0":
        break
    elif choice == "1":
        c = float(input("Celsius: "))
        print(f"{c}°C = {celsius_to_fahrenheit(c):.1f}°F")
    # Add remaining cases...
    else:
        print("Invalid choice")`,
        rubric: {
          functionality: 40,
          codeQuality: 30,
          userExperience: 20,
          errorHandling: 10
        }
      },
      quiz: {
        questions: [
          {
            question: "Which data type stores whole numbers?",
            options: ["float", "int", "str", "bool"],
            correct: 1
          },
          {
            question: "What does 17 % 5 equal?",
            options: ["3", "3.4", "2", "0"],
            correct: 2
          },
          {
            question: "How do you convert a string to an integer?",
            options: ["integer()", "int()", "str()", "num()"],
            correct: 1
          }
        ]
      }
    },
    {
      id: 2,
      title: "Control Flow",
      description: "Conditionals, loops, and logic",
      icon: "zap",
      lessons: [
        {
          id: "2.1",
          title: "If Statements",
          content: `Make decisions in your code using if/elif/else.

**Basic Syntax:**
\`\`\`python
age = 18
if age >= 18:
    print("You're an adult")
else:
    print("You're a minor")
\`\`\`

**Comparison Operators:**
- \`==\` Equal to
- \`!=\` Not equal to
- \`>\` Greater than
- \`<\` Less than
- \`>=\` Greater than or equal
- \`<=\` Less than or equal

**Logical Operators:**
- \`and\` - Both conditions true
- \`or\` - At least one true
- \`not\` - Invert the condition`,
          codeExample: `score = 85
if score >= 90:
    grade = "A"
elif score >= 80:
    grade = "B"
elif score >= 70:
    grade = "C"
else:
    grade = "F"
print(f"Grade: {grade}")`,
          exercises: [
            {
              id: "ex-2.1.1",
              type: "code",
              instruction: "Check if a number is positive, negative, or zero",
              starter: "num = int(input('Enter a number: '))\n# Your code here\n",
              solution: `num = int(input('Enter a number: '))
if num > 0:
    print("Positive")
elif num < 0:
    print("Negative")
else:
    print("Zero")`,
              hint: "Use if/elif/else structure"
            }
          ]
        },
        {
          id: "2.2",
          title: "For Loops",
          content: `Repeat code a specific number of times or iterate over sequences.

**Range Function:**
\`\`\`python
for i in range(5):      # 0, 1, 2, 3, 4
    print(i)

for i in range(2, 6):   # 2, 3, 4, 5
    print(i)

for i in range(0, 10, 2):  # 0, 2, 4, 6, 8
    print(i)
\`\`\`

**Iterating Over Strings:**
\`\`\`python
for char in "hello":
    print(char)
\`\`\``,
          codeExample: `for i in range(1, 6):
    print(f"{i} squared is {i**2}")`,
          exercises: [
            {
              id: "ex-2.2.1",
              type: "code",
              instruction: "Print all even numbers from 1 to 20",
              starter: "# Use a for loop with range\n",
              solution: `for i in range(2, 21, 2):
    print(i)`,
              hint: "Use range with step of 2"
            }
          ]
        },
        {
          id: "2.3",
          title: "While Loops",
          content: `Repeat code while a condition is true.

**Basic Syntax:**
\`\`\`python
count = 0
while count < 5:
    print(count)
    count += 1
\`\`\`

**Infinite Loop (be careful!):**
\`\`\`python
while True:
    user_input = input("Type 'quit' to exit: ")
    if user_input == "quit":
        break
\`\`\`

**Break & Continue:**
- \`break\` - Exit the loop immediately
- \`continue\` - Skip to next iteration`,
          codeExample: `password = ""
while password != "secret123":
    password = input("Enter password: ")
print("Access granted!")`,
          exercises: [
            {
              id: "ex-2.3.1",
              type: "code",
              instruction: "Keep asking for input until user types 'done'",
              starter: "# Use while loop\n",
              solution: `while True:
    user_input = input("Enter something (type 'done' to quit): ")
    if user_input == "done":
        break
    print(f"You typed: {user_input}")`,
              hint: "Use while True with break"
            }
          ]
        }
      ],
      project: {
        title: "Number Guessing Game",
        description: "Create a game where the computer picks a random number and the player guesses it",
        requirements: [
          "Generate random number 1-100",
          "Give hints (higher/lower) after each guess",
          "Track number of attempts",
          "Validate input (1-100 range)",
          "Ask to play again"
        ],
        starterCode: `import random

secret = random.randint(1, 100)
attempts = 0

print("I'm thinking of a number between 1 and 100")
# Build your game loop`,
        solution: `import random

def play_game():
    secret = random.randint(1, 100)
    attempts = 0
    
    print("I'm thinking of a number between 1 and 100")
    
    while True:
        try:
            guess = int(input("Your guess: "))
            attempts += 1
            
            if guess < 1 or guess > 100:
                print("Please guess between 1 and 100")
            elif guess < secret:
                print("Higher!")
            elif guess > secret:
                print("Lower!")
            else:
                print(f"Correct! You got it in {attempts} attempts!")
                break
        except ValueError:
            print("Please enter a valid number")

while True:
    play_game()
    again = input("Play again? (yes/no): ")
    if again.lower() != "yes":
        break
print("Thanks for playing!")`,
        rubric: {
          functionality: 40,
          codeQuality: 30,
          userExperience: 20,
          errorHandling: 10
        }
      },
      quiz: {
        questions: [
          {
            question: "What does range(3, 7) produce?",
            options: ["3, 4, 5, 6, 7", "3, 4, 5, 6", "4, 5, 6, 7", "3, 5, 7"],
            correct: 1
          },
          {
            question: "Which keyword exits a loop immediately?",
            options: ["stop", "exit", "break", "return"],
            correct: 2
          }
        ]
      }
    },
    {
      id: 3,
      title: "Data Structures",
      description: "Lists, tuples, dictionaries, and sets",
      icon: "book-open",
      lessons: [
        {
          id: "3.1",
          title: "Lists",
          content: `Lists store ordered collections of items.

**Creating Lists:**
\`\`\`python
fruits = ["apple", "banana", "cherry"]
numbers = [1, 2, 3, 4, 5]
mixed = [1, "hello", 3.14, True]
\`\`\`

**Accessing Items:**
\`\`\`python
fruits[0]      # "apple"
fruits[-1]     # "cherry" (last item)
fruits[1:3]    # ["banana", "cherry"]
\`\`\`

**List Methods:**
- \`append(item)\` - Add to end
- \`insert(pos, item)\` - Insert at position
- \`remove(item)\` - Remove first occurrence
- \`pop()\` - Remove and return last item
- \`len(list)\` - Get length`,
          codeExample: `numbers = [1, 2, 3, 4, 5]
numbers.append(6)
numbers.insert(0, 0)
print(numbers)  # [0, 1, 2, 3, 4, 5, 6]
print(f"Length: {len(numbers)}")`,
          exercises: [
            {
              id: "ex-3.1.1",
              type: "code",
              instruction: "Create a list of 5 colors, add one more, then print all",
              starter: "colors = []\n# Your code here\n",
              solution: `colors = ["red", "blue", "green", "yellow", "purple"]
colors.append("orange")
for color in colors:
    print(color)`,
              hint: "Use append() to add, for loop to print"
            }
          ]
        },
        {
          id: "3.2",
          title: "Dictionaries",
          content: `Dictionaries store key-value pairs.

**Creating Dictionaries:**
\`\`\`python
person = {
    "name": "Alice",
    "age": 30,
    "city": "New York"
}
\`\`\`

**Accessing Values:**
\`\`\`python
person["name"]        # "Alice"
person.get("age")     # 30
person.get("job", "N/A")  # "N/A" (default if key missing)
\`\`\`

**Dictionary Methods:**
- \`keys()\` - Get all keys
- \`values()\` - Get all values
- \`items()\` - Get key-value pairs
- \`update(dict)\` - Merge dictionaries`,
          codeExample: `student = {"name": "Bob", "grade": "A"}
student["age"] = 20
student.update({"major": "CS"})
for key, value in student.items():
    print(f"{key}: {value}")`,
          exercises: [
            {
              id: "ex-3.2.1",
              type: "code",
              instruction: "Create a dictionary for a book with title, author, and year",
              starter: "book = {}\n# Add keys and values\n",
              solution: `book = {
    "title": "Python Basics",
    "author": "John Doe",
    "year": 2024
}
print(f"'{book['title']}' by {book['author']} ({book['year']})")`,
              hint: "Use string keys and appropriate value types"
            }
          ]
        }
      ],
      project: {
        title: "Contact Book",
        description: "Build a digital address book to store and manage contacts",
        requirements: [
          "Add new contacts (name, phone, email)",
          "Search contacts by name",
          "Display all contacts",
          "Delete contacts",
          "Save/load from file (bonus)"
        ],
        starterCode: `contacts = {}

def add_contact(name, phone, email):
    # Implement this
    pass

# Build your menu system`,
        solution: `contacts = {}

def add_contact(name, phone, email):
    contacts[name] = {"phone": phone, "email": email}
    print(f"Added {name}")

def search_contact(name):
    if name in contacts:
        info = contacts[name]
        print(f"Name: {name}, Phone: {info['phone']}, Email: {info['email']}")
    else:
        print("Contact not found")

def display_all():
    for name, info in contacts.items():
        print(f"{name}: {info['phone']}, {info['email']}")

def delete_contact(name):
    if name in contacts:
        del contacts[name]
        print(f"Deleted {name}")
    else:
        print("Contact not found")

while True:
    print("\\n=== Contact Book ===")
    print("1. Add Contact")
    print("2. Search Contact")
    print("3. Display All")
    print("4. Delete Contact")
    print("5. Exit")
    
    choice = input("Choose: ")
    
    if choice == "1":
        name = input("Name: ")
        phone = input("Phone: ")
        email = input("Email: ")
        add_contact(name, phone, email)
    elif choice == "2":
        name = input("Name to search: ")
        search_contact(name)
    elif choice == "3":
        display_all()
    elif choice == "4":
        name = input("Name to delete: ")
        delete_contact(name)
    elif choice == "5":
        break`,
        rubric: {
          functionality: 40,
          codeQuality: 30,
          userExperience: 20,
          errorHandling: 10
        }
      },
      quiz: {
        questions: [
          {
            question: "How do you access the last item in a list?",
            options: ["list[0]", "list[-1]", "list[last]", "list.end()"],
            correct: 1
          },
          {
            question: "What method adds an item to a list?",
            options: ["add()", "insert()", "append()", "push()"],
            correct: 2
          }
        ]
      }
    },
    {
      id: 4,
      title: "Functions & Modules",
      description: "Reusable code and imports",
      icon: "code",
      lessons: [
        {
          id: "4.1",
          title: "Defining Functions",
          content: `Functions are reusable blocks of code.

**Basic Function:**
\`\`\`python
def greet(name):
    return f"Hello, {name}!"

message = greet("Alice")
print(message)  # "Hello, Alice!"
\`\`\`

**Parameters & Return:**
\`\`\`python
def add(a, b):
    return a + b

result = add(5, 3)  # 8
\`\`\`

**Default Parameters:**
\`\`\`python
def greet(name="Guest"):
    return f"Hello, {name}!"
\`\`\``,
          codeExample: `def calculate_area(width, height):
    return width * height

area = calculate_area(5, 10)
print(f"Area: {area}")`,
          exercises: [
            {
              id: "ex-4.1.1",
              type: "code",
              instruction: "Write a function that returns the square of a number",
              starter: "def square(n):\n    # Your code here\n",
              solution: `def square(n):
    return n * n

print(square(5))  # 25`,
              hint: "Multiply n by itself"
            }
          ]
        },
        {
          id: "4.2",
          title: "Modules & Imports",
          content: `Organize code into modules and reuse them.

**Importing Modules:**
\`\`\`python
import math
print(math.sqrt(16))  # 4.0

from math import sqrt, pi
print(sqrt(16))  # 4.0
print(pi)  # 3.14159...

import random as rd
print(rd.randint(1, 10))
\`\`\`

**Common Modules:**
- \`math\` - Mathematical functions
- \`random\` - Random number generation
- \`datetime\` - Date and time
- \`os\` - Operating system functions
- \`json\` - JSON parsing`,
          codeExample: `import random
import math

numbers = [random.randint(1, 100) for _ in range(5)]
print(f"Numbers: {numbers}")
print(f"Average: {sum(numbers)/len(numbers):.2f}")`,
          exercises: [
            {
              id: "ex-4.2.1",
              type: "code",
              instruction: "Use the random module to simulate rolling a die 3 times",
              starter: "import random\n# Roll die 3 times\n",
              solution: `import random

for i in range(3):
    roll = random.randint(1, 6)
    print(f"Roll {i+1}: {roll}")`,
              hint: "Use randint(1, 6) in a loop"
            }
          ]
        }
      ],
      project: {
        title: "Text Utility Library",
        description: "Create a module with useful text manipulation functions",
        requirements: [
          "Function to reverse a string",
          "Function to count vowels",
          "Function to check palindrome",
          "Function to capitalize words",
          "Include docstrings for each function"
        ],
        starterCode: `"""Text Utility Library"""

def reverse_string(text):
    # Implement this
    pass

# Add more functions`,
        solution: `"""Text Utility Library"""

def reverse_string(text):
    """Return the reversed string"""
    return text[::-1]

def count_vowels(text):
    """Count the number of vowels in text"""
    vowels = "aeiouAEIOU"
    return sum(1 for char in text if char in vowels)

def is_palindrome(text):
    """Check if text is a palindrome"""
    cleaned = text.lower().replace(" ", "")
    return cleaned == cleaned[::-1]

def capitalize_words(text):
    """Capitalize first letter of each word"""
    return text.title()

# Test the functions
if __name__ == "__main__":
    print(reverse_string("hello"))  # olleh
    print(count_vowels("beautiful"))  # 5
    print(is_palindrome("A man a plan a canal Panama"))  # True`,
        rubric: {
          functionality: 40,
          codeQuality: 30,
          userExperience: 20,
          errorHandling: 10
        }
      },
      quiz: {
        questions: [
          {
            question: "What keyword defines a function?",
            options: ["function", "def", "func", "define"],
            correct: 1
          },
          {
            question: "How do you import the math module?",
            options: ["include math", "using math", "import math", "require math"],
            correct: 2
          }
        ]
      }
    },
    {
      id: 5,
      title: "Intermediate Python",
      description: "OOP, file I/O, APIs, and libraries",
      icon: "brain",
      lessons: [
        {
          id: "5.1",
          title: "Object-Oriented Programming",
          content: `Classes and objects for organizing code.

**Defining a Class:**
\`\`\`python
class Dog:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    
    def bark(self):
        return f"{self.name} says woof!"

dog = Dog("Buddy", 3)
print(dog.bark())  # "Buddy says woof!"
\`\`\`

**Key Concepts:**
- \`__init__\` - Constructor method
- \`self\` - Reference to instance
- Attributes - Instance variables
- Methods - Functions in class`,
          codeExample: `class Person:
    def __init__(self, name, age):
        self.name = name
        self.age = age
    
    def greet(self):
        return f"Hi, I'm {self.name}"

p = Person("Alice", 30)
print(p.greet())`,
          exercises: [
            {
              id: "ex-5.1.1",
              type: "code",
              instruction: "Create a Rectangle class with area() method",
              starter: "class Rectangle:\n    def __init__(self, width, height):\n        # Your code here\n",
              solution: `class Rectangle:
    def __init__(self, width, height):
        self.width = width
        self.height = height
    
    def area(self):
        return self.width * self.height

rect = Rectangle(5, 10)
print(rect.area())  # 50`,
              hint: "Store width and height, return their product"
            }
          ]
        },
        {
          id: "5.2",
          title: "File I/O",
          content: `Read from and write to files.

**Reading Files:**
\`\`\`python
with open("file.txt", "r") as f:
    content = f.read()
    print(content)
\`\`\`

**Writing Files:**
\`\`\`python
with open("output.txt", "w") as f:
    f.write("Hello, file!")
\`\`\`

**File Modes:**
- \`"r"\` - Read (default)
- \`"w"\` - Write (overwrites)
- \`"a"\` - Append
- \`"r+"\` - Read and write`,
          codeExample: `# Write to file
with open("data.txt", "w") as f:
    f.write("Line 1\\n")
    f.write("Line 2\\n")

# Read from file
with open("data.txt", "r") as f:
    for line in f:
        print(line.strip())`,
          exercises: [
            {
              id: "ex-5.2.1",
              type: "code",
              instruction: "Write a function that saves a list of names to a file",
              starter: "def save_names(names, filename):\n    # Your code here\n",
              solution: `def save_names(names, filename):
    with open(filename, "w") as f:
        for name in names:
            f.write(name + "\\n")

save_names(["Alice", "Bob", "Charlie"], "names.txt")`,
              hint: "Use 'w' mode and write each name with newline"
            }
          ]
        }
      ],
      project: {
        title: "Weather API App",
        description: "Build an app that fetches and displays weather data from an API",
        requirements: [
          "Fetch weather data from API",
          "Parse JSON response",
          "Display temperature, conditions, humidity",
          "Handle errors gracefully",
          "Allow multiple city lookups"
        ],
        starterCode: `import requests

API_KEY = "your_key_here"
BASE_URL = "https://api.openweathermap.org/data/2.5/weather"

def get_weather(city):
    # Implement API call
    pass`,
        solution: `import requests

API_KEY = "demo"  # Use actual key in production
BASE_URL = "https://api.openweathermap.org/data/2.5/weather"

def get_weather(city):
    params = {"q": city, "appid": API_KEY, "units": "metric"}
    response = requests.get(BASE_URL, params=params)
    
    if response.status_code == 200:
        data = response.json()
        return {
            "temp": data["main"]["temp"],
            "feels_like": data["main"]["feels_like"],
            "humidity": data["main"]["humidity"],
            "description": data["weather"][0]["description"]
        }
    else:
        return None

while True:
    city = input("Enter city (or 'quit'): ")
    if city.lower() == "quit":
        break
    
    weather = get_weather(city)
    if weather:
        print(f"\\n{city}:")
        print(f"Temperature: {weather['temp']}°C")
        print(f"Feels like: {weather['feels_like']}°C")
        print(f"Humidity: {weather['humidity']}%")
        print(f"Conditions: {weather['description']}")
    else:
        print("City not found")`,
        rubric: {
          functionality: 40,
          codeQuality: 30,
          userExperience: 20,
          errorHandling: 10
        }
      },
      quiz: {
        questions: [
          {
            question: "What is __init__ in a class?",
            options: ["A variable", "The constructor", "A decorator", "An import"],
            correct: 1
          },
          {
            question: "Which mode opens a file for appending?",
            options: ["r", "w", "a", "x"],
            correct: 2
          }
        ]
      }
    },
    {
      id: 6,
      title: "Advanced Topics & Capstone",
      description: "Error handling, testing, and final project",
      icon: "trophy",
      lessons: [
        {
          id: "6.1",
          title: "Error Handling",
          content: `Handle errors gracefully with try/except.

**Basic Exception Handling:**
\`\`\`python
try:
    result = 10 / 0
except ZeroDivisionError:
    print("Can't divide by zero!")
\`\`\`

**Multiple Exceptions:**
\`\`\`python
try:
    value = int(input("Enter a number: "))
    result = 10 / value
except ValueError:
    print("That's not a number!")
except ZeroDivisionError:
    print("Can't divide by zero!")
\`\`\`

**Finally Block:**
\`\`\`python
try:
    f = open("file.txt")
except:
    print("Error!")
finally:
    f.close()  # Always executes
\`\`\``,
          codeExample: `def safe_divide(a, b):
    try:
        return a / b
    except ZeroDivisionError:
        return "Error: Division by zero"
    except TypeError:
        return "Error: Invalid types"

print(safe_divide(10, 2))  # 5.0
print(safe_divide(10, 0))  # Error message`,
          exercises: [
            {
              id: "ex-6.1.1",
              type: "code",
              instruction: "Write a function that safely converts input to integer",
              starter: "def safe_int(value):\n    # Handle errors\n",
              solution: `def safe_int(value):
    try:
        return int(value)
    except (ValueError, TypeError):
        return None

print(safe_int("42"))    # 42
print(safe_int("abc"))   # None`,
              hint: "Catch ValueError and TypeError"
            }
          ]
        },
        {
          id: "6.2",
          title: "Testing Your Code",
          content: `Write tests to ensure your code works correctly.

**Using assert:**
\`\`\`python
def add(a, b):
    return a + b

assert add(2, 3) == 5
assert add(-1, 1) == 0
print("All tests passed!")
\`\`\`

**unittest Module:**
\`\`\`python
import unittest

class TestMath(unittest.TestCase):
    def test_add(self):
        self.assertEqual(add(2, 3), 5)

if __name__ == "__main__":
    unittest.main()
\`\`\``,
          codeExample: `def multiply(a, b):
    return a * b

# Simple tests
assert multiply(2, 3) == 6
assert multiply(0, 5) == 0
assert multiply(-2, 3) == -6
print("✓ All tests passed!")`,
          exercises: [
            {
              id: "ex-6.2.1",
              type: "code",
              instruction: "Write 3 tests for a function that checks if a number is even",
              starter: "def is_even(n):\n    return n % 2 == 0\n\n# Write tests\n",
              solution: `def is_even(n):
    return n % 2 == 0

# Tests
assert is_even(2) == True
assert is_even(3) == False
assert is_even(0) == True
print("✓ All tests passed!")`,
              hint: "Test even, odd, and zero cases"
            }
          ]
        }
      ],
      project: {
        title: "Capstone Project",
        description: "Build a portfolio-worthy project that demonstrates all your skills",
        requirements: [
          "Use functions and classes",
          "Include file I/O or API integration",
          "Implement error handling",
          "Have a clear user interface",
          "Include documentation",
          "Add tests for core functionality"
        ],
        ideas: [
          "Personal budget tracker with CSV export",
          "Quiz app with score tracking",
          "Task manager with file persistence",
          "API-based news aggregator",
          "Data visualization dashboard"
        ],
        starterCode: `"""
Capstone Project: [Your Project Name]
Author: [Your Name]
Description: [What does it do?]
"""

# Start building your project!`,
        rubric: {
          functionality: 30,
          codeQuality: 25,
          creativity: 20,
          documentation: 15,
          testing: 10
        }
      },
      quiz: {
        questions: [
          {
            question: "What block always executes in try/except?",
            options: ["try", "except", "finally", "else"],
            correct: 2
          },
          {
            question: "Which exception is raised when dividing by zero?",
            options: ["ValueError", "TypeError", "ZeroDivisionError", "RuntimeError"],
            correct: 2
          }
        ]
      }
    }
  ]
};

// ============================================================================
// MAIN APP COMPONENT
// ============================================================================

export default function App() {
  const [activeWeek, setActiveWeek] = useState(1);
  const [activeLesson, setActiveLesson] = useState(null);
  const [completedLessons, setCompletedLessons] = useAppState('completedLessons', []);
  const [completedExercises, setCompletedExercises] = useAppState('completedExercises', []);
  const [completedQuizzes, setCompletedQuizzes] = useAppState('completedQuizzes', []);
  const [showProject, setShowProject] = useState(false);
  const [showQuiz, setShowQuiz] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [codeSolution, setCodeSolution] = useState(null);
  const [quizAnswers, setQuizAnswers] = useState({});
  const [quizSubmitted, setQuizSubmitted] = useState(false);
  const [quizScore, setQuizScore] = useState(null);

  const dispatch = useAction();

  // Calculate progress
  const totalLessons = CURRICULUM.weeks.reduce((sum, week) => sum + week.lessons.length, 0);
  const progressPercent = Math.round((completedLessons.length / totalLessons) * 100);

  // Get current week data
  const currentWeek = CURRICULUM.weeks.find(w => w.id === activeWeek);
  const currentLesson = currentWeek?.lessons.find(l => l.id === activeLesson);

  // Toggle lesson completion
  const toggleLessonComplete = useCallback((lessonId) => {
    setCompletedLessons(prev => 
      prev.includes(lessonId) 
        ? prev.filter(id => id !== lessonId)
        : [...prev, lessonId]
    );
  }, [setCompletedLessons]);

  // Mark exercise complete
  const markExerciseComplete = useCallback((exerciseId) => {
    if (!completedExercises.includes(exerciseId)) {
      setCompletedExercises(prev => [...prev, exerciseId]);
    }
  }, [completedExercises, setCompletedExercises]);

  // Submit quiz
  const submitQuiz = useCallback(() => {
    if (!currentWeek?.quiz) return;
    
    let correct = 0;
    currentWeek.quiz.questions.forEach((q, idx) => {
      if (quizAnswers[idx] === q.correct) correct++;
    });
    
    const score = Math.round((correct / currentWeek.quiz.questions.length) * 100);
    setQuizScore(score);
    setQuizSubmitted(true);
    
    if (score >= 80) {
      if (!completedQuizzes.includes(`week-${activeWeek}`)) {
        setCompletedQuizzes(prev => [...prev, `week-${activeWeek}`]);
      }
    }
  }, [currentWeek, quizAnswers, activeWeek, completedQuizzes, setCompletedQuizzes]);

  // Render code block with syntax highlighting simulation
  const CodeBlock = ({ code, showLineNumbers = true }) => (
    <div className="bg-slate-950 rounded-lg overflow-hidden border border-slate-800">
      <div className="flex items-center gap-2 px-4 py-2 bg-slate-900 border-b border-slate-800">
        <div className="flex gap-1.5">
          <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
          <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
          <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
        </div>
        <span className="text-xs text-slate-400 ml-2">Python</span>
      </div>
      <div className="p-4 overflow-x-auto">
        <pre className="text-sm font-mono">
          <code className="text-slate-300">
            {code.split('\n').map((line, i) => (
              <div key={i} className="flex">
                {showLineNumbers && (
                  <span className="text-slate-600 select-none w-8 text-right pr-4 flex-shrink-0">
                    {i + 1}
                  </span>
                )}
                <span>{line}</span>
              </div>
            ))}
          </code>
        </pre>
      </div>
    </div>
  );

  // Render exercise component
  const ExerciseCard = ({ exercise, onComplete }) => {
    const [userCode, setUserCode] = useState(exercise.starter || '');
    const [selectedAnswer, setSelectedAnswer] = useState(null);
    const [showHint, setShowHint] = useState(false);
    const [showSolution, setShowSolution] = useState(false);
    const isComplete = completedExercises.includes(exercise.id);

    const handleRunCode = () => {
      // Simple validation - in real app would run actual Python
      if (userCode.trim().length > 10) {
        onComplete(exercise.id);
        dispatch('toast', { message: 'Exercise completed!', type: 'success' });
      }
    };

    const handleMCAnswer = (idx) => {
      setSelectedAnswer(idx);
      if (idx === exercise.correct) {
        onComplete(exercise.id);
        dispatch('toast', { message: 'Correct!', type: 'success' });
      } else {
        dispatch('toast', { message: 'Try again!', type: 'error' });
      }
    };

    return (
      <Glass className="p-5 mt-4">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-2">
            <Icon name="code" size={18} className="text-cyan-400" />
            <h4 className="font-semibold text-white">Exercise: {exercise.instruction}</h4>
          </div>
          {isComplete && (
            <Badge label="Complete" variant="positive" />
          )}
        </div>

        {exercise.type === 'code' ? (
          <>
            <textarea
              value={userCode}
              onChange={(e) => setUserCode(e.target.value)}
              className="w-full h-40 bg-slate-950 text-slate-300 font-mono text-sm p-4 rounded-lg border border-slate-700 focus:border-cyan-500 focus:outline-none resize-none"
              placeholder="Write your code here..."
            />
            <div className="flex gap-2 mt-3">
              <button
                onClick={handleRunCode}
                className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg font-medium text-sm flex items-center gap-2 transition-colors"
              >
                <Play size={16} />
                Run Code
              </button>
              <button
                onClick={() => setShowHint(!showHint)}
                className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded-lg font-medium text-sm flex items-center gap-2 transition-colors"
              >
                <Lightbulb size={16} />
                Hint
              </button>
              <button
                onClick={() => setShowSolution(!showSolution)}
                className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded-lg font-medium text-sm flex items-center gap-2 transition-colors"
              >
                Show Solution
              </button>
            </div>
            {showHint && (
              <div className="mt-3 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg text-amber-200 text-sm">
                <strong>Hint:</strong> {exercise.hint}
              </div>
            )}
            {showSolution && (
              <div className="mt-3">
                <CodeBlock code={exercise.solution} />
              </div>
            )}
          </>
        ) : exercise.type === 'multiple-choice' ? (
          <>
            <div className="space-y-2">
              {exercise.options.map((opt, idx) => (
                <button
                  key={idx}
                  onClick={() => handleMCAnswer(idx)}
                  className={`w-full text-left p-3 rounded-lg border transition-colors ${
                    selectedAnswer === idx
                      ? idx === exercise.correct
                        ? 'bg-emerald-500/20 border-emerald-500/50 text-emerald-200'
                        : 'bg-red-500/20 border-red-500/50 text-red-200'
                      : 'bg-slate-800 border-slate-700 hover:border-slate-600 text-slate-300'
                  }`}
                >
                  {opt}
                </button>
              ))}
            </div>
            {selectedAnswer !== null && selectedAnswer !== exercise.correct && exercise.explanation && (
              <div className="mt-3 p-3 bg-slate-800 rounded-lg text-slate-300 text-sm">
                <strong>Explanation:</strong> {exercise.explanation}
              </div>
            )}
          </>
        ) : null}
      </Glass>
    );
  };

  // Render quiz component
  const QuizModal = () => {
    if (!showQuiz || !currentWeek?.quiz) return null;

    return (
      <div 
        className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
        onClick={() => { setShowQuiz(false); setQuizSubmitted(false); setQuizAnswers({}); setQuizScore(null); }}
      >
        <div 
          className="bg-slate-900 rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
          onClick={e => e.stopPropagation()}
        >
          <div className="p-6 border-b border-slate-800">
            <div className="flex items-center justify-between">
              <h2 className="text-xl font-bold text-white flex items-center gap-2">
                <Target size={24} className="text-cyan-400" />
                Week {activeWeek} Quiz
              </h2>
              <button
                onClick={() => { setShowQuiz(false); setQuizSubmitted(false); setQuizAnswers({}); setQuizScore(null); }}
                className="text-slate-400 hover:text-white transition-colors"
              >
                <X size={24} />
              </button>
            </div>
          </div>
          
          <div className="p-6">
            {quizSubmitted ? (
              <div className="text-center py-8">
                <div className={`text-5xl font-bold mb-4 ${quizScore >= 80 ? 'text-emerald-400' : quizScore >= 60 ? 'text-amber-400' : 'text-red-400'}`}>
                  {quizScore}%
                </div>
                <p className="text-slate-300 mb-6">
                  {quizScore >= 80 ? '🎉 Great job! Quiz passed!' : quizScore >= 60 ? 'Good effort! Review and try again.' : 'Keep studying and try again!'}
                </p>
                {quizScore >= 80 && (
                  <Badge label="✓ Quiz Complete" variant="positive" />
                )}
                <button
                  onClick={() => { setShowQuiz(false); setQuizSubmitted(false); setQuizAnswers({}); setQuizScore(null); }}
                  className="mt-6 px-6 py-3 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg font-medium transition-colors"
                >
                  Close
                </button>
              </div>
            ) : (
              <>
                {currentWeek.quiz.questions.map((q, idx) => (
                  <div key={idx} className="mb-6 pb-6 border-b border-slate-800 last:border-0">
                    <p className="text-white font-medium mb-3">
                      <span className="text-cyan-400">Q{idx + 1}:</span> {q.question}
                    </p>
                    <div className="space-y-2">
                      {q.options.map((opt, optIdx) => (
                        <button
                          key={optIdx}
                          onClick={() => setQuizAnswers(prev => ({ ...prev, [idx]: optIdx }))}
                          className={`w-full text-left p-3 rounded-lg border transition-colors ${
                            quizAnswers[idx] === optIdx
                              ? 'bg-cyan-500/20 border-cyan-500/50 text-cyan-200'
                              : 'bg-slate-800 border-slate-700 hover:border-slate-600 text-slate-300'
                          }`}
                        >
                          {opt}
                        </button>
                      ))}
                    </div>
                  </div>
                ))}
                <button
                  onClick={submitQuiz}
                  disabled={Object.keys(quizAnswers).length !== currentWeek.quiz.questions.length}
                  className="w-full py-3 bg-cyan-600 hover:bg-cyan-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded-lg font-medium transition-colors"
                >
                  Submit Quiz
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    );
  };

  // Render project modal
  const ProjectModal = () => {
    if (!showProject || !currentWeek?.project) return null;

    return (
      <div 
        className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
        onClick={() => setShowProject(false)}
      >
        <div 
          className="bg-slate-900 rounded-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto"
          onClick={e => e.stopPropagation()}
        >
          <div className="p-6 border-b border-slate-800 sticky top-0 bg-slate-900">
            <div className="flex items-center justify-between">
              <h2 className="text-xl font-bold text-white flex items-center gap-2">
                <Trophy size={24} className="text-amber-400" />
                {currentWeek.project.title}
              </h2>
              <button
                onClick={() => setShowProject(false)}
                className="text-slate-400 hover:text-white transition-colors"
              >
                <X size={24} />
              </button>
            </div>
          </div>
          
          <div className="p-6">
            <p className="text-slate-300 mb-4">{currentWeek.project.description}</p>
            
            <h3 className="text-white font-semibold mb-2 flex items-center gap-2">
              <Target size={18} className="text-cyan-400" />
              Requirements
            </h3>
            <ul className="space-y-1 mb-6">
              {currentWeek.project.requirements.map((req, idx) => (
                <li key={idx} className="text-slate-300 flex items-start gap-2">
                  <CheckCircle size={16} className="text-emerald-400 mt-0.5 flex-shrink-0" />
                  {req}
                </li>
              ))}
            </ul>

            <h3 className="text-white font-semibold mb-2 flex items-center gap-2">
              <FileCode size={18} className="text-cyan-400" />
              Starter Code
            </h3>
            <div className="mb-6">
              <CodeBlock code={currentWeek.project.starterCode} />
            </div>

            <h3 className="text-white font-semibold mb-2 flex items-center gap-2">
              <Award size={18} className="text-cyan-400" />
              Grading Rubric
            </h3>
            <div className="grid grid-cols-2 gap-3 mb-6">
              {Object.entries(currentWeek.project.rubric).map(([key, value]) => (
                <div key={key} className="bg-slate-800 rounded-lg p-3">
                  <div className="text-slate-400 text-sm capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</div>
                  <div className="text-white font-semibold">{value}%</div>
                </div>
              ))}
            </div>

            <div className="flex gap-2">
              <button
                onClick={() => dispatch('copy', { text: currentWeek.project.starterCode })}
                className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded-lg font-medium text-sm transition-colors"
              >
                Copy Code
              </button>
              <button
                onClick={() => setShowProject(false)}
                className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg font-medium text-sm transition-colors"
              >
                Start Project
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-white">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-[#0a0e1a]/95 backdrop-blur border-b border-white/[0.08]">
        <div className="flex items-center justify-between px-4 py-3">
          <div className="flex items-center gap-3">
            <button
              onClick={() => setSidebarOpen(!sidebarOpen)}
              className="p-2 hover:bg-white/[0.08] rounded-lg transition-colors lg:hidden"
            >
              {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
            </button>
            <div className="flex items-center gap-2">
              <Terminal size={24} className="text-cyan-400" />
              <h1 className="text-xl font-bold">Python Bootcamp</h1>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <div className="hidden md:flex items-center gap-2">
              <Clock size={16} className="text-slate-400" />
              <span className="text-sm text-slate-400">6 Weeks</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-32 h-2 bg-slate-800 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-cyan-500 to-emerald-500 transition-all duration-500"
                  style={{ width: `${progressPercent}%` }}
                />
              </div>
              <span className="text-sm font-medium text-cyan-400">{progressPercent}%</span>
            </div>
          </div>
        </div>
      </header>

      <div className="flex">
        {/* Sidebar */}
        <aside className={`fixed lg:sticky top-[61px] left-0 h-[calc(100vh-61px)] w-72 bg-[#0a0e1a] border-r border-white/[0.08] overflow-y-auto transition-transform duration-300 z-30 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
          <div className="p-4">
            <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Course Content</h2>
            <nav className="space-y-1">
              {CURRICULUM.weeks.map((week) => {
                const weekLessonsComplete = week.lessons.filter(l => completedLessons.includes(l.id)).length;
                const weekProgress = Math.round((weekLessonsComplete / week.lessons.length) * 100);
                const isActive = activeWeek === week.id;
                
                return (
                  <div key={week.id}>
                    <button
                      onClick={() => {
                        setActiveWeek(week.id);
                        setActiveLesson(week.lessons[0].id);
                        setShowProject(false);
                        setShowQuiz(false);
                      }}
                      className={`w-full text-left p-3 rounded-lg transition-colors ${
                        isActive ? 'bg-cyan-500/10 border border-cyan-500/30' : 'hover:bg-white/[0.05]'
                      }`}
                    >
                      <div className="flex items-center gap-2 mb-2">
                        <Icon name={week.icon} size={18} className={isActive ? 'text-cyan-400' : 'text-slate-400'} />
                        <span className={`font-medium ${isActive ? 'text-white' : 'text-slate-300'}`}>
                          Week {week.id}
                        </span>
                      </div>
                      <div className="text-sm text-slate-400 mb-2">{week.title}</div>
                      <div className="flex items-center gap-2">
                        <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                          <div 
                            className={`h-full transition-all duration-300 ${weekProgress === 100 ? 'bg-emerald-500' : 'bg-cyan-500'}`}
                            style={{ width: `${weekProgress}%` }}
                          />
                        </div>
                        <span className="text-xs text-slate-500">{weekProgress}%</span>
                      </div>
                    </button>
                    
                    {isActive && (
                      <div className="ml-6 mt-2 space-y-1 border-l border-slate-800 pl-3">
                        {week.lessons.map((lesson) => {
                          const isComplete = completedLessons.includes(lesson.id);
                          const isCurrent = activeLesson === lesson.id;
                          
                          return (
                            <button
                              key={lesson.id}
                              onClick={() => setActiveLesson(lesson.id)}
                              className={`w-full text-left py-2 px-2 rounded text-sm transition-colors ${
                                isCurrent 
                                  ? 'text-cyan-400 bg-cyan-500/10' 
                                  : isComplete 
                                    ? 'text-emerald-400' 
                                    : 'text-slate-400 hover:text-slate-300'
                              }`}
                            >
                              <div className="flex items-center gap-2">
                                {isComplete ? (
                                  <CheckCircle size={14} className="text-emerald-400" />
                                ) : (
                                  <div className="w-3.5 h-3.5 rounded-full border-2 border-slate-600" />
                                )}
                                {lesson.title}
                              </div>
                            </button>
                          );
                        })}
                        
                        <button
                          onClick={() => setShowProject(true)}
                          className="w-full text-left py-2 px-2 rounded text-sm text-amber-400 hover:bg-amber-500/10 transition-colors flex items-center gap-2"
                        >
                          <Trophy size={14} />
                          Week {week.id} Project
                        </button>
                        
                        <button
                          onClick={() => setShowQuiz(true)}
                          className={`w-full text-left py-2 px-2 rounded text-sm transition-colors flex items-center gap-2 ${
                            completedQuizzes.includes(`week-${week.id}`) 
                              ? 'text-emerald-400' 
                              : 'text-slate-400 hover:text-slate-300'
                          }`}
                        >
                          <Target size={14} />
                          Quiz {completedQuizzes.includes(`week-${week.id}`) && '✓'}
                        </button>
                      </div>
                    )}
                  </div>
                );
              })}
            </nav>
          </div>
        </aside>

        {/* Main Content */}
        <main className="flex-1 min-w-0">
          {currentLesson ? (
            <div className="p-6 max-w-4xl">
              {/* Lesson Header */}
              <div className="mb-6">
                <div className="flex items-center gap-2 text-sm text-slate-400 mb-2">
                  <span>Week {activeWeek}</span>
                  <ChevronRight size={14} />
                  <span>{currentLesson.id}</span>
                </div>
                <h1 className="text-2xl font-bold text-white mb-3">{currentLesson.title}</h1>
                <div className="flex items-center gap-3">
                  <button
                    onClick={() => toggleLessonComplete(currentLesson.id)}
                    className={`px-3 py-1.5 rounded-lg font-medium text-sm flex items-center gap-2 transition-colors ${
                      completedLessons.includes(currentLesson.id)
                        ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
                        : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
                    }`}
                  >
                    {completedLessons.includes(currentLesson.id) ? (
                      <>
                        <CheckCircle size={16} />
                        Completed
                      </>
                    ) : (
                      <>
                        <div className="w-4 h-4 rounded-full border-2 border-slate-500" />
                        Mark Complete
                      </>
                    )}
                  </button>
                  <Badge label={`Lesson ${currentLesson.id}`} variant="neutral" />
                </div>
              </div>

              {/* Lesson Content */}
              <Glass className="p-6 mb-6">
                <div className="prose prose-invert max-w-none">
                  {currentLesson.content.split('\n').map((paragraph, idx) => {
                    if (paragraph.startsWith('**') && paragraph.endsWith('**')) {
                      return <h3 key={idx} className="text-lg font-semibold text-white mt-4 mb-2">{paragraph.replace(/\*\*/g, '')}</h3>;
                    }
                    if (paragraph.startsWith('```')) {
                      return null;
                    }
                    if (paragraph.startsWith('- ')) {
                      return (
                        <li key={idx} className="text-slate-300 ml-4">
                          {paragraph.replace(/`([^`]+)`/g, '<code class="bg-slate-800 px-1.5 py-0.5 rounded text-cyan-300 text-sm">$1</code>').replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')}
                        </li>
                      );
                    }
                    return (
                      <p key={idx} className="text-slate-300 leading-relaxed mb-3" 
                        dangerouslySetInnerHTML={{
                          __html: paragraph
                            .replace(/`([^`]+)`/g, '<code class="bg-slate-800 px-1.5 py-0.5 rounded text-cyan-300 text-sm">$1</code>')
                            .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
                        }}
                      />
                    );
                  })}
                </div>
              </Glass>

              {/* Code Example */}
              {currentLesson.codeExample && (
                <div className="mb-6">
                  <h3 className="text-white font-semibold mb-3 flex items-center gap-2">
                    <Code size={18} className="text-cyan-400" />
                    Example
                  </h3>
                  <CodeBlock code={currentLesson.codeExample} />
                </div>
              )}

              {/* Exercises */}
              {currentLesson.exercises && currentLesson.exercises.length > 0 && (
                <div className="mb-6">
                  <h3 className="text-white font-semibold mb-3 flex items-center gap-2">
                    <Brain size={18} className="text-cyan-400" />
                    Practice Exercises
                  </h3>
                  {currentLesson.exercises.map((exercise) => (
                    <ExerciseCard 
                      key={exercise.id} 
                      exercise={exercise} 
                      onComplete={markExerciseComplete}
                    />
                  ))}
                </div>
              )}

              {/* Navigation */}
              <div className="flex justify-between mt-8 pt-6 border-t border-white/[0.08]">
                {activeWeek > 1 || (activeLesson && currentWeek.lessons.indexOf(currentLesson) > 0) ? (
                  <button
                    onClick={() => {
                      const lessonIdx = currentWeek.lessons.indexOf(currentLesson);
                      if (lessonIdx > 0) {
                        setActiveLesson(currentWeek.lessons[lessonIdx - 1].id);
                      } else if (activeWeek > 1) {
                        const prevWeek = CURRICULUM.weeks.find(w => w.id === activeWeek - 1);
                        setActiveWeek(activeWeek - 1);
                        setActiveLesson(prevWeek.lessons[prevWeek.lessons.length - 1].id);
                      }
                    }}
                    className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg font-medium flex items-center gap-2 transition-colors"
                  >
                    <ChevronLeft size={18} />
                    Previous Lesson
                  </button>
                ) : <div />}
                
                {(activeLesson && currentWeek.lessons.indexOf(currentLesson) < currentWeek.lessons.length - 1) || activeWeek < 6 ? (
                  <button
                    onClick={() => {
                      const lessonIdx = currentWeek.lessons.indexOf(currentLesson);
                      if (lessonIdx < currentWeek.lessons.length - 1) {
                        setActiveLesson(currentWeek.lessons[lessonIdx + 1].id);
                      } else if (activeWeek < 6) {
                        const nextWeek = CURRICULUM.weeks.find(w => w.id === activeWeek + 1);
                        setActiveWeek(activeWeek + 1);
                        setActiveLesson(nextWeek.lessons[0].id);
                      }
                    }}
                    className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg font-medium flex items-center gap-2 transition-colors"
                  >
                    Next Lesson
                    <ChevronRight size={18} />
                  </button>
                ) : null}
              </div>
            </div>
          ) : (
            <div className="p-6">
              <div className="text-center py-12">
                <BookOpen size={48} className="text-slate-600 mx-auto mb-4" />
                <h2 className="text-xl font-semibold text-slate-400">Select a lesson to begin</h2>
                <p className="text-slate-500 mt-2">Choose a week from the sidebar to get started</p>
              </div>
            </div>
          )}
        </main>
      </div>

      {/* Modals */}
      <ProjectModal />
      <QuizModal />
    </div>
  );
}