Refactor: DemoSection with split sticky scrolling

- Desktop: Phone mockup stays fixed while feature cards scroll
- Intersection Observer triggers phone screen transitions
- Crossfade animations between phone screens
- Mobile: Preserves original timer-based rotation
- Fixed overflow-hidden breaking sticky positioning

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

src/components/landing/DemoSection.tsx

@@ -1,13 +1,29 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { Cigarette, Leaf, Heart, Trophy, DollarSign, TrendingDown, CheckCircle } from 'lucide-react';
+import { useState, useEffect, useRef, type ReactNode } from 'react';
+import { Cigarette, Leaf, Heart, Trophy, DollarSign, TrendingDown, CheckCircle, type LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
-const DEMO_SCREENS = [
+interface DemoScreen {
+  id: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  Icon: LucideIcon;
+  iconBg: string;
+  iconColor: string;
+  content: ReactNode;
+}
+
+const DEMO_SCREENS: DemoScreen[] = [
   {
     id: 'logging',
     title: 'Log Your Usage',
     subtitle: 'Track daily consumption with ease',
+    description: 'Quick tap or scroll to log your nicotine and marijuana use. See real-time trends and weekly comparisons to stay motivated on your journey.',
+    Icon: Cigarette,
+    iconBg: 'bg-gradient-to-br from-red-500/20 to-orange-500/20',
+    iconColor: 'text-red-400',
     content: (
       <div className="space-y-4">
         <div className="flex justify-between items-center p-3 rounded-xl bg-white/5 border border-white/10">
@@ -39,6 +55,10 @@ const DEMO_SCREENS = [
     id: 'health',
     title: 'Health Recovery',
     subtitle: 'Watch your body heal',
+    description: 'Track your health milestones from the first 20 minutes to years of recovery. See real-time progress as your body repairs itself.',
+    Icon: Heart,
+    iconBg: 'bg-gradient-to-br from-teal-500/20 to-cyan-500/20',
+    iconColor: 'text-teal-400',
     content: (
       <div className="space-y-3">
         <div className="space-y-1">
@@ -84,6 +104,10 @@ const DEMO_SCREENS = [
     id: 'achievements',
     title: 'Achievements',
     subtitle: 'Celebrate every milestone',
+    description: 'Unlock badges as you reach new goals. From your First Step to becoming a Monthly Master, every achievement is worth celebrating.',
+    Icon: Trophy,
+    iconBg: 'bg-gradient-to-br from-yellow-500/20 to-amber-500/20',
+    iconColor: 'text-yellow-400',
     content: (
       <div className="grid grid-cols-3 gap-2">
         {[
@@ -115,6 +139,10 @@ const DEMO_SCREENS = [
     id: 'savings',
     title: 'Money Saved',
     subtitle: 'Track your financial wins',
+    description: 'See exactly how much money you save by cutting back. Watch your savings grow daily and set goals for what to do with your extra cash.',
+    Icon: DollarSign,
+    iconBg: 'bg-gradient-to-br from-emerald-500/20 to-green-500/20',
+    iconColor: 'text-emerald-400',
     content: (
       <div className="text-center space-y-4">
         <div className="w-16 h-16 rounded-2xl bg-emerald-500/20 flex items-center justify-center mx-auto">
@@ -139,13 +167,92 @@ const DEMO_SCREENS = [
   },
 ];
 
+// Phone mockup component
+function PhoneMockup({ activeScreen }: { activeScreen: number }) {
+  return (
+    <div className="relative">
+      {/* Phone frame glow */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-purple-500/30 rounded-[3rem] blur-2xl opacity-50" />
+
+      {/* Phone frame */}
+      <div className="relative w-[280px] sm:w-[320px] aspect-[9/16] rounded-[2.5rem] overflow-hidden border-4 border-white/10 bg-background shadow-2xl shadow-black/30">
+        {/* Notch */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-black rounded-b-2xl z-20" />
+
+        {/* Screen content with crossfade */}
+        <div className="absolute inset-0 p-4 pt-10">
+          {/* Screen header */}
+          <div className="text-center mb-4">
+            <h3 className="text-lg font-bold">{DEMO_SCREENS[activeScreen].title}</h3>
+            <p className="text-xs text-muted-foreground">
+              {DEMO_SCREENS[activeScreen].subtitle}
+            </p>
+          </div>
+
+          {/* Crossfade content */}
+          <div className="relative h-[calc(100%-5rem)]">
+            {DEMO_SCREENS.map((screen, index) => (
+              <div
+                key={screen.id}
+                className={cn(
+                  "absolute inset-0 transition-opacity duration-500 motion-reduce:transition-none",
+                  activeScreen === index ? "opacity-100 z-10" : "opacity-0 z-0"
+                )}
+              >
+                {screen.content}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Bottom gradient overlay */}
+        <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-background to-transparent pointer-events-none" />
+      </div>
+    </div>
+  );
+}
+
+// Feature description card for scroll sections
+function FeatureCard({ screen, isActive }: { screen: DemoScreen; isActive: boolean }) {
+  const Icon = screen.Icon;
+
+  return (
+    <div
+      className={cn(
+        "p-6 sm:p-8 rounded-2xl transition-all duration-500 motion-reduce:transition-none",
+        isActive
+          ? "bg-primary/10 border border-primary/30 scale-100 opacity-100"
+          : "bg-white/5 border border-white/10 scale-[0.98] opacity-60"
+      )}
+    >
+      <div className="flex items-start gap-4">
+        <div className={cn(
+          "w-12 h-12 rounded-xl flex items-center justify-center shrink-0",
+          screen.iconBg
+        )}>
+          <Icon className={cn("h-6 w-6", screen.iconColor)} />
+        </div>
+        <div className="flex-1">
+          <h3 className="text-xl font-bold mb-2">{screen.title}</h3>
+          <p className="text-muted-foreground leading-relaxed">
+            {screen.description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function DemoSection() {
   const [activeScreen, setActiveScreen] = useState(0);
   const [isPaused, setIsPaused] = useState(false);
+  const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
 
+  // Timer-based rotation for mobile
   useEffect(() => {
     if (isPaused) return;
 
+    // Only run timer on mobile (will be hidden on lg+)
     const interval = setInterval(() => {
       setActiveScreen((prev) => (prev + 1) % DEMO_SCREENS.length);
     }, 4000);
@@ -153,19 +260,51 @@ export function DemoSection() {
     return () => clearInterval(interval);
   }, [isPaused]);
 
+  // Intersection Observer for desktop scroll spy
+  useEffect(() => {
+    const observers: IntersectionObserver[] = [];
+
+    sectionRefs.current.forEach((ref, index) => {
+      if (!ref) return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              setActiveScreen(index);
+            }
+          });
+        },
+        {
+          threshold: 0.5,
+          rootMargin: '-20% 0px -30% 0px',
+        }
+      );
+
+      observer.observe(ref);
+      observers.push(observer);
+    });
+
+    return () => {
+      observers.forEach((observer) => observer.disconnect());
+    };
+  }, []);
+
   return (
     <section
       id="demo"
       aria-labelledby="demo-heading"
-      className="py-20 px-4 relative overflow-hidden"
+      className="relative"
     >
-      {/* Background accents */}
-      <div className="absolute top-1/2 left-0 w-96 h-96 bg-primary/10 rounded-full blur-[120px] -translate-y-1/2 pointer-events-none" />
-      <div className="absolute top-1/2 right-0 w-96 h-96 bg-purple-500/10 rounded-full blur-[120px] -translate-y-1/2 pointer-events-none" />
+      {/* Background accents - contained to avoid overflow issues */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/2 left-0 w-96 h-96 bg-primary/10 rounded-full blur-[120px] -translate-y-1/2" />
+        <div className="absolute top-1/2 right-0 w-96 h-96 bg-purple-500/10 rounded-full blur-[120px] -translate-y-1/2" />
+      </div>
 
-      <div className="container mx-auto max-w-6xl relative z-10">
+      <div className="container mx-auto max-w-6xl relative z-10 px-4">
         {/* Section Header */}
-        <div className="text-center mb-12">
+        <div className="text-center py-20">
           <h2
             id="demo-heading"
             className="text-3xl sm:text-4xl font-bold mb-4"
@@ -180,84 +319,89 @@ export function DemoSection() {
           </p>
         </div>
 
-        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
-          {/* Phone Mockup */}
-          <div
-            className="relative mx-auto lg:mx-0"
-            onMouseEnter={() => setIsPaused(true)}
-            onMouseLeave={() => setIsPaused(false)}
-            onTouchStart={() => setIsPaused(true)}
-            onTouchEnd={() => setIsPaused(false)}
-          >
-            {/* Phone frame glow */}
-            <div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-purple-500/30 rounded-[3rem] blur-2xl opacity-50" />
-
-            {/* Phone frame */}
-            <div className="relative w-[280px] sm:w-[320px] aspect-[9/16] rounded-[2.5rem] overflow-hidden border-4 border-white/10 bg-background shadow-2xl shadow-black/30">
-              {/* Notch */}
-              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-black rounded-b-2xl z-20" />
-
-              {/* Screen content */}
-              <div className="absolute inset-0 p-4 pt-10">
-                {/* Screen header */}
-                <div className="text-center mb-4">
-                  <h3 className="text-lg font-bold">{DEMO_SCREENS[activeScreen].title}</h3>
-                  <p className="text-xs text-muted-foreground">
-                    {DEMO_SCREENS[activeScreen].subtitle}
-                  </p>
-                </div>
-
-                {/* Screen content with transition */}
-                <div className="animate-fade-in" key={activeScreen}>
-                  {DEMO_SCREENS[activeScreen].content}
-                </div>
-              </div>
-
-              {/* Bottom gradient overlay */}
-              <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-background to-transparent pointer-events-none" />
-            </div>
+        {/* Desktop: Split Sticky Scroll Layout */}
+        <div className="hidden lg:flex lg:gap-16 lg:items-start">
+          {/* Sticky Phone Column */}
+          <div className="w-1/2 sticky top-24 flex items-center justify-center py-8">
+            <PhoneMockup activeScreen={activeScreen} />
           </div>
 
-          {/* Description and indicators */}
-          <div className="flex-1 text-center lg:text-left">
-            <div className="space-y-6">
-              {/* Screen descriptions */}
-              {DEMO_SCREENS.map((screen, index) => (
-                <button
-                  key={screen.id}
-                  onClick={() => setActiveScreen(index)}
-                  className={`w-full text-left p-4 rounded-xl transition-all duration-300 ${
-                    activeScreen === index
-                      ? 'bg-primary/10 border border-primary/30'
-                      : 'hover:bg-white/5 border border-transparent'
-                  }`}
-                >
-                  <h4
-                    className={`font-semibold mb-1 ${
-                      activeScreen === index ? 'text-primary' : 'text-foreground'
-                    }`}
-                  >
-                    {screen.title}
-                  </h4>
-                  <p className="text-sm text-muted-foreground">{screen.subtitle}</p>
-                </button>
-              ))}
+          {/* Scrolling Content Column */}
+          <div className="w-1/2">
+            {DEMO_SCREENS.map((screen, index) => (
+              <div
+                key={screen.id}
+                ref={(el) => { sectionRefs.current[index] = el; }}
+                className={cn(
+                  "min-h-[70vh] flex items-center py-8",
+                  index === 0 && "pt-0",
+                  index === DEMO_SCREENS.length - 1 && "min-h-[50vh]"
+                )}
+              >
+                <FeatureCard screen={screen} isActive={activeScreen === index} />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Mobile: Original Stacked Layout with Timer */}
+        <div className="lg:hidden pb-20">
+          <div className="flex flex-col items-center gap-12">
+            {/* Phone Mockup */}
+            <div
+              className="relative"
+              onMouseEnter={() => setIsPaused(true)}
+              onMouseLeave={() => setIsPaused(false)}
+              onTouchStart={() => setIsPaused(true)}
+              onTouchEnd={() => setIsPaused(false)}
+            >
+              <PhoneMockup activeScreen={activeScreen} />
             </div>
 
-            {/* Dot indicators (mobile) */}
-            <div className="flex justify-center gap-2 mt-6 lg:hidden">
-              {DEMO_SCREENS.map((_, index) => (
-                <button
-                  key={index}
-                  onClick={() => setActiveScreen(index)}
-                  className={`w-2 h-2 rounded-full transition-all ${
-                    activeScreen === index
-                      ? 'w-6 bg-primary'
-                      : 'bg-white/20 hover:bg-white/40'
-                  }`}
-                  aria-label={`Go to screen ${index + 1}`}
-                />
-              ))}
+            {/* Description and indicators */}
+            <div className="w-full max-w-md text-center">
+              <div className="space-y-4">
+                {/* Screen descriptions as buttons */}
+                {DEMO_SCREENS.map((screen, index) => (
+                  <button
+                    key={screen.id}
+                    onClick={() => setActiveScreen(index)}
+                    className={cn(
+                      "w-full text-left p-4 rounded-xl transition-all duration-300",
+                      activeScreen === index
+                        ? "bg-primary/10 border border-primary/30"
+                        : "hover:bg-white/5 border border-transparent"
+                    )}
+                  >
+                    <h4
+                      className={cn(
+                        "font-semibold mb-1",
+                        activeScreen === index ? "text-primary" : "text-foreground"
+                      )}
+                    >
+                      {screen.title}
+                    </h4>
+                    <p className="text-sm text-muted-foreground">{screen.subtitle}</p>
+                  </button>
+                ))}
+              </div>
+
+              {/* Dot indicators */}
+              <div className="flex justify-center gap-2 mt-6">
+                {DEMO_SCREENS.map((_, index) => (
+                  <button
+                    key={index}
+                    onClick={() => setActiveScreen(index)}
+                    className={cn(
+                      "w-2 h-2 rounded-full transition-all",
+                      activeScreen === index
+                        ? "w-6 bg-primary"
+                        : "bg-white/20 hover:bg-white/40"
+                    )}
+                    aria-label={`Go to screen ${index + 1}`}
+                  />
+                ))}
+              </div>
             </div>
           </div>
         </div>