From 308257d50091916df00b662ab996538f06fe24db Mon Sep 17 00:00:00 2001
From: Gabino Ocotl <Gabinoocotla123@gmail.com>
Date: Wed, 9 Jul 2025 23:35:53 -0500
Subject: [PATCH] completed phase 6 and made the results screen more intuitive

---
 apps/mobile/src/components/CoachingCards.tsx  | 439 ++++++++++++++++++
 apps/mobile/src/components/SentimentMeter.tsx | 121 +++++
 .../src/components/TranscriptDisplay.tsx      |  65 ++-
 apps/mobile/src/context/AppContext.tsx        |  11 +-
 apps/mobile/src/screens/ResultsScreen.tsx     | 236 +---------
 5 files changed, 643 insertions(+), 229 deletions(-)
 create mode 100644 apps/mobile/src/components/CoachingCards.tsx

diff --git a/apps/mobile/src/components/CoachingCards.tsx b/apps/mobile/src/components/CoachingCards.tsx
new file mode 100644
index 0000000..11b7dc6
--- /dev/null
+++ b/apps/mobile/src/components/CoachingCards.tsx
@@ -0,0 +1,439 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Linking,
+  Alert,
+} from 'react-native';
+import { Button } from './ui/Button';
+import { Card } from './ui/Card';
+import { colors } from '../constants/Colors';
+import { typography } from '../constants/Typography';
+import { spacing, borderRadius } from '../constants/Layout';
+import { CheckinResponse } from '../services/api';
+
+// Types for coaching data
+type CoachingData = CheckinResponse['coaching'];
+type ResourceCategory = 'counseling' | 'meditation' | 'emergency';
+
+interface CoachingCardsProps {
+  coaching: CoachingData;
+  sentimentScore?: number;
+}
+
+interface BreathingExerciseCardProps {
+  exercise: CoachingData['breathingExercise'];
+  sentimentScore?: number;
+}
+
+interface StretchExerciseCardProps {
+  exercise: CoachingData['stretchExercise'];
+}
+
+interface ResourcesCardProps {
+  resources: CoachingData['resources'];
+}
+
+// Resource category styling
+const getCategoryStyles = (category: ResourceCategory) => {
+  switch (category) {
+    case 'emergency':
+      return {
+        backgroundColor: colors.error + '15',
+        borderColor: colors.error,
+        iconColor: colors.error,
+        icon: '🚨',
+      };
+    case 'counseling':
+      return {
+        backgroundColor: colors.primary + '15',
+        borderColor: colors.primary,
+        iconColor: colors.primary,
+        icon: '💬',
+      };
+    case 'meditation':
+      return {
+        backgroundColor: colors.success + '15',
+        borderColor: colors.success,
+        iconColor: colors.success,
+        icon: '🧘',
+      };
+    default:
+      return {
+        backgroundColor: colors.surfaceLight,
+        borderColor: colors.border,
+        iconColor: colors.text,
+        icon: '📋',
+      };
+  }
+};
+
+// Breathing Exercise Card with Enhanced Timer
+export function BreathingExerciseCard({
+  exercise,
+  sentimentScore,
+}: BreathingExerciseCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+
+  // Get sentiment-specific messaging
+  const getSentimentMessage = (score?: number) => {
+    if (!score) return 'Take a moment to focus on your breathing';
+    if (score < 0.4) return "Let's calm your mind with guided breathing";
+    if (score < 0.7) return 'Center yourself with mindful breathing';
+    return 'Energize your positive mood with rhythmic breathing';
+  };
+
+  const startExercise = () => {
+    setIsActive(true);
+    setIsExpanded(true);
+  };
+
+  return (
+    <Card variant="elevated" padding="lg" style={styles.exerciseCard}>
+      <TouchableOpacity
+        onPress={() => setIsExpanded(!isExpanded)}
+        style={styles.cardHeader}
+      >
+        <View style={styles.headerContent}>
+          <Text style={styles.cardIcon}>💨</Text>
+          <View style={styles.headerText}>
+            <Text style={styles.cardTitle}>{exercise.title}</Text>
+            <Text style={styles.cardSubtitle}>
+              {getSentimentMessage(sentimentScore)}
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+      </TouchableOpacity>
+
+      {isExpanded && (
+        <View style={styles.expandedContent}>
+          <Text style={styles.durationText}>
+            Duration: {Math.floor(exercise.duration / 60)}:
+            {(exercise.duration % 60).toString().padStart(2, '0')} minutes
+          </Text>
+
+          <View style={styles.instructionsContainer}>
+            {exercise.instructions.map((instruction, index) => (
+              <View key={index} style={styles.instructionItem}>
+                <Text style={styles.instructionNumber}>{index + 1}</Text>
+                <Text style={styles.instructionText}>{instruction}</Text>
+              </View>
+            ))}
+          </View>
+
+          <Button
+            title={isActive ? 'Continue Breathing' : 'Start Exercise'}
+            onPress={startExercise}
+            variant="primary"
+            style={styles.exerciseButton}
+          />
+        </View>
+      )}
+    </Card>
+  );
+}
+
+// Stretch Exercise Card
+export function StretchExerciseCard({ exercise }: StretchExerciseCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <Card variant="elevated" padding="lg" style={styles.exerciseCard}>
+      <TouchableOpacity
+        onPress={() => setIsExpanded(!isExpanded)}
+        style={styles.cardHeader}
+      >
+        <View style={styles.headerContent}>
+          <Text style={styles.cardIcon}>🤸</Text>
+          <View style={styles.headerText}>
+            <Text style={styles.cardTitle}>{exercise.title}</Text>
+            <Text style={styles.cardSubtitle}>
+              Gentle stretches to release tension
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+      </TouchableOpacity>
+
+      {isExpanded && (
+        <View style={styles.expandedContent}>
+          <View style={styles.instructionsContainer}>
+            {exercise.instructions.map((instruction, index) => (
+              <View key={index} style={styles.instructionItem}>
+                <Text style={styles.instructionNumber}>{index + 1}</Text>
+                <Text style={styles.instructionText}>{instruction}</Text>
+              </View>
+            ))}
+          </View>
+
+          {exercise.imageUrl && (
+            <Text style={styles.imageNote}>
+              💡 Visual guide available in the full app
+            </Text>
+          )}
+
+          <Button
+            title="Start Stretching"
+            onPress={() =>
+              Alert.alert(
+                'Stretch Guide',
+                'Follow the steps above at your own pace. Take deep breaths throughout each stretch.'
+              )
+            }
+            variant="outline"
+            style={styles.exerciseButton}
+          />
+        </View>
+      )}
+    </Card>
+  );
+}
+
+// Resources Card with Categorized Links
+export function ResourcesCard({ resources }: ResourcesCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleResourcePress = async (url: string, title: string) => {
+    try {
+      const canOpen = await Linking.canOpenURL(url);
+      if (canOpen) {
+        await Linking.openURL(url);
+      } else {
+        Alert.alert(
+          'Cannot Open Link',
+          `Unable to open ${title}. Please visit: ${url}`,
+          [{ text: 'OK' }]
+        );
+      }
+    } catch (error) {
+      Alert.alert('Error', `Failed to open ${title}. Please visit: ${url}`, [
+        { text: 'OK' },
+      ]);
+    }
+  };
+
+  // Group resources by category
+  const groupedResources = resources.reduce(
+    (acc, resource) => {
+      const category = resource.category || 'other';
+      if (!acc[category]) acc[category] = [];
+      acc[category].push(resource);
+      return acc;
+    },
+    {} as Record<string, typeof resources>
+  );
+
+  // Sort categories by priority
+  const categoryOrder: ResourceCategory[] = [
+    'emergency',
+    'counseling',
+    'meditation',
+  ];
+  const sortedCategories = categoryOrder.filter(cat => groupedResources[cat]);
+
+  return (
+    <Card variant="outlined" padding="lg" style={styles.resourcesCard}>
+      <TouchableOpacity
+        onPress={() => setIsExpanded(!isExpanded)}
+        style={styles.cardHeader}
+      >
+        <View style={styles.headerContent}>
+          <Text style={styles.cardIcon}>📞</Text>
+          <View style={styles.headerText}>
+            <Text style={styles.cardTitle}>Support Resources</Text>
+            <Text style={styles.cardSubtitle}>
+              {resources.length} resource{resources.length !== 1 ? 's' : ''}{' '}
+              available
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+      </TouchableOpacity>
+
+      {isExpanded && (
+        <View style={styles.expandedContent}>
+          {sortedCategories.map(category => {
+            const categoryStyles = getCategoryStyles(category);
+            return (
+              <View key={category} style={styles.categorySection}>
+                <Text
+                  style={[
+                    styles.categoryTitle,
+                    { color: categoryStyles.iconColor },
+                  ]}
+                >
+                  {categoryStyles.icon}{' '}
+                  {category.charAt(0).toUpperCase() + category.slice(1)}
+                </Text>
+                {groupedResources[category].map((resource, index) => (
+                  <TouchableOpacity
+                    key={index}
+                    style={[
+                      styles.resourceItem,
+                      {
+                        backgroundColor: categoryStyles.backgroundColor,
+                        borderColor: categoryStyles.borderColor,
+                      },
+                    ]}
+                    onPress={() =>
+                      handleResourcePress(resource.url, resource.title)
+                    }
+                  >
+                    <View style={styles.resourceContent}>
+                      <Text style={styles.resourceTitle}>{resource.title}</Text>
+                      <Text style={styles.resourceDescription}>
+                        {resource.description}
+                      </Text>
+                    </View>
+                    <Text style={styles.resourceArrow}>→</Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            );
+          })}
+        </View>
+      )}
+    </Card>
+  );
+}
+
+// Main Coaching Cards Component
+export function CoachingCards({
+  coaching,
+  sentimentScore: _sentimentScore,
+}: CoachingCardsProps) {
+  return (
+    <View style={styles.container}>
+      {/* Resources */}
+      {coaching.resources && coaching.resources.length > 0 && (
+        <ResourcesCard resources={coaching.resources} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  cardIcon: {
+    fontSize: 24,
+    marginRight: spacing.md,
+  },
+  cardSubtitle: {
+    ...typography.bodySmall,
+    color: colors.textSecondary,
+    marginTop: spacing.xs,
+  },
+  cardTitle: {
+    ...typography.h3,
+    color: colors.text,
+  },
+  categorySection: {
+    marginBottom: spacing.lg,
+  },
+  categoryTitle: {
+    ...typography.h4,
+    fontWeight: '600',
+    marginBottom: spacing.md,
+  },
+  container: {
+    gap: spacing.lg,
+  },
+  durationText: {
+    ...typography.bodySmall,
+    color: colors.primary,
+    fontWeight: '600',
+    marginBottom: spacing.md,
+    textAlign: 'center',
+  },
+  exerciseButton: {
+    marginTop: spacing.md,
+  },
+  exerciseCard: {
+    backgroundColor: colors.surfaceLight,
+  },
+  expandIcon: {
+    ...typography.body,
+    color: colors.textSecondary,
+  },
+  expandedContent: {
+    marginTop: spacing.lg,
+  },
+  headerContent: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  headerText: {
+    flex: 1,
+  },
+  imageNote: {
+    ...typography.bodySmall,
+    color: colors.textSecondary,
+    fontStyle: 'italic',
+    marginTop: spacing.md,
+    textAlign: 'center',
+  },
+  instructionItem: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    marginBottom: spacing.md,
+  },
+  instructionNumber: {
+    ...typography.bodySmall,
+    backgroundColor: colors.primary,
+    borderRadius: borderRadius.full,
+    color: colors.white,
+    fontWeight: '600',
+    marginRight: spacing.md,
+    minWidth: 24,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    textAlign: 'center',
+  },
+  instructionText: {
+    ...typography.body,
+    color: colors.text,
+    flex: 1,
+    lineHeight: 22,
+  },
+  instructionsContainer: {
+    marginBottom: spacing.md,
+  },
+  resourceArrow: {
+    ...typography.h3,
+    color: colors.textSecondary,
+  },
+  resourceContent: {
+    flex: 1,
+  },
+  resourceDescription: {
+    ...typography.bodySmall,
+    color: colors.textSecondary,
+    marginTop: spacing.xs,
+  },
+  resourceItem: {
+    alignItems: 'center',
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginBottom: spacing.sm,
+    padding: spacing.md,
+  },
+  resourceTitle: {
+    ...typography.body,
+    color: colors.text,
+    fontWeight: '600',
+  },
+  resourcesCard: {
+    borderColor: colors.info,
+    borderWidth: 2,
+  },
+});
diff --git a/apps/mobile/src/components/SentimentMeter.tsx b/apps/mobile/src/components/SentimentMeter.tsx
index 4b374fc..7575917 100644
--- a/apps/mobile/src/components/SentimentMeter.tsx
+++ b/apps/mobile/src/components/SentimentMeter.tsx
@@ -201,6 +201,95 @@ export function SentimentMeter({
 }
 
 // Compact version for smaller spaces
+// Simple progress bar version for cleaner UI
+export function SimpleSentimentBar({
+  score,
+  confidence,
+  label: _label,
+  customColors,
+  style,
+}: Pick<
+  SentimentMeterProps,
+  'score' | 'confidence' | 'label' | 'customColors' | 'style'
+>) {
+  const progressAnimation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(progressAnimation, {
+      toValue: score,
+      duration: 1500,
+      useNativeDriver: false,
+    }).start();
+  }, [score, progressAnimation]);
+
+  const getSentimentColor = (sentimentScore: number) => {
+    if (customColors) {
+      if (sentimentScore >= 0.7) return customColors.primary;
+      if (sentimentScore >= 0.4) return customColors.secondary;
+      return colors.info;
+    }
+
+    if (sentimentScore >= 0.7) return colors.success;
+    if (sentimentScore >= 0.4) return colors.warning;
+    return colors.info;
+  };
+
+  const getSentimentLevel = (sentimentScore: number) => {
+    if (sentimentScore >= 0.8) return 'Very Positive';
+    if (sentimentScore >= 0.6) return 'Positive';
+    if (sentimentScore >= 0.4) return 'Neutral';
+    if (sentimentScore >= 0.2) return 'Negative';
+    return 'Very Negative';
+  };
+
+  const sentimentColor = getSentimentColor(score);
+  const sentimentLevel = getSentimentLevel(score);
+
+  const animatedWidth = progressAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View style={[styles.simpleContainer, style]}>
+      <View style={styles.simpleHeader}>
+        <Text style={[styles.simpleSentimentText, { color: sentimentColor }]}>
+          {sentimentLevel}
+        </Text>
+        <Text style={[styles.simpleScoreText, { color: sentimentColor }]}>
+          {Math.round(score * 100)}%
+        </Text>
+      </View>
+
+      <View
+        style={[
+          styles.progressBarBackground,
+          { backgroundColor: customColors?.border || colors.borderLight },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.progressBarFill,
+            {
+              backgroundColor: sentimentColor,
+              width: animatedWidth,
+            },
+          ]}
+        />
+      </View>
+
+      <Text
+        style={[
+          styles.simpleConfidenceText,
+          { color: customColors?.textSecondary || colors.textSecondary },
+        ]}
+      >
+        Analysis confidence: {Math.round(confidence * 100)}%
+      </Text>
+    </View>
+  );
+}
+
 export function CompactSentimentMeter({
   score,
   confidence,
@@ -265,10 +354,42 @@ const styles = StyleSheet.create({
   meterContainer: {
     position: 'relative',
   },
+  progressBarBackground: {
+    borderRadius: 8,
+    height: 8,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  progressBarFill: {
+    borderRadius: 8,
+    height: '100%',
+  },
   scoreText: {
     ...typography.h2,
     fontWeight: 'bold',
   },
+  simpleConfidenceText: {
+    ...typography.bodySmall,
+    marginTop: spacing.sm,
+    textAlign: 'center',
+  },
+  simpleContainer: {
+    width: '100%',
+  },
+  simpleHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: spacing.sm,
+  },
+  simpleScoreText: {
+    ...typography.h4,
+    fontWeight: 'bold',
+  },
+  simpleSentimentText: {
+    ...typography.h4,
+    fontWeight: '600',
+  },
   svg: {
     transform: [{ rotate: '180deg' }], // Start from top
   },
diff --git a/apps/mobile/src/components/TranscriptDisplay.tsx b/apps/mobile/src/components/TranscriptDisplay.tsx
index f3d9abe..956a400 100644
--- a/apps/mobile/src/components/TranscriptDisplay.tsx
+++ b/apps/mobile/src/components/TranscriptDisplay.tsx
@@ -1,5 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
 import { colors } from '../constants/Colors';
 import { typography } from '../constants/Typography';
 import { spacing, borderRadius } from '../constants/Layout';
@@ -17,6 +24,7 @@ export interface TranscriptDisplayProps {
   typewriterSpeed?: number; // milliseconds per character
   showDetailedConfidence?: boolean;
   onTypewriterComplete?: () => void;
+  audioUrl?: string; // Optional coaching audio URL
 }
 
 export function TranscriptDisplay({
@@ -27,6 +35,7 @@ export function TranscriptDisplay({
   typewriterSpeed = 50,
   showDetailedConfidence = false,
   onTypewriterComplete,
+  audioUrl,
 }: TranscriptDisplayProps) {
   const [displayedText, setDisplayedText] = useState('');
   const [isTyping, setIsTyping] = useState(false);
@@ -136,11 +145,52 @@ export function TranscriptDisplay({
           style={styles.detailedConfidence}
         />
       )}
+
+      {/* Minimalistic Audio Player */}
+      {audioUrl && (
+        <View style={styles.audioPlayerContainer}>
+          <View style={styles.audioPlayerInfo}>
+            <Text style={styles.audioPlayerIcon}>🎵</Text>
+            <Text style={styles.audioPlayerText}>Coaching Audio</Text>
+          </View>
+          <TouchableOpacity
+            style={styles.playButton}
+            onPress={() =>
+              Alert.alert('Audio Player', 'Audio playback feature coming soon!')
+            }
+          >
+            <Text style={styles.playButtonText}>▶</Text>
+          </TouchableOpacity>
+        </View>
+      )}
     </Card>
   );
 }
 
 const styles = StyleSheet.create({
+  audioPlayerContainer: {
+    alignItems: 'center',
+    backgroundColor: colors.surfaceLight,
+    borderRadius: borderRadius.sm,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: spacing.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  audioPlayerIcon: {
+    fontSize: 16,
+    marginRight: spacing.sm,
+  },
+  audioPlayerInfo: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+  },
+  audioPlayerText: {
+    ...typography.bodySmall,
+    color: colors.textSecondary,
+  },
   container: {
     marginBottom: spacing.lg,
     maxHeight: 300, // Limit height to prevent taking up entire screen
@@ -165,6 +215,19 @@ const styles = StyleSheet.create({
     fontStyle: 'italic',
     textAlign: 'center',
   },
+  playButton: {
+    alignItems: 'center',
+    backgroundColor: colors.primary,
+    borderRadius: borderRadius.full,
+    height: 32,
+    justifyContent: 'center',
+    width: 32,
+  },
+  playButtonText: {
+    color: colors.surface,
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
   streamingBar: {
     alignItems: 'center',
     backgroundColor: colors.surfaceLight,
diff --git a/apps/mobile/src/context/AppContext.tsx b/apps/mobile/src/context/AppContext.tsx
index 5671f8a..d323231 100644
--- a/apps/mobile/src/context/AppContext.tsx
+++ b/apps/mobile/src/context/AppContext.tsx
@@ -7,6 +7,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { apiService, CheckinResponse } from '../services/api';
+import { enhanceCoachingData } from '../utils/dummyCoachingData';
 
 export interface AppState {
   currentScreen: 'home' | 'recording' | 'results';
@@ -215,7 +216,10 @@ function appReducer(state: AppState, action: AppAction): AppState {
           sessionId: action.payload.data.sessionId,
           transcript: action.payload.data.transcript,
           sentiment: action.payload.data.sentiment,
-          coaching: action.payload.data.coaching,
+          coaching: enhanceCoachingData(
+            action.payload.data.coaching,
+            action.payload.data.sentiment?.score
+          ),
           audioUrl: action.payload.data.audioUrl,
         },
         processingTime: action.payload.processingTime || null,
@@ -240,7 +244,10 @@ function appReducer(state: AppState, action: AppAction): AppState {
           sessionId: action.payload.sessionId,
           transcript: action.payload.transcript,
           sentiment: action.payload.sentiment,
-          coaching: action.payload.coaching,
+          coaching: enhanceCoachingData(
+            action.payload.coaching,
+            action.payload.sentiment?.score
+          ),
           audioUrl: action.payload.audioUrl,
         },
         loading: {
diff --git a/apps/mobile/src/screens/ResultsScreen.tsx b/apps/mobile/src/screens/ResultsScreen.tsx
index 7ff4a8b..10f517d 100644
--- a/apps/mobile/src/screens/ResultsScreen.tsx
+++ b/apps/mobile/src/screens/ResultsScreen.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  SafeAreaView,
-  ScrollView,
-  Alert,
-} from 'react-native';
+import { View, Text, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import * as Linking from 'expo-linking';
 import { colors } from '../constants/Colors';
 import { typography } from '../constants/Typography';
 import { spacing, borderRadius } from '../constants/Layout';
@@ -24,8 +16,8 @@ import {
   CoachingSkeleton,
 } from '../components/SkeletonLoader';
 import { TranscriptDisplay } from '../components/TranscriptDisplay';
-import { SentimentMeter } from '../components/SentimentMeter';
-import { BreathingGuide } from '../components/BreathingGuide';
+import { SimpleSentimentBar } from '../components/SentimentMeter';
+import { CoachingCards } from '../components/CoachingCards';
 import { useAppContext } from '../context/AppContext';
 
 export function ResultsScreen() {
@@ -194,7 +186,7 @@ export function ResultsScreen() {
   }
 
   // Get data from context
-  const { checkinData, recordingData } = state;
+  const { checkinData } = state;
   const hasData =
     checkinData.sessionId &&
     (checkinData.transcript || checkinData.sentiment || checkinData.coaching);
@@ -265,26 +257,6 @@ export function ResultsScreen() {
         showsVerticalScrollIndicator={false}
       >
         <View style={themedStyles.themedContent}>
-          {/* Recording Info */}
-          <Card
-            variant="outlined"
-            padding="lg"
-            style={styles.recordingInfoCard}
-          >
-            <Text style={styles.cardTitle}>Session Summary</Text>
-            <View style={styles.recordingInfo}>
-              <Text style={styles.infoText}>
-                Duration: {Math.floor(recordingData.duration / 60)}:
-                {(recordingData.duration % 60).toString().padStart(2, '0')}
-              </Text>
-              {recordingData.timestamp && (
-                <Text style={styles.infoText}>
-                  Date: {new Date(recordingData.timestamp).toLocaleDateString()}
-                </Text>
-              )}
-            </View>
-          </Card>
-
           {/* Transcript */}
           {checkinData.transcript && (
             <TranscriptDisplay
@@ -292,6 +264,7 @@ export function ResultsScreen() {
               confidence={0.85}
               enableTypewriter={false}
               showDetailedConfidence={true}
+              audioUrl={checkinData.audioUrl || undefined}
             />
           )}
 
@@ -304,12 +277,10 @@ export function ResultsScreen() {
             >
               <Text style={themedStyles.themedCardTitle}>Mood Analysis</Text>
 
-              <SentimentMeter
+              <SimpleSentimentBar
                 score={checkinData.sentiment.score}
                 confidence={checkinData.sentiment.confidence}
                 label={checkinData.sentiment.label}
-                size={140}
-                showDetails={true}
                 customColors={{
                   primary: theme.primary,
                   secondary: theme.secondary,
@@ -324,132 +295,10 @@ export function ResultsScreen() {
 
           {/* Coaching Content */}
           {checkinData.coaching && (
-            <>
-              {/* Motivational Message */}
-              {checkinData.coaching.motivationalMessage && (
-                <Card
-                  variant="default"
-                  padding="lg"
-                  style={themedStyles.themedMotivationCard}
-                >
-                  <Text style={themedStyles.themedCardTitle}>
-                    Personal Message
-                  </Text>
-                  <Text style={styles.motivationText}>
-                    {checkinData.coaching.motivationalMessage}
-                  </Text>
-                </Card>
-              )}
-
-              {/* Emergency Contact */}
-              <Card variant="outlined" padding="lg" style={styles.contactCard}>
-                <Text style={themedStyles.themedCardTitle}>Need Support?</Text>
-                <View style={styles.contactItem}>
-                  <Text style={[styles.contactTitle, themedStyles.themedText]}>
-                    Campus Help
-                  </Text>
-                  <Text
-                    style={[
-                      styles.contactDescription,
-                      themedStyles.themedSecondaryText,
-                    ]}
-                  >
-                    24/7 mental health support for students
-                  </Text>
-                  <Button
-                    title="Call Now"
-                    onPress={async () => {
-                      const phoneNumber = 'tel:6082571102';
-                      const displayNumber = '(608) 257-1102';
-
-                      // Check if the device can make phone calls
-                      const canOpenURL = await Linking.canOpenURL(phoneNumber);
-
-                      if (!canOpenURL) {
-                        Alert.alert(
-                          'Phone Not Available',
-                          'This device cannot make phone calls. Please call ' +
-                            displayNumber +
-                            ' directly.',
-                          [{ text: 'OK' }]
-                        );
-                        return;
-                      }
-
-                      Alert.alert(
-                        'Call Campus Help',
-                        `This will call Campus Help at ${displayNumber}`,
-                        [
-                          { text: 'Cancel', style: 'destructive' },
-                          {
-                            text: 'Call',
-                            onPress: async () => {
-                              try {
-                                await Linking.openURL(phoneNumber);
-                              } catch (error) {
-                                Alert.alert(
-                                  'Error',
-                                  'Unable to make phone call. Please dial ' +
-                                    displayNumber +
-                                    ' manually.',
-                                  [{ text: 'OK' }]
-                                );
-                              }
-                            },
-                          },
-                        ]
-                      );
-                    }}
-                    variant="primary"
-                    size="medium"
-                    style={styles.contactButton}
-                  />
-                </View>
-              </Card>
-            </>
-          )}
-
-          {/* Breathing Exercise Guide */}
-          {checkinData.sentiment && (
-            <Card variant="elevated" padding="lg" style={styles.breathingCard}>
-              <Text style={themedStyles.themedCardTitle}>
-                Breathing Exercise
-              </Text>
-              <Text
-                style={[
-                  styles.breathingDescription,
-                  themedStyles.themedSecondaryText,
-                ]}
-              >
-                {checkinData.sentiment.score < 0.4
-                  ? 'Take a moment to calm your mind with guided breathing'
-                  : checkinData.sentiment.score < 0.7
-                    ? 'Center yourself with mindful breathing'
-                    : 'Energize your positive mood with rhythmic breathing'}
-              </Text>
-              <BreathingGuide sentimentScore={checkinData.sentiment.score} />
-            </Card>
-          )}
-
-          {/* Audio Playback */}
-          {checkinData.audioUrl && (
-            <Card variant="elevated" padding="lg" style={styles.audioCard}>
-              <Text style={styles.cardTitle}>🎵 Your Coaching Audio</Text>
-              <Text style={styles.audioDescription}>
-                Listen to your personalized coaching message
-              </Text>
-              <Button
-                title="▶ Play Coaching"
-                onPress={() =>
-                  Alert.alert(
-                    'Audio Player',
-                    'Audio playback feature coming soon!'
-                  )
-                }
-                variant="primary"
-                style={styles.audioButton}
-              />
-            </Card>
+            <CoachingCards
+              coaching={checkinData.coaching}
+              sentimentScore={checkinData.sentiment?.score}
+            />
           )}
 
           {/* Actions */}
@@ -476,55 +325,6 @@ const styles = StyleSheet.create({
     gap: spacing.md,
     marginTop: spacing.lg,
   },
-  audioButton: {
-    alignSelf: 'center',
-  },
-  audioCard: {
-    backgroundColor: colors.surfaceLight,
-    marginBottom: spacing.lg,
-  },
-  audioDescription: {
-    ...typography.body,
-    color: colors.textSecondary,
-    marginBottom: spacing.md,
-    textAlign: 'center',
-  },
-  breathingCard: {
-    backgroundColor: colors.surfaceLight,
-    marginBottom: spacing.lg,
-  },
-  breathingDescription: {
-    ...typography.body,
-    marginBottom: spacing.md,
-    textAlign: 'center',
-  },
-
-  cardTitle: {
-    ...typography.h3,
-    color: colors.text,
-    marginBottom: spacing.md,
-  },
-  contactButton: {
-    alignSelf: 'center',
-    marginTop: spacing.md,
-  },
-  contactCard: {
-    marginBottom: spacing.lg,
-  },
-  contactDescription: {
-    ...typography.body,
-    marginBottom: spacing.sm,
-    textAlign: 'center',
-  },
-  contactItem: {
-    alignItems: 'center',
-  },
-  contactTitle: {
-    ...typography.h4,
-    fontWeight: '600',
-    marginBottom: spacing.xs,
-    textAlign: 'center',
-  },
   container: {
     backgroundColor: colors.background,
     flex: 1,
@@ -561,16 +361,6 @@ const styles = StyleSheet.create({
   headerSpacer: {
     width: spacing.xxl,
   },
-  infoText: {
-    ...typography.body,
-    color: colors.textSecondary,
-  },
-  motivationText: {
-    ...typography.body,
-    color: colors.text,
-    lineHeight: 22,
-    textAlign: 'center',
-  },
   noDataButton: {
     minWidth: 200,
   },
@@ -589,12 +379,6 @@ const styles = StyleSheet.create({
     color: colors.text,
     marginBottom: spacing.md,
   },
-  recordingInfo: {
-    gap: spacing.xs,
-  },
-  recordingInfoCard: {
-    marginBottom: spacing.lg,
-  },
   scrollView: {
     flex: 1,
   },