Collapse lesson timelines by default for cleaner UX

Changed timeline accordion behavior to keep all lesson chapters collapsed on page load. This prevents overwhelming users with too much content when viewing bootcamp curriculum previews.

## Before:
- All lesson timelines expanded by default
- 3 lessons × 8 chapters = 24+ items visible (~1500px+ scroll)
- Overwhelming visual clutter on product detail pages

## After:
- All timelines collapsed by default
- Shows "N timeline items" hint for each lesson
- Users can expand individual lessons they're interested in
- Cleaner, more professional appearance
- Better for conversion - product details remain prominent

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/ProductDetail.tsx

@@ -140,12 +140,8 @@ export default function ProductDetail() {
         setExpandedModules(new Set([sorted[0].id]));
       }
 
-      // Expand all lessons with chapters by default
-      const lessonsWithChapters = sorted
-        .flatMap(m => m.lessons)
-        .filter(l => l.chapters && l.chapters.length > 0)
-        .map(l => l.id);
-      setExpandedLessonChapters(new Set(lessonsWithChapters));
+      // Keep all lesson timelines collapsed by default for cleaner UX
+      setExpandedLessonChapters(new Set());
     }
   };
 
@@ -448,7 +444,7 @@ export default function ProductDetail() {
                             open={expandedLessonChapters.has(lesson.id)}
                             onOpenChange={() => toggleLessonChapters(lesson.id)}
                           >
-                            <CollapsibleTrigger className="flex items-center gap-2 ml-5 py-1 px-2 text-xs text-muted-foreground hover:bg-accent rounded transition-colors w-full">
+                            <CollapsibleTrigger className="flex items-center gap-2 ml-5 mb-2 py-1 px-2 text-xs bg-muted text-muted-foreground hover:bg-accent rounded transition-colors w-full">
                               <Clock className="w-3 h-3" />
                               <span className="flex-1 text-left">
                                 {lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''}