@onairos/react-native 3.1.11 → 3.1.13

package/src/components/UniversalOnboarding.tsx

@@ -1,1820 +1,2888 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  Dimensions,
-  Platform,
-  Modal,
-  Animated,
-  SafeAreaView,
-  TouchableWithoutFeedback,
-  ScrollView,
-  Image,
-  Switch,
-  Linking,
-  Alert,
-  TextInput,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { PlatformList } from './PlatformList';
-import { PinInput } from './PinInput';
-import { TrainingModal } from './TrainingModal';
-import { DataRequestScreen } from './DataRequestScreen';
-import { OAuthWebView } from './onboarding/OAuthWebView';
-import { useConnections } from '../hooks/useConnections';
-import { COLORS, DEEP_LINK_CONFIG } from '../constants';
-import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback, testApiConnectivity, handleOAuthCallbackUrl, refreshYouTubeTokens, requestEmailVerification, verifyEmailCode, checkEmailVerificationStatus, disconnectPlatform } from '../services/platformAuthService';
-import type { UniversalOnboardingProps, ConnectionStatus, TestModeOptions } from '../types';
-
-// Optional Opacity SDK imports with error handling
-let opacityInit: any = null;
-let OpacityEnvironment: any = null;
-let opacityGet: any = null;
-
-try {
-  const opacitySDK = require('@opacity-labs/react-native-opacity');
-  opacityInit = opacitySDK.init;
-  OpacityEnvironment = opacitySDK.OpacityEnvironment;
-  opacityGet = opacitySDK.get;
-} catch (error) {
-  console.warn('Opacity SDK not available:', error);
-  // Opacity SDK will be disabled if not available
-}
-
-const { height, width } = Dimensions.get('window');
-
-export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
-  visible,
-  onClose,
-  AppName,
-  appIcon,
-  requestData,
-  returnLink,
-  onComplete,
-  embedd = false,
-  debug = false,
-  testMode = false,
-  preferredPlatform,
-  inferenceData,
-  auto = false,
-  partner,
-}) => {
-  const [step, setStep] = useState<'email' | 'verify' | 'dataRequest' | 'connect' | 'pin' | 'training' | 'oauth' | 'success'>('email');
-  const [connections, setConnections] = useState<ConnectionStatus>({});
-  const [pin, setPin] = useState<string>('');
-  const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
-  const [training, setTraining] = useState<{
-    progress: number;
-    eta: string;
-  }>({ progress: 0, eta: '' });
-  const [slideAnim] = useState(new Animated.Value(height));
-  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
-  const [oauthUrl, setOauthUrl] = useState<string>('');
-  const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [username, setUsername] = useState<string>('Avatar');
-  const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
-  const [showLoginWebView, setShowLoginWebView] = useState<boolean>(false);
-  const [email, setEmail] = useState<string>('');
-  const [verificationCode, setVerificationCode] = useState<string>('');
-  const [isVerifyingCode, setIsVerifyingCode] = useState<boolean>(false);
-
-  const [isExistingUser, setIsExistingUser] = useState<boolean>(false);
-  
-  // Add refs for cleanup and code inputs
-  const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isMountedRef = useRef<boolean>(true);
-  const codeInputRefs = useRef<Array<TextInput | null>>([]);
-
-  // Add state for showing additional platforms
-  const [showAllPlatforms, setShowAllPlatforms] = useState<boolean>(false);
-
-
-  // Parse test mode options
-  const testModeOptions = typeof testMode === 'object' ? testMode : {} as any;
-  const isTestMode = testMode === true || (typeof testMode === 'object' && testMode !== null);
-  const showTestControls = (debug || isTestMode) && requestData;
-  
-  // Simple 2-flow system
-  const isExistingUserFlow = testModeOptions.existingUser || false;
-  const isNewUserFlow = testModeOptions.newUser || false;
-
-  const platforms = [
-    { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
-    { id: 'youtube', name: 'YouTube', icon: require('../assets/images/youtube.png') },
-    { id: 'email', name: 'Gmail', icon: require('../assets/images/email.png') },
-    { id: 'reddit', name: 'Reddit', icon: require('../assets/images/reddit.png') },
-    { id: 'pinterest', name: 'Pinterest', icon: require('../assets/images/pinterest.png') },
-  ];
-
-  // Define primary platforms (shown by default)
-  const primaryPlatforms = platforms.slice(0, 3); // Instagram, YouTube, Gmail
-  const additionalPlatforms = platforms.slice(3); // Reddit, Pinterest
-
-  // Get platforms to display based on showAllPlatforms state
-  const platformsToDisplay = showAllPlatforms ? platforms : primaryPlatforms;
-
-  const {
-    connectPlatform,
-    disconnectPlatform,
-    getConnectionStatus,
-    isConnecting,
-  } = useConnections();
-
-  useEffect(() => {
-    // Set mounted flag
-    isMountedRef.current = true;
-    
-    if (visible) {
-      loadInitialStatus();
-      // Animate in
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        useNativeDriver: true,
-        bounciness: 0,
-      }).start();
-      
-      // Set up deep link listener for OAuth callbacks
-      // Using the subscription pattern for React Native's Linking API
-      const subscription = Linking.addListener('url', ({ url }) => {
-        if (isOAuthCallback(url)) {
-          handleOAuthCallback(url);
-        }
-      });
-      
-      // Check for initial URL (app was opened via deep link)
-      Linking.getInitialURL().then(initialUrl => {
-        if (initialUrl && isOAuthCallback(initialUrl)) {
-          handleOAuthCallback(initialUrl);
-        }
-      });
-      
-      // Initialize platform toggles
-      const initialToggles: { [key: string]: boolean } = {};
-      platforms.forEach((platform) => {
-        initialToggles[platform.id] = false;
-      });
-      setPlatformToggles(initialToggles);
-      
-      // Debug mode for Expo Go
-      if (debug || Platform.OS === 'web') {
-        console.log('Debug mode enabled - Using mock data for onboarding');
-        console.log('Configuration:', {
-          auto,
-          partner,
-          hasInferenceData: !!inferenceData,
-          inferenceDataType: typeof inferenceData,
-        });
-        
-        // Pre-populate with mock connections in debug mode
-        if (testMode || Platform.OS === 'web') {
-          setConnections({
-            instagram: { userName: 'instagram_user', connected: true },
-            youtube: { userName: 'youtube_user', connected: true },
-          });
-        }
-      }
-      
-      // If there's a preferred platform, pre-connect
-      if (preferredPlatform && debug) {
-        setConnections(prev => ({
-          ...prev,
-          [preferredPlatform]: { userName: `${preferredPlatform}_user`, connected: true }
-        }));
-      }
-      
-      // Return cleanup function
-      return () => {
-        // Remove event listener using the subscription
-        subscription.remove();
-      };
-    } else {
-      // Animate out
-      Animated.timing(slideAnim, {
-        toValue: height,
-        duration: 250,
-        useNativeDriver: true,
-      }).start(() => {
-        // Reset state if needed
-      });
-    }
-  }, [visible, preferredPlatform]);
-
-  // Cleanup effect for unmounting
-  useEffect(() => {
-    return () => {
-      // Set mounted flag to false
-      isMountedRef.current = false;
-      
-      // Clear any pending timeouts
-      if (successTimeoutRef.current) {
-        clearTimeout(successTimeoutRef.current);
-        successTimeoutRef.current = null;
-      }
-    };
-  }, []);
-
-  const handleClose = () => {
-    // Clear any pending timeouts before closing
-    if (successTimeoutRef.current) {
-      clearTimeout(successTimeoutRef.current);
-      successTimeoutRef.current = null;
-    }
-    
-    // Set mounted flag to false
-    isMountedRef.current = false;
-    
-    // Animate out and then call onClose
-    Animated.timing(slideAnim, {
-      toValue: height,
-      duration: 250,
-      useNativeDriver: true,
-    }).start(() => {
-      // Only call onClose if component is still meant to be mounted
-      // This prevents the "User closed onboarding" error
-      onClose();
-    });
-  };
-
-  const loadInitialStatus = useCallback(async () => {
-    try {
-      console.log('🔄 Loading initial connection status...');
-      const status = await getConnectionStatus();
-      console.log('✅ Connection status loaded:', status);
-      setConnections(status || {});
-    } catch (error) {
-      console.error('❌ Failed to load connection status:', error);
-      // Set empty connections to prevent crashes
-      setConnections({});
-    }
-  }, [getConnectionStatus]);
-
-  const togglePlatform = useCallback(async (platformId: string) => {
-    if (!platformToggles[platformId]) {
-      // Attempt to connect platform
-      try {
-        setIsConnectingPlatform(true);
-        console.log(`🔌 Initiating connection for ${platformId}`);
-        
-        // Test API connectivity first
-        console.log('🔍 Testing API connectivity...');
-        const connectivityTest = await testApiConnectivity();
-        
-        if (!connectivityTest.success) {
-          console.error('❌ API connectivity test failed:', connectivityTest.error);
-          Alert.alert('Network Error', `${connectivityTest.error}\n\nPlease check your internet connection and try again.`);
-          return;
-        }
-        
-        console.log('✅ API connectivity confirmed');
-        
-        // Instagram: Use Opacity SDK exclusively
-        if (platformId === 'instagram') {
-          // Check if Opacity SDK is available
-          if (!opacityInit || !OpacityEnvironment || !opacityGet) {
-            console.error('❌ Opacity SDK not available for Instagram');
-            throw new Error('Instagram connection requires the Opacity SDK. Please ensure @opacity-labs/react-native-opacity is properly installed and configured.');
-          }
-          
-          console.log('🔌 Initializing Opacity SDK for Instagram...');
-          
-          // Initialize Opacity SDK with your API key
-          const apiKey = 'OsamaTest-7bde2407-7360-462a-86b4-b26d7f890cbb';
-          
-          await opacityInit({
-            apiKey,
-            environment: OpacityEnvironment.Production,
-            shouldShowErrorsInWebView: true,
-          });
-          
-          console.log('✅ Opacity SDK initialized successfully');
-          console.log('📱 Fetching Instagram profile...');
-          
-          // Fetch Instagram profile using Opacity SDK
-          const profile = await opacityGet('flow:instagram:profile');
-          
-          if (profile && typeof profile === 'object') {
-            console.log('✅ Instagram profile retrieved:', profile);
-            
-            // Extract username from profile or use fallback
-            const instagramUsername = profile.username || profile.name || username;
-            
-            // Update platform toggle state
-            setPlatformToggles(prev => ({
-              ...prev,
-              [platformId]: true
-            }));
-            
-            // Update connections state with Instagram data
-            setConnections(prev => ({
-              ...prev,
-              [platformId]: { 
-                userName: instagramUsername, 
-                connected: true,
-                profileData: profile // Store additional profile data
-              }
-            }));
-            
-            console.log(`✅ Instagram successfully connected for user: ${instagramUsername}`);
-            
-          } else {
-            throw new Error('Invalid or empty Instagram profile data returned from Opacity SDK');
-          }
-        } else {
-          // For all other platforms (non-Instagram), check if they have native SDK
-        if (hasNativeSDK(platformId)) {
-          console.log(`📱 Using native SDK for ${platformId}`);
-          // Use native SDK for authentication
-            const success = await initiateNativeAuth(platformId, username);
-          if (success) {
-            console.log(`✅ Native authentication successful for ${platformId}`);
-            // Update platform toggle state
-            setPlatformToggles(prev => ({
-              ...prev,
-              [platformId]: true
-            }));
-            
-            // Update connections state
-            setConnections(prev => ({
-              ...prev,
-              [platformId]: { userName: username, connected: true }
-            }));
-            } else {
-              throw new Error(`Native authentication failed for ${platformId}`);
-          }
-        } else {
-            // Use OAuth WebView flow
-          console.log(`🌐 Initiating OAuth flow for ${platformId}`);
-            
-          const oauthUrl = await initiateOAuth(platformId, username, AppName);
-            
-          if (oauthUrl) {
-            console.log(`✅ Received OAuth URL for ${platformId}:`, oauthUrl);
-            setCurrentPlatform(platformId);
-            setOauthUrl(oauthUrl);
-            setStep('oauth');
-          } else {
-            console.error(`❌ No OAuth URL returned for ${platformId}`);
-              throw new Error(`Failed to get authorization URL for ${platformId}. Please try again.`);
-            }
-          }
-        }
-      } catch (error) {
-        console.error(`❌ Error connecting ${platformId}:`, error);
-        
-        // Provide user-friendly error messages based on platform
-        let errorMessage = 'Unknown error occurred';
-        if (error instanceof Error) {
-          if (platformId === 'instagram') {
-            if (error.message.includes('Initialize')) {
-              errorMessage = 'Failed to initialize Instagram connection. Please check your internet connection.';
-            } else if (error.message.includes('profile')) {
-              errorMessage = 'Unable to retrieve Instagram profile. Please try again or check your Instagram account permissions.';
-            } else {
-              errorMessage = error.message;
-            }
-          } else {
-            errorMessage = error.message;
-          }
-        }
-        
-        Alert.alert(
-          `${platformId.charAt(0).toUpperCase() + platformId.slice(1)} Connection Failed`, 
-          errorMessage,
-          [{ text: 'OK', style: 'default' }]
-        );
-      } finally {
-        setIsConnectingPlatform(false);
-      }
-    } else {
-      // Disconnect platform
-      console.log(`🔌 Disconnecting ${platformId}`);
-      setPlatformToggles(prev => ({
-        ...prev,
-        [platformId]: false
-      }));
-      
-      // Update connections state
-      setConnections(prev => {
-        const newConnections = { ...prev };
-        delete newConnections[platformId];
-        return newConnections;
-      });
-    }
-  }, [platformToggles, username, AppName]);
-
-  /**
-   * Handles OAuth callback URLs
-   */
-  const handleOAuthCallback = useCallback((url: string) => {
-    console.log('🔗 OAuth callback received:', url);
-    
-    const result = handleOAuthCallbackUrl(url);
-    
-    if (result.success && result.platform && result.code) {
-      console.log(`✅ OAuth successful for ${result.platform}`);
-      
-      // Update connections state
-      setConnections(prev => ({
-        ...prev,
-        [result.platform!]: { userName: username, connected: true }
-      }));
-      
-      // Update platform toggles
-      setPlatformToggles(prev => ({
-        ...prev,
-        [result.platform!]: true
-      }));
-      
-      // Close OAuth window and return to connect step
-      setOauthUrl('');
-      setCurrentPlatform('');
-      setStep('connect');
-      
-      console.log(`🎉 ${result.platform} successfully connected via OAuth`);
-    } else {
-      console.error('❌ OAuth callback failed or incomplete');
-    }
-  }, [username]);
-
-  /**
-   * Handles completion of the OAuth flow
-   */
-  const handleOAuthSuccess = useCallback((code: string) => {
-    console.log(`OAuth success for ${currentPlatform} with code: ${code}`);
-    
-    // Update connections for the current platform
-    if (currentPlatform) {
-      // Update connections state
-      setConnections(prev => ({
-        ...prev,
-        [currentPlatform]: { userName: username, connected: true }
-      }));
-      
-      // Update platform toggles
-      setPlatformToggles(prev => ({
-        ...prev,
-        [currentPlatform]: true
-      }));
-      
-      console.log(`Successfully connected ${currentPlatform} for user ${username}`);
-    }
-    
-    // Close OAuth window and return to connect step
-    setOauthUrl('');
-    setCurrentPlatform('');
-    setStep('connect');
-  }, [currentPlatform, username]);
-
-
-
-  // Function to check for existing account (spoofed for now)
-  const checkExistingAccount = useCallback(async () => {
-    console.log('Checking for existing account...');
-    // TODO: Implement actual logic to check cookies/storage for existing account
-    // For now, this is spoofed and doesn't do anything
-    return false;
-  }, []);
-
-  // Function to handle email submission
-  const handleEmailSubmit = useCallback(async () => {
-    console.log('🚀 handleEmailSubmit called with email:', email);
-    console.log('🧪 testMode value:', testMode);
-    console.log('🧪 isTestMode computed:', isTestMode);
-    
-    try {
-      if (!email || !email.trim()) {
-        console.log('❌ No email provided');
-        Alert.alert('Error', 'Please enter your email address');
-        return;
-      }
-      
-      // Basic email validation
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(email.trim())) {
-        console.log('❌ Invalid email format');
-        Alert.alert('Error', 'Please enter a valid email address');
-        return;
-      }
-      
-      console.log('📧 Email validation passed, proceeding...');
-      
-      // Check if we should skip API calls entirely (only for specific test scenarios)
-      const shouldSkipApiCalls = (typeof testMode === 'object' && testMode !== null && testMode.skipApiCalls === true);
-      
-      if (shouldSkipApiCalls) {
-        console.log('🧪 Test mode with skipApiCalls: true - Skipping API call, proceeding to verification');
-        setStep('verify');
-        return;
-      }
-      
-      // Add loading state to prevent multiple submissions
-      if (isVerifyingCode) {
-        console.log('⚠️ Email verification already in progress');
-        return;
-      }
-      
-      setIsVerifyingCode(true);
-      console.log('🔄 Starting email verification process...');
-      console.log('📡 Will make API call with testMode flag:', isTestMode);
-      
-      // Wrap the entire API call in a timeout to prevent hanging
-      const timeoutPromise = new Promise((_, reject) => {
-        setTimeout(() => reject(new Error('Request timeout')), 10000); // 10 second timeout
-      });
-      
-      try {
-        // Safety check for function availability with detailed debugging
-        console.log('🔍 Checking requestEmailVerification function availability...');
-        console.log('🔍 Type of requestEmailVerification:', typeof requestEmailVerification);
-        console.log('🔍 requestEmailVerification function:', requestEmailVerification);
-        
-        if (typeof requestEmailVerification !== 'function') {
-          console.error('❌ requestEmailVerification function not available');
-          console.error('❌ Available functions from platformAuthService:', {
-            requestEmailVerification: typeof requestEmailVerification,
-            verifyEmailCode: typeof verifyEmailCode,
-            checkEmailVerificationStatus: typeof checkEmailVerificationStatus,
-          });
-          // In development, just proceed anyway
-          console.log('🧪 Proceeding without API call in development mode');
-          setStep('verify');
-          return;
-        }
-        
-        console.log('✅ requestEmailVerification function is available');
-        console.log('🔄 Making API call to requestEmailVerification...');
-        
-        // Race between API call and timeout
-        const result = await Promise.race([
-          requestEmailVerification(email.trim(), isTestMode),
-          timeoutPromise
-        ]) as any;
-        
-        console.log('📡 Email verification API result:', result);
-        
-        if (result && result.success) {
-          console.log('✅ Verification code requested successfully');
-          setStep('verify');
-        } else {
-          console.warn('⚠️ Email verification request failed, but proceeding anyway:', result);
-          // In development mode, proceed even if API fails
-          setStep('verify');
-        }
-      } catch (verificationError) {
-        console.error('❌ Error in email verification API call:', verificationError);
-        // In development mode, proceed even if API fails
-        console.log('🧪 API failed but proceeding to verification step in development mode');
-        setStep('verify');
-      } finally {
-        setIsVerifyingCode(false);
-      }
-    } catch (error) {
-      console.error('❌ Unexpected error in email submission:', error);
-      setIsVerifyingCode(false);
-      
-      // In development mode, still try to proceed
-      console.log('🧪 Error occurred but attempting to proceed to verification step');
-      try {
-        setStep('verify');
-      } catch (stepError) {
-        console.error('❌ Failed to set step to verify:', stepError);
-        Alert.alert('Error', 'An unexpected error occurred. Please try again.');
-      }
-    }
-  }, [email, isVerifyingCode, debug, testMode, isTestMode]);
-
-  // Function to handle verification code submission
-  const handleVerificationSubmit = useCallback(async () => {
-    if (!verificationCode.trim() || verificationCode.trim().length !== 6) {
-      Alert.alert('Error', 'Please enter a 6-digit verification code');
-      return;
-    }
-    
-    setIsVerifyingCode(true);
-    
-    try {
-      // Safety check for function availability
-      if (typeof verifyEmailCode !== 'function') {
-        throw new Error('Email verification service not available');
-      }
-      
-      // Test Mode: Use specific flows
-      if (isTestMode) {
-        console.log('🧪 Test mode verification - simulating success');
-        
-        if (isExistingUserFlow) {
-          // Flow 1: Existing User → Data Request → Close (return API URL)
-          console.log('🧪 Test Flow 1: Existing User → Show Data Request');
-          setIsExistingUser(true);
-          setStep('dataRequest');
-          return;
-        } else if (isNewUserFlow) {
-          // Flow 2: New User → Platform Connect → PIN → Training
-          console.log('🧪 Test Flow 2: New User → Platform Connect');
-          const emailPrefix = email.trim().split('@')[0] || 'TestUser';
-          setUsername(emailPrefix);
-          setStep('connect');
-          return;
-        }
-      }
-
-      // Real API call (production) or test mode
-      const result = await verifyEmailCode(email.trim(), verificationCode.trim(), isTestMode);
-      
-      if (result.success) {
-        console.log('✅ Email verification successful');
-        
-        // Check if user exists in backend (properly typed now)
-        const existingUser = result.existingUser || false;
-        setIsExistingUser(existingUser);
-        
-        if (existingUser) {
-          console.log('👤 Existing user detected, showing data request screen');
-          setStep('dataRequest');
-        } else {
-          console.log('🆕 New user, proceeding to platform connection');
-          // Safely set username from email prefix
-          try {
-            const emailPrefix = email.trim().split('@')[0];
-            if (emailPrefix && emailPrefix.length > 0) {
-              setUsername(emailPrefix);
-            } else {
-              setUsername('User'); // Fallback username
-            }
-          } catch (usernameError) {
-            console.warn('Failed to extract username from email, using fallback:', usernameError);
-            setUsername('User');
-          }
-          setStep('connect');
-        }
-      } else {
-        Alert.alert('Verification Failed', result.error || 'Invalid verification code');
-      }
-    } catch (error) {
-      console.error('❌ Error verifying code:', error);
-      Alert.alert('Error', 'Failed to verify code');
-    } finally {
-      setIsVerifyingCode(false);
-    }
-  }, [email, verificationCode]);
-
-  const handlePinSubmit = useCallback(async (userPin: string) => {
-    setPin(userPin);
-    setStep('training');
-    
-    // Save session data for "Never Connect Again" functionality
-    try {
-      const sessionData = {
-        pin: userPin,
-        connections,
-        platformToggles,
-        selectedTier,
-        username,
-        timestamp: Date.now(),
-        appName: AppName,
-        inferenceData: auto ? inferenceData : undefined,
-        partner,
-      };
-      
-      // Store session data in secure storage for future use
-      console.log('Saving session data for future "Never Connect Again" functionality:', sessionData);
-      
-      // TODO: Implement actual secure storage of session data
-      // This would typically involve:
-      // 1. Storing encrypted session data locally
-      // 2. Setting cookies in WebView for onairos.uk domain
-      // 3. Storing authentication tokens securely
-      
-      // For now, we'll simulate this with console logging
-      console.log('Session data saved - future apps will detect existing account');
-      
-    } catch (error) {
-      console.error('Failed to save session data:', error);
-    }
-  }, [connections, selectedTier, platformToggles, username, AppName, auto, inferenceData, partner]);
-
-  const handleTrainingComplete = useCallback(async () => {
-    console.log('🎉 Training completed successfully');
-    console.log('🔍 Auto mode enabled:', auto);
-    console.log('🔍 Inference data available:', !!inferenceData);
-    
-    try {
-      if (auto && inferenceData) {
-        console.log('🤖 Auto mode: Making API request to get URL and perform inference');
-        
-        // First, get the API URL from backend
-        const apiUrlResponse = await fetch('https://api2.onairos.uk/', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            Info: {
-              storage: 'secure',
-              appId: AppName,
-              confirmations: Object.keys(requestData || {}),
-              EncryptedUserPin: pin, // Use the actual PIN from user
-              account: email.trim(),
-              proofMode: false,
-            }
-          })
-        });
-        
-        if (!apiUrlResponse.ok) {
-          throw new Error(`Failed to get API URL: ${apiUrlResponse.status}`);
-        }
-        
-        const { apiUrl, token } = await apiUrlResponse.json();
-        console.log('✅ Received API URL:', apiUrl);
-        console.log('✅ Received token:', token?.substring(0, 20) + '...');
-        
-        // Now make the inference call with the provided data
-        const inferenceResponse = await fetch(apiUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            ...inferenceData,
-            userEmail: email.trim(),
-            appName: AppName,
-            timestamp: new Date().toISOString(),
-          })
-        });
-        
-        if (!inferenceResponse.ok) {
-          throw new Error(`Inference API failed: ${inferenceResponse.status}`);
-        }
-        
-        const inferenceResults = await inferenceResponse.json();
-        console.log('✅ Auto mode inference results:', inferenceResults);
-        
-        // Close the modal first
-        handleClose();
-        
-        // Complete onboarding with inference results
-        setTimeout(() => {
-          onComplete(apiUrl, token, {
-            pin,
-            connections,
-            platformToggles,
-            selectedTier,
-            tierData: requestData?.[selectedTier],
-            sessionSaved: true,
-            // Add inference data if auto mode is enabled
-            ...(auto && inferenceData && { inferenceData }),
-            // Add partner info for special partners
-            ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-            autoMode: true,
-            inferenceResults,
-            apiUrl,
-            token,
-          });
-        }, 100);
-        
-      } else {
-        console.log('📋 Standard mode: Returning API URL for manual use');
-        
-        // Prepare completion data
-        const completionData = {
-          pin,
-          connections,
-          platformToggles,
-          selectedTier,
-          tierData: requestData?.[selectedTier],
-          sessionSaved: true,
-          // Add inference data if auto mode is enabled
-          ...(auto && inferenceData && { inferenceData }),
-          // Add partner info for special partners
-          ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-          autoMode: false,
-        };
-        
-        console.log('Completion data prepared:', completionData);
-        
-        // Close the modal first
-        handleClose();
-        
-        // Then call the completion callback
-        setTimeout(() => {
-          onComplete('https://api2.onairos.uk', 'dummy-token', completionData);
-        }, 100);
-      }
-    } catch (error) {
-      console.error('❌ Error in training complete:', error);
-      
-      // Fallback to standard mode
-      const completionData = {
-        pin,
-        connections,
-        platformToggles,
-        selectedTier,
-        tierData: requestData?.[selectedTier],
-        sessionSaved: true,
-        // Add inference data if auto mode is enabled
-        ...(auto && inferenceData && { inferenceData }),
-        // Add partner info for special partners
-        ...(partner && { partner: partner === 'couplebible' ? 'CoupleBible' : partner }),
-        autoMode: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
-      };
-      
-      console.log('Fallback completion data:', completionData);
-      
-      // Close the modal first
-      handleClose();
-      
-      // Then call the completion callback
-      setTimeout(() => {
-        onComplete('https://api2.onairos.uk', 'dummy-token', completionData);
-      }, 100);
-    }
-  }, [pin, connections, platformToggles, selectedTier, requestData, auto, inferenceData, partner, handleClose, onComplete, AppName, email]);
-
-  const handleDataRequestAccept = useCallback(async () => {
-    console.log('Data request accepted for existing user');
-    console.log('🔍 Auto mode enabled:', auto);
-    console.log('🔍 Inference data available:', !!inferenceData);
-    
-    try {
-      if (auto && inferenceData) {
-        console.log('🤖 Auto mode: Making API request to get URL and perform inference');
-        
-        // First, get the API URL from backend
-        const apiUrlResponse = await fetch('https://api2.onairos.uk/', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            Info: {
-              storage: 'secure', // or whatever storage type
-              appId: AppName,
-              confirmations: Object.keys(requestData || {}),
-              EncryptedUserPin: 'temp-pin', // This would come from user PIN in real flow
-              account: email.trim(),
-              proofMode: false,
-            }
-          })
-        });
-        
-        if (!apiUrlResponse.ok) {
-          throw new Error(`Failed to get API URL: ${apiUrlResponse.status}`);
-        }
-        
-        const { apiUrl, token } = await apiUrlResponse.json();
-        console.log('✅ Received API URL:', apiUrl);
-        console.log('✅ Received token:', token?.substring(0, 20) + '...');
-        
-        // Now make the inference call with the provided data
-        const inferenceResponse = await fetch(apiUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            ...inferenceData,
-            userEmail: email.trim(),
-            appName: AppName,
-            timestamp: new Date().toISOString(),
-          })
-        });
-        
-        if (!inferenceResponse.ok) {
-          throw new Error(`Inference API failed: ${inferenceResponse.status}`);
-        }
-        
-        const inferenceResults = await inferenceResponse.json();
-        console.log('✅ Auto mode inference results:', inferenceResults);
-        
-        // Complete onboarding with inference results
-        onComplete(apiUrl, token, {
-          existingAccount: true,
-          email: email.trim(),
-          dataRequestAccepted: true,
-          requestData,
-          autoMode: true,
-          inferenceResults,
-          apiUrl,
-          token,
-        });
-        
-      } else {
-        console.log('📋 Standard mode: Returning API URL for manual use');
-        
-        // Standard mode: just return the API URL
-        onComplete('https://api2.onairos.uk', 'existing-session-token', {
-          existingAccount: true,
-          email: email.trim(),
-          dataRequestAccepted: true,
-          requestData,
-          autoMode: false,
-        });
-      }
-    } catch (error) {
-      console.error('❌ Error in data request accept:', error);
-      
-      // Fallback to standard mode
-      onComplete('https://api2.onairos.uk', 'existing-session-token', {
-        existingAccount: true,
-        email: email.trim(),
-        dataRequestAccepted: true,
-        requestData,
-        autoMode: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
-      });
-    }
-  }, [email, onComplete, requestData, auto, inferenceData, AppName]);
-
-  const handleDataRequestDecline = useCallback(() => {
-    console.log('Data request declined');
-    handleClose();
-  }, [handleClose]);
-
-  const canProceedToPin = useCallback(() => {
-    // Test mode: Always allow proceeding (simulates platform connections)
-    if (isTestMode || testModeOptions.skipRealConnections) {
-      console.log('🧪 Test mode: Allowing proceed without real platform connections');
-      return true;
-    }
-    
-    // Production: Check if at least one platform is connected
-    const hasPlatformConnected = Object.values(platformToggles).some(value => value === true);
-    
-    // Auto mode validation
-    if (auto && partner !== 'couplebible' && !inferenceData) {
-      console.warn('Auto mode enabled but no inference data provided (and partner is not couplebible)');
-      return false;
-    }
-    
-    return hasPlatformConnected;
-  }, [platformToggles, auto, partner, inferenceData, isTestMode, testModeOptions]);
-
-  const handleProceed = () => {
-    console.log('Proceeding to next step');
-    // Show success screen first
-    setStep('success');
-    
-    // Clear any existing timeout
-    if (successTimeoutRef.current) {
-      clearTimeout(successTimeoutRef.current);
-    }
-    
-    // After a delay, proceed to PIN
-    successTimeoutRef.current = setTimeout(() => {
-      // Only proceed if component is still mounted and visible
-      if (isMountedRef.current && visible) {
-        setStep('pin');
-      }
-      successTimeoutRef.current = null;
-    }, 3000);
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-      statusBarTranslucent
-      onRequestClose={handleClose}
-    >
-      <TouchableWithoutFeedback onPress={handleClose}>
-        <View style={styles.modalOverlay}>
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <Animated.View 
-              style={[
-                styles.bottomSheet,
-                {
-                  transform: [{ translateY: slideAnim }],
-                }
-              ]}
-            >
-              <SafeAreaView style={styles.container}>
-                <View style={styles.handleContainer}>
-                  <View style={styles.handle} />
-                </View>
-                
-                {step === 'email' && (
-                  <View style={styles.emailInputContainer}>
-                    <View style={styles.emailHeader}>
-                      <View style={styles.onairosIcon}>
-                        <Image 
-                          source={require('../assets/images/onairos_logo.png')} 
-                          style={styles.onairosLogo} 
-                          resizeMode="contain"
-                        />
-                      </View>
-                      <Text style={styles.emailTitle}>Welcome to Onairos</Text>
-                      <Text style={styles.emailSubtitle}>Enter your email to get started</Text>
-                    </View>
-                    
-                    <View style={styles.emailInputSection}>
-                      <TextInput
-                        style={styles.emailInput}
-                        value={email}
-                        onChangeText={setEmail}
-                        placeholder="Enter your email address"
-                        keyboardType="email-address"
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                        autoFocus
-                      />
-                      
-                      <TouchableOpacity
-                        style={[styles.emailSubmitButton, !email.trim() && styles.emailSubmitButtonDisabled]}
-                        onPress={handleEmailSubmit}
-                        disabled={!email.trim()}
-                      >
-                        <Text style={styles.emailSubmitButtonText}>Continue</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </View>
-                )}
-
-                {step === 'verify' && (
-                  <View style={styles.emailInputContainer}>
-                    <View style={styles.emailHeader}>
-                      <View style={styles.onairosIcon}>
-                        <Image 
-                          source={require('../assets/images/onairos_logo.png')} 
-                          style={styles.onairosLogo} 
-                          resizeMode="contain"
-                        />
-                      </View>
-                      <Text style={styles.emailTitle}>Enter Verification Code</Text>
-                      <Text style={styles.emailSubtitle}>
-                        We've sent a 6-digit code to {email}
-                      </Text>
-                      {isTestMode && (
-                        <Text style={styles.developmentNote}>
-                          🔍 Test Mode: Any 6-digit code will work
-                        </Text>
-                      )}
-                    </View>
-                    
-                    <View style={styles.emailInputSection}>
-                      <View style={styles.codeInputContainer}>
-                        {[0, 1, 2, 3, 4, 5].map((index) => (
-                          <TextInput
-                            key={index}
-                            ref={(ref) => (codeInputRefs.current[index] = ref)}
-                            style={[
-                              styles.codeDigit,
-                              verificationCode.length === index && styles.codeDigitActive
-                            ]}
-                            value={verificationCode[index] || ''}
-                            onChangeText={(text) => {
-                              if (text.length <= 1 && /^\d*$/.test(text)) {
-                                const newCode = verificationCode.split('');
-                                newCode[index] = text;
-                                const updatedCode = newCode.join('').slice(0, 6);
-                                setVerificationCode(updatedCode);
-                                
-                                // Auto-focus next input
-                                if (text && index < 5) {
-                                  codeInputRefs.current[index + 1]?.focus();
-                                }
-                              }
-                            }}
-                            onKeyPress={({ nativeEvent }) => {
-                              // Handle backspace to move to previous input
-                              if (nativeEvent.key === 'Backspace' && !verificationCode[index] && index > 0) {
-                                codeInputRefs.current[index - 1]?.focus();
-                              }
-                            }}
-                            keyboardType="number-pad"
-                            maxLength={1}
-                            textAlign="center"
-                            autoFocus={index === 0}
-                          />
-                        ))}
-                      </View>
-                      
-                      <TouchableOpacity
-                        style={[
-                          styles.emailSubmitButton, 
-                          (verificationCode.length !== 6 || isVerifyingCode) && styles.emailSubmitButtonDisabled
-                        ]}
-                        onPress={handleVerificationSubmit}
-                        disabled={verificationCode.length !== 6 || isVerifyingCode}
-                      >
-                        {isVerifyingCode ? (
-                          <ActivityIndicator size="small" color="#fff" />
-                        ) : (
-                          <Text style={styles.emailSubmitButtonText}>Verify</Text>
-                        )}
-                      </TouchableOpacity>
-                      
-                      <TouchableOpacity
-                        style={styles.backButton}
-                        onPress={() => setStep('email')}
-                      >
-                        <Text style={styles.backButtonText}>← Back to email</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </View>
-                )}
-
-                {step === 'connect' && (
-                  <>
-                    {/* Header with Onairos icon and arrow to app icon */}
-                    <View style={styles.header}>
-                      <View style={styles.headerContent}>
-                        <View style={styles.onairosIcon}>
-                          <Image 
-                            source={require('../assets/images/onairos_logo.png')} 
-                            style={styles.onairosLogo} 
-                            resizeMode="contain"
-                          />
-                        </View>
-                        <Icon name="arrow-forward" size={24} color="#666" style={styles.arrow} />
-                        <View style={styles.appIcon}>
-                          {appIcon ? (
-                            <Image 
-                              source={appIcon} 
-                              style={styles.appIconImage} 
-                              resizeMode="contain"
-                            />
-                          ) : (
-                            <Text style={styles.appIconText}>
-                              {AppName.charAt(0)}
-                            </Text>
-                          )}
-                        </View>
-                      </View>
-                      
-
-                    </View>
-
-                    <ScrollView 
-                      style={styles.content}
-                      contentContainerStyle={styles.scrollContent}
-                      showsVerticalScrollIndicator={true}
-                      bounces={true}
-                      scrollEnabled={true}
-                      nestedScrollEnabled={true}
-                      keyboardShouldPersistTaps="handled"
-                    >
-                      {/* Main title and description */}
-                      <View style={styles.titleContainer}>
-                        <Text style={styles.mainTitle}>
-                          Let {AppName} learn about you from your data and apps
-                        </Text>
-                        <Text style={styles.privacyMessage}>
-                          None of your app data is shared with ANYONE
-                        </Text>
-                        {(debug || testMode) && (
-                          <Text style={styles.developmentNote}>
-                            🧪 Test Mode: You can proceed without connecting any platforms
-                          </Text>
-                        )}
-                      </View>
-
-                      {/* Platform connection options */}
-                      <View style={styles.platformsContainer}>
-                        {platformsToDisplay.map((platform) => (
-                          <TouchableOpacity 
-                            key={platform.id} 
-                            style={styles.platformItem}
-                            onPress={() => togglePlatform(platform.id)}
-                            disabled={isConnectingPlatform}
-                          >
-                            <View style={styles.platformInfo}>
-                              <Image 
-                                source={platform.icon} 
-                                style={styles.platformIcon} 
-                                resizeMode="contain"
-                              />
-                              <Text style={styles.platformName}>
-                                {platform.name}
-                              </Text>
-                            </View>
-                            
-                            {isConnectingPlatform && currentPlatform === platform.id ? (
-                              <ActivityIndicator size="small" color={COLORS.primary} />
-                            ) : (
-                              <View style={[
-                                styles.platformToggle,
-                                platformToggles[platform.id] && styles.platformToggleActive
-                              ]}>
-                                <View style={[
-                                  styles.platformToggleThumb,
-                                  platformToggles[platform.id] && styles.platformToggleThumbActive
-                                ]} />
-                              </View>
-                            )}
-                          </TouchableOpacity>
-                        ))}
-                        
-                        {/* Show more/less platforms button */}
-                        {additionalPlatforms.length > 0 && (
-                          <TouchableOpacity 
-                            style={styles.expandButton}
-                            onPress={() => setShowAllPlatforms(!showAllPlatforms)}
-                          >
-                            <Icon 
-                              name={showAllPlatforms ? "expand_less" : "add"} 
-                              size={24} 
-                              color={COLORS.primary} 
-                            />
-                            <Text style={styles.expandButtonText}>
-                              {showAllPlatforms 
-                                ? "Show Less" 
-                                : `${additionalPlatforms.length} More Connectors`
-                              }
-                            </Text>
-                          </TouchableOpacity>
-                        )}
-                      </View>
-
-                      {/* Test mode controls - Simple 2-flow system */}
-                      {showTestControls && (
-                        <View style={styles.testModeContainer}>
-                          <Text style={styles.testModeTitle}>🧪 Test Mode - 2 Main Flows</Text>
-                          
-                                                     <TouchableOpacity 
-                             style={styles.testExistingUserButton}
-                             onPress={() => {
-                               // Flow 1: Existing User
-                               setIsExistingUser(true);
-                               setStep('dataRequest');
-                             }}
-                           >
-                            <Icon name="person" size={20} color="#28a745" />
-                            <Text style={styles.testExistingUserButtonText}>
-                              Flow 1: Existing User (Email → Code → Data Request → Close)
-                            </Text>
-                          </TouchableOpacity>
-
-                          <TouchableOpacity 
-                            style={styles.testSkipToTrainingButton}
-                            onPress={() => {
-                              // Flow 2: New User - Skip to connect step
-                              setStep('connect');
-                            }}
-                          >
-                            <Icon name="person-add" size={20} color="#17a2b8" />
-                            <Text style={styles.testSkipToTrainingButtonText}>
-                              Flow 2: New User (Connect → PIN → Training)
-                            </Text>
-                          </TouchableOpacity>
-
-                          <TouchableOpacity 
-                            style={styles.testDataRequestButton}
-                            onPress={() => setStep('dataRequest')}
-                          >
-                            <Icon name="preview" size={20} color={COLORS.primary} />
-                            <Text style={styles.testDataRequestButtonText}>
-                              Preview Data Request Screen
-                            </Text>
-                          </TouchableOpacity>
-                        </View>
-                      )}
-                    </ScrollView>
-
-                    <View style={styles.footer}>
-                      <TouchableOpacity
-                        style={styles.footerButtonCancel}
-                        onPress={handleClose}
-                      >
-                        <Text style={styles.footerButtonText}>Cancel</Text>
-                      </TouchableOpacity>
-
-                      <TouchableOpacity
-                        style={[
-                          styles.footerButtonConfirm,
-                          !canProceedToPin() && styles.footerButtonDisabled
-                        ]}
-                        onPress={handleProceed}
-                        disabled={!canProceedToPin()}
-                      >
-                        <Text style={styles.footerButtonTextConfirm}>Connect</Text>
-                      </TouchableOpacity>
-                    </View>
-                  </>
-                )}
-
-                {step === 'success' && (
-                  <View style={styles.successContainer}>
-                    <View style={styles.successContent}>
-                      {/* Big green checkmark */}
-                      <View style={styles.successIcon}>
-                        <Icon name="check" size={48} color="#fff" />
-                      </View>
-                      
-                      <Text style={styles.successTitle}>Never Connect Again!</Text>
-                      <Text style={styles.successSubtitle}>
-                        Your login session has been saved
-                      </Text>
-                      
-                      <View style={styles.successMessage}>
-                        <Text style={styles.successMessageText}>
-                          Your Onairos account and platform connections are now saved in your browser cookies. 
-                          Next time you use any app with Onairos, you'll be automatically signed in without 
-                          needing to reconnect your accounts.
-                        </Text>
-                      </View>
-                      
-                      {/* Auto-progress indicator */}
-                      <View style={styles.progressIndicator}>
-                        <ActivityIndicator size="small" color="#4CAF50" />
-                        <Text style={styles.progressText}>Continuing...</Text>
-                      </View>
-                    </View>
-                  </View>
-                )}
-
-                {step === 'pin' && (
-                  <PinInput
-                    onSubmit={handlePinSubmit}
-                    minLength={8}
-                    requireSpecialChar
-                    requireNumber
-                    onBack={() => setStep('connect')}
-                  />
-                )}
-
-                {step === 'training' && (
-                  <TrainingModal
-                    visible={step === 'training'}
-                    progress={training.progress}
-                    eta={training.eta}
-                    onCancel={handleClose}
-                    onComplete={handleTrainingComplete}
-                    modelKey="onairosTrainingModel"
-                    username={username}
-                    test={isTestMode}
-                  />
-                )}
-
-                {step === 'dataRequest' && (
-                  <DataRequestScreen
-                    onAccept={handleDataRequestAccept}
-                    onDecline={handleDataRequestDecline}
-                    requestData={requestData || {}}
-                    AppName={AppName}
-                    appIcon={appIcon}
-                  />
-                )}
-                
-                {step === 'oauth' && oauthUrl && (
-                  <OAuthWebView
-                    url={oauthUrl}
-                    platform={currentPlatform}
-                    onClose={() => {
-                      setStep('connect');
-                      setOauthUrl('');
-                    }}
-                    onSuccess={handleOAuthSuccess}
-                    onComplete={() => setStep('connect')}
-                  />
-                )}
-                
-
-
-              </SafeAreaView>
-            </Animated.View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
-      
-
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  bottomSheet: {
-    backgroundColor: '#fff',
-    width: width,
-    height: height * 0.8,
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    overflow: 'hidden',
-  },
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  handleContainer: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 12,
-    paddingBottom: 8,
-  },
-  handle: {
-    width: 40,
-    height: 5,
-    borderRadius: 3,
-    backgroundColor: '#E0E0E0',
-  },
-  header: {
-    padding: 24,
-    alignItems: 'center',
-  },
-  headerContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16,
-  },
-  appIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  appIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  appIconImage: {
-    width: 32,
-    height: 32,
-  },
-  arrow: {
-    marginHorizontal: 16,
-  },
-  onairosIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: 16,
-    backgroundColor: '#F5F5F5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  onairosIconText: {
-    fontSize: 24,
-    color: '#000',
-  },
-  onairosLogo: {
-    width: 32,
-    height: 32,
-  },
-  titleContainer: {
-    marginBottom: 20,
-  },
-  mainTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  privacyMessage: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 24,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingBottom: 20,
-  },
-  platformsContainer: {
-    marginTop: 16,
-  },
-  platformItem: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 12,
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    marginBottom: 8,
-    borderWidth: 1,
-    borderColor: '#eee',
-  },
-  platformInfo: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  platformIcon: {
-    width: 24,
-    height: 24,
-    marginRight: 12,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  footer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 24,
-    borderTopWidth: 1,
-    borderTopColor: '#eee',
-    backgroundColor: '#fff',
-  },
-  footerButtonCancel: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  footerButtonConfirm: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 16,
-    backgroundColor: '#fff',
-    borderWidth: 1,
-    borderColor: '#000',
-  },
-  footerButtonDisabled: {
-    opacity: 0.5,
-  },
-  footerButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  footerButtonTextConfirm: {
-    color: '#000',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-
-  successContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  successContent: {
-    backgroundColor: '#fff',
-    padding: 24,
-    borderRadius: 16,
-    alignItems: 'center',
-  },
-  successIcon: {
-    backgroundColor: '#4CAF50',
-    borderRadius: 24,
-    padding: 12,
-    marginBottom: 16,
-  },
-  successTitle: {
-    fontSize: 22,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  successSubtitle: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  successMessage: {
-    backgroundColor: '#f0f0f0',
-    padding: 16,
-    borderRadius: 8,
-    marginBottom: 16,
-  },
-  successMessageText: {
-    fontSize: 14,
-    color: '#666',
-  },
-  platformToggle: {
-    width: 50,
-    height: 28,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: '#ddd',
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
-    paddingHorizontal: 2,
-  },
-  platformToggleActive: {
-    borderColor: '#4CAF50',
-    backgroundColor: '#4CAF50',
-  },
-  platformToggleThumb: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  platformToggleThumbActive: {
-    alignSelf: 'flex-end',
-  },
-  // Dark mode styles
-  darkPlatformItem: {
-    backgroundColor: '#333',
-    borderColor: '#555',
-  },
-  darkText: {
-    color: '#fff',
-  },
-  darkSubText: {
-    color: '#ccc',
-  },
-  progressIndicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 16,
-  },
-  progressText: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-    marginLeft: 8,
-  },
-  // Email input styles
-  emailInputContainer: {
-    flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    padding: 24,
-    paddingTop: 60,
-  },
-  emailHeader: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  emailTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    textAlign: 'center',
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  emailSubtitle: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-  },
-  emailInputSection: {
-    width: '100%',
-    maxWidth: 320,
-  },
-  emailInput: {
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 12,
-    padding: 16,
-    fontSize: 16,
-    marginBottom: 16,
-    backgroundColor: '#fff',
-  },
-  emailSubmitButton: {
-    backgroundColor: '#4CAF50',
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    borderRadius: 12,
-    alignItems: 'center',
-  },
-  emailSubmitButtonDisabled: {
-    opacity: 0.5,
-  },
-  emailSubmitButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  // Verification code styles
-  developmentNote: {
-    fontSize: 14,
-    color: '#FF9800',
-    textAlign: 'center',
-    marginTop: 8,
-    backgroundColor: '#FFF3E0',
-    padding: 8,
-    borderRadius: 4,
-  },
-  codeInputContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 24,
-    paddingHorizontal: 20,
-  },
-  codeDigit: {
-    width: 45,
-    height: 55,
-    borderWidth: 2,
-    borderColor: '#ddd',
-    borderRadius: 8,
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#000',
-    backgroundColor: '#fff',
-  },
-  codeDigitActive: {
-    borderColor: '#4CAF50',
-  },
-  backButton: {
-    paddingVertical: 12,
-    alignItems: 'center',
-  },
-  backButtonText: {
-    color: '#666',
-    fontSize: 16,
-  },
-  // Expand button styles
-  expandButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#f8f9fa',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-    marginTop: 8,
-  },
-  expandButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: COLORS.primary,
-    marginLeft: 8,
-  },
-  // Test mode styles
-  testModeContainer: {
-    marginTop: 16,
-    paddingHorizontal: 16,
-    backgroundColor: '#f8f9fa',
-    borderRadius: 12,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-  },
-  testModeTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#495057',
-    marginBottom: 12,
-    textAlign: 'center',
-  },
-  testDataRequestButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#fff3cd',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#ffeaa7',
-    marginBottom: 8,
-  },
-  testDataRequestButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#856404',
-    marginLeft: 8,
-  },
-  testExistingUserButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#d4edda',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#c3e6cb',
-    marginBottom: 8,
-  },
-  testExistingUserButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#155724',
-    marginLeft: 8,
-  },
-  testSkipToTrainingButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 12,
-    backgroundColor: '#d1ecf1',
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: '#bee5eb',
-  },
-  testSkipToTrainingButtonText: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: '#0c5460',
-    marginLeft: 8,
-  },
-});
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  ActivityIndicator,
+  Platform,
+  Modal,
+  Animated,
+  SafeAreaView,
+  ScrollView,
+  Switch,
+  Linking,
+  KeyboardAvoidingView,
+  Vibration,
+  Easing,
+  Alert,
+} from 'react-native';
+// Removed navigation dependencies for SDK compatibility
+import AsyncStorage from '@react-native-async-storage/async-storage';
+// Import components and hooks
+import { PinInput } from './PinInput';
+import { OAuthWebView } from './onboarding/OAuthWebView';
+// import { useConnections } from '../../hooks/useConnections'; // Commented out - file path issue
+// import { useAuth } from '../../context/AuthContext'; // Commented out - file path issue
+import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback } from '../services/platformAuthService';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import { getOnairosUsername } from '../services/authService';
+import { io, Socket } from 'socket.io-client';
+import { setTemporaryPin, clearTemporaryPin } from '../services/pinStorageUtils';
+import { getEncryptedPinForAPI } from '../services/pinEncryptionService';
+import { startEnochTrainingWithYouTubeCheck } from '../services/mobileTrainingService';
+
+// Import types
+// import type { ConnectionStatus } from '../../hooks/useConnections'; // Commented out - file path issue
+// Removed App-specific navigation types
+
+const { height, width } = Dimensions.get('window');
+
+export interface UniversalOnboardingProps {
+  visible: boolean;
+  onClose: () => void;
+  AppName: string;
+  requestData?: any;
+  returnLink?: string;
+  onComplete?: (apiUrl: string, token: string, userData: any) => void;
+  embedd?: boolean;
+  debug?: boolean;
+  test?: boolean;
+  testMode?: boolean;
+  preferredPlatform?: string;
+  primaryAuthOnly?: boolean;
+}
+
+// ConnectionStatus interface is now imported from hooks/useConnections
+
+export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
+  visible,
+  onClose,
+  AppName,
+  requestData,
+  returnLink,
+  onComplete,
+  embedd = false,
+  debug = false,
+  test = false,
+  preferredPlatform,
+  primaryAuthOnly = false,
+}) => {
+  const [step, setStep] = useState<'connect' | 'pin' | 'persona' | 'oauth' | 'privacy' | 'connections'>(primaryAuthOnly ? 'persona' : 'connect');
+  const [connections, setConnections] = useState<any>({});
+  const [pin, setPin] = useState<string>('');
+  const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
+  // Training state is now handled by TrainingModal
+  const [slideAnim] = useState(new Animated.Value(height * 0.5));
+  const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
+  const [oauthUrl, setOauthUrl] = useState<string>('');
+  const [currentPlatform, setCurrentPlatform] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+  const [longPressTimer, setLongPressTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
+  const [modalVisible, setModalVisible] = useState(visible);
+  
+  // Debug logging for modal visibility
+  useEffect(() => {
+    console.log('🔍 UniversalOnboarding: visible prop changed to:', visible);
+    console.log('🔍 UniversalOnboarding: modalVisible state is:', modalVisible);
+    console.log('🔍 UniversalOnboarding: current step is:', step);
+    console.log('🔍 UniversalOnboarding: primaryAuthOnly is:', primaryAuthOnly);
+  }, [visible, modalVisible, step, primaryAuthOnly]);
+  const isCompletingRef = useRef(false);
+  const [connectionsCount, setConnectionsCount] = useState<number>(5); // Simulated connections count
+  
+  // Add state for showing additional platforms
+  const [showAdditionalPlatforms, setShowAdditionalPlatforms] = useState<boolean>(false);
+  const [additionalPlatformsOpacity] = useState(new Animated.Value(0));
+  
+  // Add ref for ScrollView to control scroll position
+  const scrollViewRef = useRef<ScrollView>(null);
+  // Get the authenticated user from auth context
+  // const { user } = useAuth(); // Hook not available
+  const user = null;
+  
+  // State for storing the correct username
+  const [username, setUsername] = useState<string>('');
+
+  // Real training state variables (replacing fake persona state)
+  const [personaProgress, setPersonaProgress] = useState(0);
+  const [personaStatus, setPersonaStatus] = useState('Initializing...');
+  const [isPersonaComplete, setIsPersonaComplete] = useState(false);
+  const [socketConnected, setSocketConnected] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [userTraits, setUserTraits] = useState<any>(null);
+  const [inferenceResults, setInferenceResults] = useState<any>(null);
+  const [userToken, setUserToken] = useState<string | null>(null);
+  const [userInfo, setUserInfo] = useState<any>(null);
+  const [animatedDots, setAnimatedDots] = useState('');
+  const socketRef = useRef<Socket | null>(null);
+  const dotsAnimationRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Existing user state
+  const [isExistingUser, setIsExistingUser] = useState(false);
+  const [existingUserToken, setExistingUserToken] = useState<string | null>(null);
+  const [existingUserInfo, setExistingUserInfo] = useState<any>(null);
+
+  // Data scenario states
+  const [dataScenario, setDataScenario] = useState<'SUFFICIENT' | 'LIMITED_DATA' | 'NO_DATA' | 'CONNECTIONS_REQUIRED' | null>(null);
+  const [dataDetails, setDataDetails] = useState<any>(null);
+  const [showDataWarning, setShowDataWarning] = useState(false);
+
+  // ✅ NEW: Background training state
+  const [isBackgroundTrainingStarted, setIsBackgroundTrainingStarted] = useState(false);
+  const [backgroundTrainingProgress, setBackgroundTrainingProgress] = useState('');
+  const [backgroundSocketId, setBackgroundSocketId] = useState<string | null>(null);
+
+  // Function to store connected platforms
+  const storeConnectedPlatform = async (platformId: string) => {
+    try {
+      const storedPlatforms = await AsyncStorage.getItem('connectedPlatforms');
+      let platforms: string[] = storedPlatforms ? JSON.parse(storedPlatforms) : [];
+      
+      // Add platform if not already in the list
+      if (!platforms.includes(platformId)) {
+        platforms.push(platformId);
+        await AsyncStorage.setItem('connectedPlatforms', JSON.stringify(platforms));
+        console.log('📱 Stored connected platform:', platformId, 'Total platforms:', platforms);
+      }
+    } catch (error) {
+      console.error('Error storing connected platform:', error);
+    }
+  };
+
+  // Function to remove connected platform from storage
+  const removeConnectedPlatform = async (platformId: string) => {
+    try {
+      const storedPlatforms = await AsyncStorage.getItem('connectedPlatforms');
+      let platforms: string[] = storedPlatforms ? JSON.parse(storedPlatforms) : [];
+      
+      // Remove platform from the list
+      platforms = platforms.filter(platform => platform !== platformId);
+      await AsyncStorage.setItem('connectedPlatforms', JSON.stringify(platforms));
+      console.log('📱 Removed connected platform:', platformId, 'Remaining platforms:', platforms);
+    } catch (error) {
+      console.error('Error removing connected platform:', error);
+    }
+  };
+
+  // Function to handle disconnect confirmation
+  const handleDisconnectPlatform = (platformId: string, platformName: string) => {
+    Alert.alert(
+      'Disconnect Platform',
+      `Are you sure you want to disconnect ${platformName}?`,
+      [
+        {
+          text: 'No',
+          style: 'cancel',
+        },
+        {
+          text: 'Yes',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              // Update local state to show disconnected
+              setConnectionStatuses(prev => ({
+                ...prev,
+                [platformId]: 'disconnected'
+              }));
+              
+              setConnections(prev => {
+                const newConnections = { ...prev };
+                delete newConnections[platformId];
+                return newConnections;
+              });
+
+              setPlatformToggles(prev => ({
+                ...prev,
+                [platformId]: false
+              }));
+
+              // Remove from storage
+              await removeConnectedPlatform(platformId);
+              
+              // Call the disconnect function from the hook
+              await disconnectPlatform();
+              
+              console.log('🔌 Disconnected platform:', platformId);
+            } catch (error) {
+              console.error('Error disconnecting platform:', error);
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  // Function to start animated dots
+  const startDotsAnimation = () => {
+    if (dotsAnimationRef.current) {
+      clearInterval(dotsAnimationRef.current);
+    }
+    
+    let dotCount = 0;
+    dotsAnimationRef.current = setInterval(() => {
+      dotCount = (dotCount + 1) % 4; // 0, 1, 2, 3, then back to 0
+      if (dotCount === 0) {
+        setAnimatedDots('');
+      } else {
+        setAnimatedDots('.'.repeat(dotCount));
+      }
+    }, 500); // Change every 500ms
+  };
+
+  // Function to stop animated dots
+  const stopDotsAnimation = () => {
+    if (dotsAnimationRef.current) {
+      clearInterval(dotsAnimationRef.current);
+      dotsAnimationRef.current = null;
+    }
+    setAnimatedDots('');
+  };
+
+  // Split platforms into main and additional
+  const mainPlatforms = [
+    { id: 'pinterest', name: 'Pinterest', color: '#E60023' },
+    { id: 'youtube', name: 'YouTube', color: '#FFFFFF' },
+    { id: 'linkedin', name: 'LinkedIn', color: '#0077B5' },
+  ];
+
+  const additionalPlatforms = [
+    { id: 'reddit', name: 'Reddit', color: '#FFFFFF' },
+    { id: 'gmail', name: 'Gmail', color: '#EA4335' },
+  ];
+
+  // Keep the original platforms array for compatibility
+  const platforms = [...mainPlatforms, ...additionalPlatforms];
+
+  // const {
+  //   connectPlatform,
+  //   disconnectPlatform,
+  //   getConnectionStatus,
+  //   isConnecting,
+  // } = useConnections(); // Hook not available
+  const connectPlatform = async () => {};
+  const disconnectPlatform = async () => {};
+  const getConnectionStatus = () => 'disconnected';
+  const isConnecting = false;
+  const isConnected = () => false;
+  
+  // Track connection statuses and currently connecting platform
+  const [connectionStatuses, setConnectionStatuses] = useState<Record<string, string>>({});
+  const [connectingPlatform, setConnectingPlatform] = useState<string | null>(null);
+  
+  // Function to get the platform icon based on platform ID
+  const getPlatformIcon = (platformId: string) => {
+    switch (platformId) {
+      case 'instagram':
+        return require('../assets/icons/instagram.png');
+      case 'youtube':
+        return require('../assets/icons/YouTubeicon2.png');
+      case 'reddit':
+        return require('../assets/icons/Redditicon.png');
+      case 'pinterest':
+        return require('../assets/icons/pinterest.png');
+      case 'facebook':
+        return require('../assets/icons/Facebookicon.png');
+      case 'linkedin':
+        return require('../assets/icons/Linkedinicon.png');
+      case 'gmail':
+        return require('../assets/icons/Gmail.png');
+    }
+  };
+
+  // Track if the modal has ever been visible to prevent initial onClose call
+  const hasBeenVisibleRef = useRef(false);
+
+  useEffect(() => {
+    if (visible) {
+      hasBeenVisibleRef.current = true; // Mark that modal has been visible
+      isCompletingRef.current = false; // Reset flag when becoming visible
+      setModalVisible(true);
+      loadInitialStatus();
+      // Animate in
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        friction: 8,
+        tension: 40,
+        useNativeDriver: true,
+      }).start();
+      
+      const subscription = Linking.addEventListener('url', handleUrl);
+      return () => {
+        subscription.remove();
+      };
+    } else if (hasBeenVisibleRef.current && !isCompletingRef.current) {
+      // Only animate out if NOT completing - prevents flicker during successful completion
+      Animated.timing(slideAnim, {
+        toValue: height,
+        useNativeDriver: true,
+        duration: 500, // Longer duration for a more elegant exit
+        easing: Easing.bezier(0.16, 1, 0.3, 1), // Custom bezier curve for a luxurious, smooth exit
+      }).start(() => {
+        // Use a timeout to prevent animation state updates during unmount
+        setTimeout(() => {
+          setModalVisible(false);
+          onClose(); // Call onClose from props
+        }, 16);
+      });
+    } else if (hasBeenVisibleRef.current && isCompletingRef.current) {
+      // If completing, hide modal immediately without any animation or delay
+      setModalVisible(false);
+      // Don't call onClose() when completing - let parent handle the navigation
+      isCompletingRef.current = false; // Reset for next time
+    }
+  }, [visible, onClose]); // Removed isCompleting from dependency array
+
+  // Cleanup socket connection and dots animation when component unmounts or becomes invisible
+  useEffect(() => {
+    return () => {
+      if (socketRef.current) {
+        console.log('🔌 Cleaning up socket connection...');
+        socketRef.current.disconnect();
+        socketRef.current = null;
+      }
+      stopDotsAnimation();
+    };
+  }, [visible]);
+  
+  // Set up deep link listener for OAuth callbacks
+  const handleUrl = useCallback(({url}: {url: string}) => {
+    if (isOAuthCallback(url)) {
+      handleOAuthCallback(url);
+    }
+  }, []);
+
+  // Load user data and authentication token when modal becomes visible
+  useEffect(() => {
+    const loadUserData = async () => {
+      try {
+        // Check for existing user info first
+        const existingToken = await AsyncStorage.getItem('existing_user_token');
+        const existingInfo = await AsyncStorage.getItem('existing_user_info');
+        
+        if (existingToken && existingInfo) {
+          console.log('🔍 Found existing user info - user wants to add more data');
+          setIsExistingUser(true);
+          setExistingUserToken(existingToken);
+          setExistingUserInfo(JSON.parse(existingInfo));
+          
+          // Clear the temporary storage
+          await AsyncStorage.removeItem('existing_user_token');
+          await AsyncStorage.removeItem('existing_user_info');
+        }
+
+        const token = await AsyncStorage.getItem('onairos_jwt_token') || await AsyncStorage.getItem('auth_token');
+        setUserToken(token);
+
+        if (token) {
+          // Use provided username or get stored username
+          const storedUsername = await getOnairosUsername();
+          const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
+
+          console.log('🔍 Using username for training:', fallbackUsername);
+          setUserInfo({
+            username: fallbackUsername,
+            email: user?.email || null,
+            id: null // Will be filled by backend during training
+          });
+          setUsername(fallbackUsername);
+        }
+      } catch (error) {
+        console.error('Error loading user data:', error);
+        // Fallback user info
+        const fallbackUsername = user?.email?.split('@')[0] || user?.name || 'mobile_user';
+        setUserInfo({
+          username: fallbackUsername,
+          email: user?.email || null,
+          id: null
+        });
+        setUsername(fallbackUsername);
+      }
+    };
+
+    if (visible) {
+      loadUserData();
+    }
+  }, [visible, user]);
+
+  const loadInitialStatus = async () => {
+    try {
+      // Get the stored Onairos username first
+      const storedUsername = await getOnairosUsername();
+      const fallbackUsername = user?.email || user?.name || `user_${Math.floor(Math.random() * 10000)}`;
+      const finalUsername = storedUsername || fallbackUsername;
+      
+      console.log('🔍 Loading username for data connections:', {
+        storedUsername,
+        fallbackUsername,
+        finalUsername
+      });
+      
+      setUsername(finalUsername);
+      
+      // Initialize connection statuses
+      const connectionStatus = await getConnectionStatus();
+      console.log('Initial connection status:', connectionStatus);
+      
+      // Update the main connections state
+      setConnections(connectionStatus);
+      
+      // Convert connections object to status strings
+      const statuses: Record<string, string> = {};
+      Object.keys(connectionStatus).forEach(platform => {
+        statuses[platform] = connectionStatus[platform]?.connected ? 'connected' : 'disconnected';
+      });
+      setConnectionStatuses(statuses);
+      
+      // Initialize platform toggles based on connection statuses
+      const toggles: {[key: string]: boolean} = {};
+      Object.keys(connectionStatus).forEach(platform => {
+        toggles[platform] = connectionStatus[platform]?.connected || false;
+      });
+      setPlatformToggles(toggles);
+      
+      console.log('Connection statuses set:', statuses);
+      console.log('Platform toggles set:', toggles);
+    } catch (error) {
+      console.error('Error loading initial connection status:', error);
+      // Set empty objects as fallback
+      setConnections({});
+      setConnectionStatuses({});
+      setPlatformToggles({});
+      
+      // Still set a fallback username even if other loading fails
+      const fallbackUsername = user?.email || user?.name || `user_${Math.floor(Math.random() * 10000)}`;
+      setUsername(fallbackUsername);
+    }
+  };
+
+  const handleClose = () => {
+    const currentlyCompleting = isCompletingRef.current; // Capture ref's current value
+
+    // Animate out with a luxurious, smooth motion
+    Animated.timing(slideAnim, {
+      toValue: height, // Full slide down
+      useNativeDriver: true,
+      duration: 500, // Longer duration for a more elegant exit
+      easing: Easing.bezier(0.16, 1, 0.3, 1), // Custom bezier curve for a luxurious, smooth exit
+    }).start(() => {
+      // Small delay before closing modal to ensure animation completes fully
+      setTimeout(() => {
+        setModalVisible(false);
+        if (!currentlyCompleting) { // Use the captured value
+          onClose();
+        }
+        // Do NOT reset isCompletingRef.current here. The useEffect watching props.visible is responsible for that.
+      }, 100);
+    });
+  };
+
+  const handleConnectPlatform = async (platformId: string) => {
+    // Trigger haptic feedback when connect button is pressed
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    
+    setConnectingPlatform(platformId);
+    
+    try {
+      // Check if the platform has a native SDK
+      if (hasNativeSDK(platformId)) {
+        // Use native SDK authentication
+        setCurrentPlatform(platformId);
+        const success = await initiateNativeAuth(platformId, username);
+        
+        if (success) {
+          // Update connections state
+          setConnections(prev => ({
+            ...prev,
+            [platformId]: { userName: username, connected: true }
+          }));
+          
+          // Update platform toggles
+          setPlatformToggles(prev => ({
+            ...prev,
+            [platformId]: true
+          }));
+          
+          // Update connection statuses
+          setConnectionStatuses(prev => ({
+            ...prev,
+            [platformId]: 'connected'
+          }));
+
+          // Store the connected platform
+          await storeConnectedPlatform(platformId);
+        }
+      } else {
+        // For other platforms, use the web OAuth flow
+        setCurrentPlatform(platformId);
+        const oauthUrl = await initiateOAuth(platformId, username);
+        
+        if (oauthUrl) {
+          setOauthUrl(oauthUrl);
+          setStep('oauth');
+        }
+      }
+    } catch (error) {
+      console.error(`Error connecting to ${platformId}:`, error);
+    } finally {
+      setConnectingPlatform(null);
+    }
+  };
+
+  const togglePlatform = useCallback(async (platformId: string) => {
+    // If toggling on, initiate the OAuth flow for the platform
+    if (!platformToggles[platformId]) {
+      try {
+        // Special case for Instagram which uses the existing flow
+        if (platformId === 'instagram') {
+          setPlatformToggles(prev => ({
+            ...prev,
+            [platformId]: !prev[platformId]
+          }));
+          setConnections(prev => ({
+            ...prev,
+            [platformId]: { userName: `${platformId}_user`, connected: true }
+          }));
+          // Store the connected platform
+          await storeConnectedPlatform(platformId);
+          return;
+        }
+        
+        // Check if the platform has a native SDK
+        if (hasNativeSDK(platformId)) {
+          // Use native SDK authentication
+          setCurrentPlatform(platformId);
+          const success = await initiateNativeAuth(platformId, username);
+          
+          if (success) {
+            // Update connections state
+            setConnections(prev => ({
+              ...prev,
+              [platformId]: { userName: username, connected: true }
+            }));
+            
+            // Update platform toggles
+            setPlatformToggles(prev => ({
+              ...prev,
+              [platformId]: true
+            }));
+
+            // Store the connected platform
+            await storeConnectedPlatform(platformId);
+          }
+          return;
+        }
+        
+        // For other platforms, use the web OAuth flow
+        setCurrentPlatform(platformId);
+        const oauthUrl = await initiateOAuth(platformId, username);
+        
+        // If oauthUrl is null, it means we should use native SDK (which should have been caught above)
+        if (oauthUrl) {
+          setOauthUrl(oauthUrl);
+          setStep('oauth');
+        }
+      } catch (error) {
+        console.error(`Error initiating OAuth for ${platformId}:`, error);
+        // If there's an error, don't toggle the platform
+        return;
+      }
+    } else {
+      // If toggling off, just update the state
+      setPlatformToggles(prev => ({
+        ...prev,
+        [platformId]: !prev[platformId]
+      }));
+      
+      // Remove connection
+      setConnections(prev => {
+        const newConnections = { ...prev };
+        delete newConnections[platformId];
+        return newConnections;
+      });
+    }
+  }, [platformToggles, username]);
+
+  /**
+   * Handles OAuth callback URLs
+   */
+  const handleOAuthCallback = useCallback((url: string) => {
+    try {
+      // Extract the authorization code from the URL
+      const parsedUrl = new URL(url);
+      const code = parsedUrl.searchParams.get('code');
+      const platform = parsedUrl.searchParams.get('platform') || currentPlatform;
+      
+      if (code && platform) {
+        // Update connections state
+        setConnections(prev => ({
+          ...prev,
+          [platform]: { userName: username, connected: true }
+        }));
+        
+        // Update platform toggles
+        setPlatformToggles(prev => ({
+          ...prev,
+          [platform]: true
+        }));
+        
+        // Return to the connect step
+        setStep('connect');
+      }
+    } catch (error) {
+      console.error('Error handling OAuth callback:', error);
+    }
+  }, [currentPlatform, username]);
+
+  /**
+   * Handles successful OAuth authentication from the OAuthWebView
+   */
+  const handleOAuthSuccess = useCallback(async (code: string) => {
+    console.log(`🎉 OAuth success for ${currentPlatform} - backend callback completed`);
+    console.log(`📝 Received result:`, code);
+    
+    if (currentPlatform) {
+      console.log(`✅ Updating connection state for ${currentPlatform}`);
+      
+      // Update connections state
+      setConnections(prev => ({
+        ...prev,
+        [currentPlatform]: { userName: username, connected: true }
+      }));
+      
+      // Update platform toggles
+      setPlatformToggles(prev => ({
+        ...prev,
+        [currentPlatform]: true
+      }));
+      
+      // Update connection statuses
+      setConnectionStatuses(prev => ({
+        ...prev,
+        [currentPlatform]: 'connected'
+      }));
+
+      // Store the connected platform
+      await storeConnectedPlatform(currentPlatform);
+      
+      console.log(`💾 ${currentPlatform} connection stored successfully`);
+    }
+    
+    // Close the OAuth window by returning to the connect step
+    console.log('🔄 Returning to connect step');
+    setOauthUrl('');
+    setStep('connect');
+  }, [currentPlatform, username, storeConnectedPlatform]);
+
+  const handlePinSubmit = useCallback(async (userPin: string) => {
+    setPin(userPin);
+    
+    // Store PIN temporarily for training component access
+    setTemporaryPin(userPin);
+    
+    console.log('🔐 [PIN SUBMIT] PIN submitted, checking for background training...');
+    
+    // ✅ NEW: Check if background training is already running
+    if (isBackgroundTrainingStarted && backgroundSocketId) {
+      console.log('✅ [PIN SUBMIT] Background training detected, continuing with PIN validation...');
+      
+      // Continue with existing training by sending PIN validation
+      try {
+        await continueBackgroundTrainingWithPin(userPin);
+        setStep('persona'); // Move to persona step to show training progress
+      } catch (error) {
+        console.error('❌ [PIN SUBMIT] Failed to continue background training:', error);
+        // ❌ DISABLED: Don't start new training when PIN is submitted
+        // Just show persona step with error state
+        setStep('persona');
+        setPersonaStatus('Error: Failed to continue training');
+        setHasError(true);
+      }
+    } else {
+      console.log('ℹ️ [PIN SUBMIT] No background training detected');
+      // ❌ DISABLED: Don't start training when PIN is submitted
+      // Training should only start during connector→PIN transition
+      setStep('persona');
+      setPersonaStatus('No training in progress. Please restart the flow.');
+      setHasError(true);
+    }
+    
+    console.log('🔐 [PIN SUBMIT] PIN stored securely, moved to persona step');
+  }, [isBackgroundTrainingStarted, backgroundSocketId]);
+
+  // Start real Enoch training via API (restored for backwards compatibility)
+  const startEnochTraining = async (socketId: string, authToken?: string) => {
+    try {
+      setPersonaStatus('Starting training...');
+      setPersonaProgress(15);
+
+      // Use provided token or get from AsyncStorage to avoid state timing issues
+      const token = authToken || await AsyncStorage.getItem('onairos_jwt_token') || await AsyncStorage.getItem('auth_token');
+
+      if (!token) {
+        console.error('❌ No authentication token available');
+        throw new Error('No authentication token available');
+      }
+
+      console.log('🚀 Starting Enoch training with socketId:', socketId);
+      console.log('🔑 Using auth token:', token ? `${token.substring(0, 20)}...` : 'None');
+
+      // Get stored Onairos username for API calls
+      const storedUsername = await getOnairosUsername();
+      const finalUsername = storedUsername || userInfo?.username || userInfo?.name || username || 'mobile_user';
+      
+      // Get connected platforms information
+      const connectedPlatforms = await AsyncStorage.getItem('connectedPlatforms');
+      const platformsList = connectedPlatforms ? JSON.parse(connectedPlatforms) : [];
+      
+      console.log('📱 Connected platforms for training:', platformsList);
+      
+      // Get encrypted PIN for training (if available)
+      const encryptedPin = await getEncryptedPinForAPI().catch(error => {
+        console.warn('⚠️ Could not get encrypted PIN for training:', error);
+        return null;
+      });
+
+      // Prepare user data for training - match backend expected format
+      const trainingData = {
+        socketId,
+        username: finalUsername,
+        email: userInfo?.email || null,
+        modelKey: null,
+        connectedPlatforms: platformsList,
+        platformConnections: connections,
+        ...(encryptedPin && { 
+          encryptedPin: encryptedPin,
+          hasPinData: true 
+        })
+      };
+
+      console.log('📤 Sending training data to /mobile-training/enoch:', trainingData);
+
+      // Use the new training function that includes YouTube migration check
+      const result = await startEnochTrainingWithYouTubeCheck(trainingData);
+      console.log('📡 Training API response:', result);
+
+      // Handle CONNECTIONS_REQUIRED scenario (pre-training validation)
+      if (result.requiresConnections || result.code === 'CONNECTIONS_REQUIRED') {
+        console.log('🔗 Connections required detected from HTTP response');
+        setDataScenario('CONNECTIONS_REQUIRED');
+        setDataDetails(result);
+        setShowDataWarning(true);
+        setPersonaStatus('Connections required');
+        setHasError(true);
+        stopDotsAnimation();
+        return;
+      }
+
+      if (result.success) {
+        console.log('🚀 Training Started:', result.message);
+        console.log('🎯 Training Features:', result.features);
+        
+        // Log the new features from the spec
+        if (result.features) {
+          console.log('✅ Inference enabled:', result.features.inference);
+          console.log('💾 Storage method:', result.features.storage);
+          console.log('🔒 Compression enabled:', result.features.compression);
+          console.log('🔐 Encryption enabled:', result.features.encryption);
+          console.log('📊 Training type:', result.features.type);
+          console.log('🗄️ Databases:', result.features.databases);
+          console.log('📈 Query scores enabled:', result.features.queryScores);
+        }
+        
+        setPersonaStatus('Training model...');
+        setPersonaProgress(25);
+      } else {
+        console.error('❌ Training start failed:', result.error);
+        setPersonaStatus(`Error: ${result.error || 'Training failed to start'}`);
+        setHasError(true);
+        stopDotsAnimation();
+      }
+    } catch (error) {
+      console.error('❌ Training start error:', error);
+      setPersonaStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      setHasError(true);
+      stopDotsAnimation();
+    }
+  };
+
+  // ✅ NEW: Continue background training with PIN validation
+  const continueBackgroundTrainingWithPin = async (userPin: string) => {
+    try {
+      console.log('🔐 [BACKGROUND] Continuing existing background training with PIN validation');
+      console.log('🔑 Using auth token:', `${userToken?.substring(0, 20)}...`);
+      
+      // Check if we have a valid socket ID
+      if (!backgroundSocketId) {
+        throw new Error('No background socket ID available');
+      }
+      
+      // ❌ REMOVED: Don't send new training signal - training already started!
+      // We should just validate the PIN with the existing training, not start new training
+      
+      console.log('🔐 [BACKGROUND] PIN validation - continuing with existing training session');
+      console.log('🔌 [BACKGROUND] Using existing socket ID:', backgroundSocketId);
+      
+      // Just log that we're continuing - the existing training should handle PIN internally
+      console.log('✅ [BACKGROUND] PIN submitted for existing training session');
+      
+    } catch (error) {
+      console.error('❌ [BACKGROUND] Failed to continue background training:', error);
+      throw error;
+    }
+  };
+
+  // Replace fake persona creation with real training setup
+  const startPersonaCreation = async () => {
+    setPersonaProgress(0);
+    setPersonaStatus('Initializing');
+    setIsPersonaComplete(false);
+    setHasError(false);
+    
+    // Start the dots animation
+    startDotsAnimation();
+
+    try {
+      console.log('🚀 Starting persona creation...');
+      
+      // Ensure we have a valid authentication token before starting
+      console.log('🔐 Step 1: Ensuring authentication token...');
+      const authToken = await ensureAuthToken();
+      
+      if (!authToken) {
+        throw new Error('Failed to create or retrieve authentication token');
+      }
+      
+      // Set the token in state
+      setUserToken(authToken);
+      console.log('✅ Authentication token set in state:', `${authToken.substring(0, 20)}...`);
+      console.log('🔍 Token length:', authToken.length);
+      
+      // Also verify it was stored properly
+      const storedToken = await AsyncStorage.getItem('onairos_jwt_token');
+      console.log('🔑 Token stored verification:', storedToken ? `${storedToken.substring(0, 20)}...` : 'Not stored');
+      
+      // If userInfo is not set, try to reload it
+      if (!userInfo) {
+        console.log('🔄 UserInfo not available, attempting to reload...');
+        const storedUsername = await getOnairosUsername();
+        const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
+        
+        const newUserInfo = {
+          username: fallbackUsername,
+          email: user?.email || null,
+          id: null
+        };
+        
+        setUserInfo(newUserInfo);
+        setUsername(fallbackUsername);
+        
+        console.log('🧑‍💻 Set user info:', newUserInfo);
+        
+        // Give a moment for state to update
+        await new Promise<void>(resolve => setTimeout(() => resolve(), 200));
+      }
+      
+      // Check again after potential reload
+      const currentUserInfo = userInfo || {
+        username: username || user?.email?.split('@')[0] || user?.name || 'mobile_user',
+        email: user?.email || null,
+        id: null
+      };
+      
+      if (!authToken) {
+        console.error('❌ No authentication token available after ensureAuthToken');
+        throw new Error('No authentication token available');
+      }
+
+      console.log('🔧 Setting up socket connection for real training...');
+      console.log('🧑‍💻 User info available:', currentUserInfo);
+      console.log('🔑 Token available:', !!authToken);
+      console.log('🌐 Attempting to connect to: https://api2.onairos.uk');
+      console.log('📱 Device platform:', Platform.OS);
+      console.log('🔗 Network connectivity check starting...');
+
+      setPersonaStatus('Connecting');
+      setPersonaProgress(5);
+
+      // Initialize socket connection with enhanced configuration
+      socketRef.current = io('https://api2.onairos.uk', {
+        transports: ['websocket', 'polling'], // Add polling as fallback
+        autoConnect: false,
+        timeout: 15000, // Increase timeout to 15 seconds
+        reconnection: true, // Enable reconnection with limits
+        reconnectionAttempts: 3,
+        reconnectionDelay: 1000,
+        forceNew: true // Force a new connection
+      });
+      
+      console.log('🔌 Socket instance created:', {
+        connected: socketRef.current.connected,
+        id: socketRef.current.id,
+        disconnected: socketRef.current.disconnected
+      });
+
+      // Socket event listeners with enhanced error handling
+      socketRef.current.on('connect', () => {
+        console.log('✅ Socket connected for training');
+        console.log('🔌 Socket connection details:', {
+          id: socketRef.current?.id,
+          connected: socketRef.current?.connected,
+          transport: socketRef.current?.io?.engine?.transport?.name
+        });
+        
+        setSocketConnected(true);
+        setPersonaStatus('Starting training');
+        setPersonaProgress(10);
+        
+        const socketId = socketRef.current?.id;
+        console.log('🔌 Socket ID for training:', socketId);
+        
+        if (socketId) {
+          // Add a small delay to ensure socket is fully ready and registered on backend
+          console.log('🔄 Socket ready for persona display with token:', authToken ? `${authToken.substring(0, 20)}...` : 'None');
+          console.log('⏰ Socket registered but training will not start from persona screen...');
+          // ❌ DISABLED: Don't start training from persona screen
+          // Training should only start during connector→PIN transition
+          // setTimeout(() => {
+          //   console.log('🚀 Now starting training with socket ID:', socketId);
+          //   startEnochTraining(socketId, authToken);
+          // }, 2000);
+          
+          // Just show the persona screen without starting training
+          setPersonaStatus('Waiting for training to start from connector→PIN transition');
+        } else {
+          console.error('❌ No socket ID available after connection');
+          setPersonaStatus('Connection error. Please try again.');
+          setHasError(true);
+          stopDotsAnimation();
+        }
+      });
+
+      socketRef.current.on('disconnect', (reason) => {
+        console.log('❌ Socket disconnected, reason:', reason);
+        console.log('🔍 Disconnect details:', {
+          reason: reason,
+          wasConnected: socketConnected,
+          socketId: socketRef.current?.id
+        });
+        setSocketConnected(false);
+      });
+      
+      socketRef.current.on('reconnect', (attemptNumber) => {
+        console.log('🔄 Socket reconnected after', attemptNumber, 'attempts');
+        setSocketConnected(true);
+      });
+      
+      socketRef.current.on('reconnect_attempt', (attemptNumber) => {
+        console.log('🔄 Socket reconnection attempt:', attemptNumber);
+        setPersonaStatus(`Reconnecting... (${attemptNumber}/3)`);
+      });
+      
+      socketRef.current.on('reconnect_error', (error) => {
+        console.error('❌ Socket reconnection error:', error);
+      });
+      
+      socketRef.current.on('reconnect_failed', () => {
+        console.error('❌ Socket reconnection failed after all attempts');
+        setPersonaStatus('Connection failed. Please try again.');
+        setHasError(true);
+        stopDotsAnimation();
+      });
+
+      socketRef.current.on('connect_error', (error) => {
+        console.error('❌ Socket connection error:', error);
+        console.error('❌ Socket error details:', {
+          message: error.message,
+          name: error.name,
+          stack: error.stack,
+          errorObject: error
+        });
+        setPersonaStatus('Connection error. Please try again.');
+        setHasError(true);
+        stopDotsAnimation();
+      });
+
+      socketRef.current.on('trainingCompleted', (data) => {
+        console.log('✅ Training Complete:', data);
+        setPersonaStatus('Running test inference');
+        setPersonaProgress(60);
+      });
+
+      socketRef.current.on('inferenceCompleted', (data) => {
+        console.log('🧠 Inference Complete:', data);
+        setPersonaStatus('Uploading to S3');
+        setPersonaProgress(80);
+        setUserTraits(data.traits);
+        setInferenceResults(data.inferenceResults);
+      });
+
+      socketRef.current.on('modelStandby', (data) => {
+        console.log('🎉 All Complete:', data);
+        
+        // Log completion details based on new spec
+        if (data.completed) {
+          console.log('✅ Training completed:', data.message);
+          console.log('💾 Storage method:', data.storage);
+          console.log('🔐 Encryption enabled:', data.encryption);
+          console.log('🧠 Inference enabled:', data.inference);
+          
+          // Log database info for Enoch mode
+          if (data.databases && Array.isArray(data.databases)) {
+            console.log('🗄️ Databases used:', data.databases.join(', '));
+          }
+          
+          // Log testing mode
+          if (data.testing) {
+            console.log('🧪 Testing mode enabled');
+          }
+        }
+        
+        setIsPersonaComplete(true);
+        setPersonaStatus('Complete!');
+        setPersonaProgress(100);
+        stopDotsAnimation();
+      });
+
+      socketRef.current.on('trainingUpdate', (data) => {
+        console.log('📊 Training update:', data);
+        
+        // Handle YouTube token expiry
+        if (data.error && data.error.includes('YouTube access token has expired')) {
+          console.log('🔄 YouTube token expired, triggering reconnection...');
+          setDataScenario(null);
+          setShowDataWarning(false);
+          setPersonaStatus('YouTube token expired - reconnecting...');
+          
+          // Try to refresh tokens first before full reconnection
+          setTimeout(async () => {
+            try {
+              // Import the refresh function
+              const { refreshYouTubeTokens } = await import('../services/platformAuthService');
+              
+              console.log('🔄 Attempting to refresh YouTube tokens...');
+              const refreshSuccess = await refreshYouTubeTokens();
+              
+              if (refreshSuccess) {
+                console.log('✅ YouTube tokens refreshed, but training restart disabled');
+                setPersonaStatus('YouTube tokens refreshed - but training only starts from connector→PIN');
+                
+                // ❌ DISABLED: Don't restart training from persona screen
+                // Training should only start during connector→PIN transition
+                // if (socketRef.current?.id) {
+                //   startEnochTraining(socketRef.current.id, userToken ?? undefined);
+                // }
+                
+                setHasError(true); // Show error so user can restart flow properly
+              } else {
+                console.log('❌ Token refresh failed, attempting full reconnection...');
+                setPersonaStatus('Token refresh failed - please restart from connector screen');
+                
+                // ❌ DISABLED: Don't restart training from persona screen
+                // Fall back to full reconnection
+                try {
+                  await handleConnectPlatform('youtube');
+                  console.log('✅ YouTube reconnected, but training restart disabled');
+                  setPersonaStatus('YouTube reconnected - please restart from connector screen');
+                  
+                  // ❌ DISABLED: Don't restart training from persona screen
+                  // Training should only start during connector→PIN transition
+                  // if (socketRef.current?.id) {
+                  //   startEnochTraining(socketRef.current.id, userToken ?? undefined);
+                  // }
+                  
+                  setHasError(true); // Show error so user can restart flow properly
+                } catch (reconnectError) {
+                  console.error('❌ YouTube reconnection failed:', reconnectError);
+                  setPersonaStatus('YouTube reconnection failed. Please restart from connector screen.');
+                  setHasError(true);
+                  stopDotsAnimation();
+                }
+              }
+            } catch (error) {
+              console.error('❌ YouTube token refresh/reconnection error:', error);
+              setPersonaStatus('YouTube connection failed. Please try again.');
+              setHasError(true);
+              stopDotsAnimation();
+            }
+          }, 1000);
+          return;
+        }
+        
+        // Handle connections required scenario (pre-training validation)
+        if (data.requiresConnections || data.code === 'CONNECTIONS_REQUIRED') {
+          console.log('🔗 Connections required detected from socket');
+          setDataScenario('CONNECTIONS_REQUIRED');
+          setDataDetails(data);
+          setShowDataWarning(true);
+          setPersonaStatus('Connections required');
+          setHasError(true);
+          stopDotsAnimation();
+          return;
+        }
+        
+        // Handle data scenario responses
+        if (data.code === 'NO_DATA') {
+          console.log('🚫 No data scenario detected');
+          setDataScenario('NO_DATA');
+          setDataDetails(data.details);
+          setShowDataWarning(true);
+          setPersonaStatus('No interaction data found');
+          setHasError(true);
+          stopDotsAnimation();
+          return;
+        }
+        
+        if (data.code === 'LIMITED_DATA') {
+          console.log('ℹ️ Limited data scenario detected');
+          setDataScenario('LIMITED_DATA');
+          setDataDetails(data.details);
+          setShowDataWarning(true);
+          setPersonaStatus('Creating your persona with available data');
+          // Don't set hasError - training continues
+          return;
+        }
+        
+        // Handle regular training updates
+        if (data.error) {
+          console.error('❌ Training update error:', data.error);
+          setPersonaStatus(`Error: ${data.error}`);
+          setHasError(true);
+          stopDotsAnimation();
+        } else if (data.progress) {
+          setPersonaProgress(data.progress);
+          setPersonaStatus(data.status || 'Training in progress');
+          // Clear data warning if training progresses normally
+          if (showDataWarning && data.progress > 30) {
+            setShowDataWarning(false);
+          }
+        }
+      });
+
+      // Connect to socket with timeout
+      console.log('🔌 Attempting to connect to socket...');
+      console.log('🔌 Socket config:', {
+        url: 'https://api2.onairos.uk',
+        transports: ['websocket'],
+        autoConnect: false,
+        timeout: 10000,
+        reconnection: false
+      });
+      socketRef.current.connect();
+      console.log('🔌 Socket connect() called - waiting for connection...');
+      
+      // Add immediate state check
+      setTimeout(() => {
+        console.log('🔍 Socket state after 1 second:', {
+          connected: socketRef.current?.connected,
+          disconnected: socketRef.current?.disconnected,
+          id: socketRef.current?.id,
+          engineConnected: socketRef.current?.io?.engine?.readyState
+        });
+      }, 1000);
+      
+      setTimeout(() => {
+        console.log('🔍 Socket state after 5 seconds:', {
+          connected: socketRef.current?.connected,
+          disconnected: socketRef.current?.disconnected,
+          id: socketRef.current?.id,
+          engineConnected: socketRef.current?.io?.engine?.readyState
+        });
+      }, 5000);
+      
+      // Set a timeout for socket connection with enhanced fallback
+      setTimeout(() => {
+        if (!socketConnected && socketRef.current && !socketRef.current.connected) {
+          console.error('❌ Socket connection timeout after 20 seconds');
+          console.error('🔍 Socket state:', {
+            connected: socketRef.current.connected,
+            disconnected: socketRef.current.disconnected,
+            id: socketRef.current.id
+          });
+          
+          setPersonaStatus('Connection timeout. Please check your internet and try again.');
+          setHasError(true);
+          stopDotsAnimation();
+          
+          // Cleanup socket
+          if (socketRef.current) {
+            socketRef.current.disconnect();
+            socketRef.current = null;
+          }
+        }
+      }, 20000); // Increased timeout to 20 seconds
+      
+    } catch (error) {
+      console.error('❌ Error in startPersonaCreation:', error);
+      setPersonaStatus('Failed to initialize training. Please try again.');
+      setHasError(true);
+      stopDotsAnimation();
+    }
+  };
+
+  // Get user-friendly status message based on progress (updated for real training)
+  const getPersonaStatusMessage = (progress: number) => {
+    if (hasError) return 'Something went wrong. Please try again.';
+    if (isPersonaComplete) return 'Your persona is ready! 🎉';
+
+    let baseMessage = '';
+    if (progress < 20) {
+      baseMessage = 'Keeping your data private';
+    } else if (progress < 40) {
+      baseMessage = 'Trying to understand your mind';
+    } else if (progress < 60) {
+      baseMessage = 'You\'re more interesting than I expected';
+    } else if (progress < 80) {
+      baseMessage = 'Finalizing your unique persona';
+    } else if (progress < 95) {
+      baseMessage = 'Almost done';
+    } else {
+      baseMessage = 'Just a few more seconds';
+    }
+
+    return baseMessage + animatedDots;
+  };
+
+  // Handle persona completion - now continues the onboarding flow instead of going to separate training
+  const handlePersonaComplete = async () => {
+    console.log('🎉 Real persona creation completed successfully');
+    // Cleanup socket connection
+    if (socketRef.current) {
+      console.log('🔌 Disconnecting training socket...');
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+    // Clear temporary PIN since training is complete
+    clearTemporaryPin();
+    // Set the completion flag BEFORE calling onComplete
+    isCompletingRef.current = true;
+    
+    // Get the real authentication token instead of using placeholder
+    try {
+      const realToken = await AsyncStorage.getItem('onairos_jwt_token') || 
+                       await AsyncStorage.getItem('enoch_token') || 
+                       await AsyncStorage.getItem('auth_token');
+      
+      if (realToken) {
+        console.log('✅ Using real authentication token for onComplete:', `${realToken.substring(0, 30)}...`);
+        // Call onComplete with the REAL token that was created during ensureAuthToken
+        onComplete?.('https://api2.onairos.uk', realToken, { email: userInfo?.email || '', ...userInfo });
+      } else {
+        console.error('❌ No real authentication token found after training completion');
+        // Fallback to placeholder token if no real token exists
+        onComplete?.('https://api2.onairos.uk', 'training-complete-token', { email: userInfo?.email || '', ...userInfo });
+      }
+    } catch (error) {
+      console.error('❌ Error retrieving real token for onComplete:', error);
+      // Fallback to placeholder token on error
+      onComplete?.('https://api2.onairos.uk', 'training-complete-token', { email: userInfo?.email || '', ...userInfo });
+    }
+  };
+
+  // Ensure authentication token exists before training
+  const ensureAuthToken = async () => {
+    try {
+      // Check if we already have an authentication token (prioritize Enoch-specific tokens)
+      let existingToken = await AsyncStorage.getItem('onairos_jwt_token') || 
+                          await AsyncStorage.getItem('enoch_token') || 
+                          await AsyncStorage.getItem('auth_token');
+      
+      if (existingToken && existingToken.trim().length > 20) {
+        console.log('✅ Authentication token already exists:', `${existingToken.substring(0, 20)}...`);
+        console.log('🔍 Token length:', existingToken.length);
+        console.log('🔍 Token format check:', existingToken.includes('.') ? 'Looks like JWT' : 'Not JWT format');
+        return existingToken;
+      }
+
+      console.log('🔐 Creating Enoch authentication token for universal onboarding...');
+      
+      // Create user accounts and get proper Enoch token
+      const fallbackEmail = user?.email || `${username || 'user'}@onairos.temp`;
+      const fallbackUsername = username || user?.name?.split('@')[0] || 'mobile_user';
+      
+      console.log('🔐 Using credentials:', { email: fallbackEmail, username: fallbackUsername });
+      
+      // Step 1: Create Enoch user first
+      console.log('🔐 Step 1: Creating Enoch user...');
+      try {
+        const enochRegisterResponse = await fetch('https://api2.onairos.uk/enoch/users/register', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            email: fallbackEmail,
+            name: fallbackUsername,
+            photoUrl: ''
+          })
+        });
+        
+        console.log('📡 Enoch register response status:', enochRegisterResponse.status);
+        const enochResponseData = await enochRegisterResponse.json();
+        console.log('🔗 Enoch user creation response:', enochResponseData);
+      } catch (enochError) {
+        console.warn('⚠️ Enoch user creation failed (continuing):', enochError);
+      }
+      
+      // Step 2: Create Onairos account to get JWT token (this is the critical step)
+      console.log('🔐 Step 2: Creating Onairos account...');
+      const onairosSignupResponse = await fetch('https://api2.onairos.uk/register/enoch', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          email: fallbackEmail,
+          username: fallbackUsername,
+          name: fallbackUsername
+        })
+      });
+      
+      console.log('📡 Onairos register response status:', onairosSignupResponse.status);
+      
+      if (!onairosSignupResponse.ok) {
+        const errorText = await onairosSignupResponse.text();
+        console.error('❌ Onairos signup failed:', errorText);
+        throw new Error(`Onairos signup failed: ${onairosSignupResponse.status} ${errorText}`);
+      }
+      
+      const onairosResponseData = await onairosSignupResponse.json();
+      console.log('🔗 Onairos account creation response:', onairosResponseData);
+      
+      // Extract the token from the response
+      let authToken = null;
+      if (onairosResponseData.token) {
+        authToken = onairosResponseData.token;
+      } else if (onairosResponseData.data?.token) {
+        authToken = onairosResponseData.data.token;
+      } else if (onairosResponseData.jwt) {
+        authToken = onairosResponseData.jwt;
+      }
+      
+      if (!authToken) {
+        console.error('❌ No token found in response:', onairosResponseData);
+        throw new Error('No authentication token returned from server');
+      }
+      
+      // Validate the token format
+      if (typeof authToken !== 'string' || authToken.length < 20) {
+        console.error('❌ Invalid token format:', authToken);
+        throw new Error('Invalid token format received');
+      }
+      
+      // Check if it looks like a JWT
+      const jwtParts = authToken.split('.');
+      if (jwtParts.length !== 3) {
+        console.warn('⚠️ Token does not appear to be a valid JWT:', `${authToken.substring(0, 20)}...`);
+      } else {
+        console.log('✅ Token appears to be a valid JWT format');
+      }
+      
+      // Store the token in multiple locations for maximum compatibility
+      await AsyncStorage.setItem('onairos_jwt_token', authToken);
+      await AsyncStorage.setItem('auth_token', authToken);
+      await AsyncStorage.setItem('enoch_token', authToken);
+      await AsyncStorage.setItem('onairos_username', onairosResponseData.username || fallbackUsername);
+      
+      console.log('✅ Successfully stored authentication tokens');
+      console.log('🔑 Token preview:', `${authToken.substring(0, 20)}...`);
+      console.log('🔑 Token length:', authToken.length);
+      console.log('👤 Username stored:', onairosResponseData.username || fallbackUsername);
+      
+      return authToken;
+      
+    } catch (error) {
+      console.error('❌ Error ensuring authentication token:', error);
+      throw error;
+    }
+  };
+
+  const canProceed = Object.values(platformToggles).some(value => value);
+
+  const handleProceed = () => {
+    if (canProceed) {
+      // Trigger haptic feedback when continue button is pressed
+      triggerHaptic(HapticType.BUTTON_PRESS);
+      
+      // ✅ NEW: Start background training when transitioning from connectors to PIN screen
+      console.log('🚀 [TRANSITION] Starting background training during connect → pin transition');
+      startBackgroundTraining().catch(error => {
+        console.error('❌ [TRANSITION] Background training failed during transition:', error);
+        // Continue to PIN screen even if training fails
+      });
+      
+      setStep('pin');
+    }
+  };
+
+  const handleReviewerBypass = () => {
+    console.log('Reviewer bypass activated');
+    
+    // Set the completion flag BEFORE calling onComplete
+    isCompletingRef.current = true;
+    
+    // Call onComplete with a special reviewer token that the parent can recognize
+    onComplete?.('https://api2.onairos.uk', 'reviewer-bypass-token', { email: 'reviewer@apple.com' });
+  };
+
+  // Removed navigation dependency for SDK compatibility
+
+  // Training is now handled by the TrainingModal component
+
+  // ✅ NEW: Background training function - starts when PIN screen appears
+  const startBackgroundTraining = useCallback(async (): Promise<void> => {
+    try {
+      console.log('🚀 [BACKGROUND] Starting background training optimization...');
+      setBackgroundTrainingProgress('Connecting...');
+      
+      // Step 1: Ensure authentication token exists
+      const authToken = await ensureAuthToken();
+      if (!authToken) {
+        throw new Error('Failed to create authentication token for background training');
+      }
+      
+      console.log('✅ [BACKGROUND] Auth token ready:', `${authToken.substring(0, 20)}...`);
+      setUserToken(authToken);
+      
+      // Step 2: Set up user info if not available
+      if (!userInfo) {
+        const storedUsername = await getOnairosUsername();
+        const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
+        
+        const newUserInfo = {
+          username: fallbackUsername,
+          email: user?.email || null,
+          id: null
+        };
+        
+        setUserInfo(newUserInfo);
+        setUsername(fallbackUsername);
+        console.log('🧑‍💻 [BACKGROUND] User info set:', newUserInfo);
+      }
+      
+      // Step 3: Initialize socket connection for background training
+      console.log('🔌 [BACKGROUND] Setting up socket for background training...');
+      setBackgroundTrainingProgress('Initializing data collection...');
+      
+      const backgroundSocket = io('https://api2.onairos.uk', {
+        transports: ['websocket', 'polling'],
+        autoConnect: false,
+        timeout: 15000,
+        reconnection: true,
+        reconnectionAttempts: 3,
+        reconnectionDelay: 1000,
+        forceNew: true
+      });
+      
+      // Set up socket event listeners for background training
+      backgroundSocket.on('connect', async () => {
+        console.log('✅ [BACKGROUND] Socket connected, starting background data collection...');
+        const socketId = backgroundSocket.id;
+        setBackgroundSocketId(socketId || null);
+        setBackgroundTrainingProgress('Collecting your data...');
+        
+        if (socketId) {
+          // Step 4: Start background training WITHOUT PIN (per backend instructions)
+          await startBackgroundEnochTraining(socketId, authToken);
+        }
+      });
+      
+      backgroundSocket.on('trainingUpdate', (data) => {
+        if (data.progress) {
+          setBackgroundTrainingProgress(data.status || 'Processing...');
+          console.log('📊 [BACKGROUND] Training progress:', data.progress, '%');
+        }
+      });
+      
+      backgroundSocket.on('disconnect', () => {
+        console.log('❌ [BACKGROUND] Socket disconnected');
+      });
+      
+      // Store socket reference for later use
+      socketRef.current = backgroundSocket;
+      
+      // Connect the socket to start background training
+      backgroundSocket.connect();
+      
+      console.log('✅ [BACKGROUND] Background training initiated successfully');
+      
+    } catch (error) {
+      console.error('❌ [BACKGROUND] Background training failed:', error);
+      setBackgroundTrainingProgress('');
+      throw error;
+    }
+  }, [userInfo, username, user]);
+
+  // ✅ NEW: Background training API call - starts data collection without PIN
+  const startBackgroundEnochTraining = async (socketId: string, authToken: string) => {
+    try {
+      console.log('🚀 [BACKGROUND] Starting background training with socketId:', socketId);
+      console.log('🔑 Using auth token:', `${authToken.substring(0, 20)}...`);
+      
+      // Prepare background training data
+      const backgroundData = {
+        socketId,
+        username: userInfo?.username || userInfo?.name || username || 'mobile_user',
+        email: userInfo?.email || null,
+        modelKey: null,
+        connectedPlatforms: [], // No connected platforms for background training
+        platformConnections: {}, // No platform connections for background training
+        // No encrypted PIN for background training
+      };
+      
+      console.log('📤 Sending background training data to /mobile-training/enoch:', backgroundData);
+      
+      // Use the new training function that includes YouTube migration check
+      const backgroundResult = await startEnochTrainingWithYouTubeCheck(backgroundData);
+      console.log('📡 Background training API response:', backgroundResult);
+      
+      // Handle CONNECTIONS_REQUIRED scenario (pre-training validation)
+      if (backgroundResult.requiresConnections || backgroundResult.code === 'CONNECTIONS_REQUIRED') {
+        console.log('🔗 Connections required detected from background training');
+        setDataScenario('CONNECTIONS_REQUIRED');
+        setDataDetails(backgroundResult);
+        setShowDataWarning(true);
+        setPersonaStatus('Connections required');
+        setHasError(true);
+        stopDotsAnimation();
+        return;
+      }
+      
+      if (backgroundResult.success) {
+        console.log('🚀 Background training started:', backgroundResult.message);
+        console.log('🎯 Background training Features:', backgroundResult.features);
+        
+        // ✅ CRITICAL: Set background training started flag
+        setIsBackgroundTrainingStarted(true);
+        
+        // Log the new features from the spec
+        if (backgroundResult.features) {
+          console.log('✅ Inference enabled:', backgroundResult.features.inference);
+          console.log('💾 Storage method:', backgroundResult.features.storage);
+          console.log('🔒 Compression enabled:', backgroundResult.features.compression);
+          console.log('🔐 Encryption enabled:', backgroundResult.features.encryption);
+          console.log('📊 Training type:', backgroundResult.features.type);
+          console.log('🗄️ Databases:', backgroundResult.features.databases);
+          console.log('📈 Query scores enabled:', backgroundResult.features.queryScores);
+        }
+        
+        setPersonaStatus('Background training model...');
+        setPersonaProgress(25);
+      } else {
+        console.error('❌ Background training start failed:', backgroundResult.error);
+        setPersonaStatus(`Error: ${backgroundResult.error || 'Background training failed to start'}`);
+        setHasError(true);
+        stopDotsAnimation();
+      }
+    } catch (error) {
+      console.error('❌ Background training start error:', error);
+      setPersonaStatus(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      setHasError(true);
+      stopDotsAnimation();
+    }
+  };
+
+  return (
+    <Modal
+      transparent={true}
+      visible={modalVisible}
+      animationType="none"
+      onRequestClose={handleClose}
+    >
+      <View style={styles.modalOverlay}>
+        <Animated.View
+          style={[
+            styles.bottomSheet,
+            { transform: [{ translateY: slideAnim }] },
+          ]}
+        >
+          <SafeAreaView style={styles.container}>
+            <View style={styles.handleContainer}>
+              <TouchableOpacity onPress={handleClose} style={styles.handleButton}>
+                <View style={styles.handle} />
+              </TouchableOpacity>
+            </View>
+            
+            {step === 'connect' && (
+              <View style={styles.connectContainer}>
+                <View style={styles.header}>
+                  <View style={styles.headerContent}>
+                    <View style={styles.appIcon}>
+                      <Text style={styles.appIconText}>O</Text>
+                    </View>
+                    <Text style={styles.arrow}>→</Text>
+                    <View style={styles.onairosIcon}>
+                      <Image 
+                        source={require('../assets/images/Enochicon1.png')} 
+                        style={styles.onairosIconImage} 
+                        resizeMode="contain"
+                      />
+                    </View>
+                  </View>
+                  <View style={styles.titleContainer}>
+                    <Text style={styles.mainTitle}>
+                      {isExistingUser ? 'Add More Data to Enoch' : 'Connect your platforms to Enoch via Onairos'}
+                    </Text>
+                    <Text style={styles.privacyMessage}>
+                      {isExistingUser 
+                        ? 'Connect additional accounts to enhance your digital personality. Your privacy is ensured.'
+                        : 'Connect one account to get started. Each additional connection improves your match quality. Your privacy is ensured.'
+                      }{' '}
+                      <Text 
+                        style={styles.privacyLink}
+                        onPress={() => setStep('privacy')}
+                      >
+                        How it's used →
+                      </Text>
+                    </Text>
+                    
+                    {/* Existing User Info Banner */}
+                    {isExistingUser && existingUserInfo && (
+                      <View style={styles.existingUserBanner}>
+                        <Text style={styles.existingUserText}>
+                          ✅ You already have {existingUserInfo.existingUserData?.summary?.connectionsCount || 0} connections
+                        </Text>
+                        <Text style={styles.existingUserSubtext}>
+                          Add more platforms to get even better insights
+                        </Text>
+                      </View>
+                    )}
+                    {connectionStatuses['linkedin'] === 'connected' && 
+                     Object.values(connectionStatuses).filter(status => status === 'connected').length === 1 && (
+                      <View style={styles.linkedinRequirementContainer}>
+                        <Text style={styles.linkedinRequirementText}>
+                          <Text style={styles.linkedinRequirementAsterisk}>*</Text>
+                          <Text style={styles.linkedinRequirementMessage}> LinkedIn requires pairing with an additional platform for optimal results</Text>
+                        </Text>
+                      </View>
+                    )}
+                  </View>
+                </View>
+                
+                <View
+                  style={{
+                    height: 1,
+                    backgroundColor: '#CCCCCC',
+                    width: '100%',
+                    marginVertical: 0,
+                  }}
+                />
+
+                <ScrollView 
+                  ref={scrollViewRef}
+                  style={styles.platformsScrollView}
+                  contentContainerStyle={styles.platformsScrollContent}
+                  showsVerticalScrollIndicator={true}
+                  bounces={true}
+                  alwaysBounceVertical={true}
+                  indicatorStyle="black"
+                  scrollEventThrottle={16}
+                  directionalLockEnabled={true}
+                  keyboardShouldPersistTaps="handled"
+                  decelerationRate="normal"
+                  contentOffset={{ x: 0, y: 60 }}
+                >
+                  <View style={styles.platformsContainer}>
+                    {primaryAuthOnly ? (
+                      // Only show email option when primaryAuthOnly is true
+                      <View style={styles.platformItem}>
+                        <View style={styles.platformInfo}>
+                          <View style={[styles.platformIcon, { backgroundColor: '#4285F4' }]}>
+                            <Text style={styles.platformIconText}>@</Text>
+                          </View>
+                          <Text style={styles.platformName}>Email</Text>
+                        </View>
+                        
+                        <TouchableOpacity 
+                          onPress={async () => {
+                            // Trigger haptic feedback when sign in button is pressed
+                            triggerHaptic(HapticType.BUTTON_PRESS);
+                            
+                            // Mark email as connected for primaryAuth flow
+                            setConnections(prev => ({
+                              ...prev,
+                              email: { userName: email || 'user@example.com', connected: true }
+                            }));
+                            setConnectionStatuses(prev => ({
+                              ...prev,
+                              email: 'connected'
+                            }));
+                            setPlatformToggles(prev => ({
+                              ...prev,
+                              email: true
+                            }));
+
+                            // Store the connected platform
+                            await storeConnectedPlatform('email');
+                            
+                            setStep('connections');
+                          }}
+                          style={[
+                            styles.footerButtonConfirm, 
+                            { paddingVertical: 8, paddingHorizontal: 16 }
+                          ]}
+                        >
+                          <Text style={styles.footerButtonTextConfirm}>
+                            Sign in
+                          </Text>
+                        </TouchableOpacity>
+                      </View>
+                    ) : (
+                      // Show main platforms first
+                      <>
+                        {mainPlatforms.map(platform => {
+                          const isConnected = connectionStatuses[platform.id] === 'connected';
+                          const isPlatformConnecting = connectingPlatform === platform.id;
+                          
+                          return (
+                            <View key={platform.id} style={styles.platformItem}>
+                              <View style={styles.platformInfo}>
+                                {platform.id === 'linkedin' ? (
+                                  // Use square container for LinkedIn
+                                  <View style={[styles.linkedinPlatformIcon, { backgroundColor: platform.color }]}>
+                                    <Image 
+                                      source={getPlatformIcon(platform.id)}
+                                      style={styles.platformIconImage}
+                                      resizeMode="contain"
+                                    />
+                                  </View>
+                                ) : platform.id === 'pinterest' ? (
+                                  // Use smaller circular container for Pinterest
+                                  <View style={[styles.pinterestPlatformIcon, { backgroundColor: platform.color }]}>
+                                    <Image 
+                                      source={getPlatformIcon(platform.id)}
+                                      style={styles.pinterestIconImage}
+                                      resizeMode="contain"
+                                    />
+                                  </View>
+                                ) : (
+                                  <View style={[styles.platformIcon, { backgroundColor: platform.color }]}>
+                                    <Image 
+                                      source={getPlatformIcon(platform.id)}
+                                      style={
+                                        platform.id === 'youtube' ? styles.youtubeIconImage : 
+                                        styles.platformIconImage
+                                      }
+                                      resizeMode="contain"
+                                    />
+                                  </View>
+                                )}
+                                <Text style={styles.platformName}>
+                                  {platform.name}
+                                  {platform.id === 'linkedin' && connectionStatuses['linkedin'] === 'connected' && 
+                                   Object.values(connectionStatuses).filter(status => status === 'connected').length === 1 && <Text style={styles.asterisk}>*</Text>}
+                                </Text>
+                              </View>
+                              
+                              <TouchableOpacity 
+                                onPress={() => {
+                                  if (isConnected) {
+                                    // Handle disconnect
+                                    handleDisconnectPlatform(platform.id, platform.name);
+                                  } else {
+                                    // Handle connect
+                                    handleConnectPlatform(platform.id);
+                                  }
+                                }}
+                                onLongPress={platform.id === 'youtube' ? () => {
+                                  // Start a timer for haptic feedback at 2 seconds
+                                  const hapticTimer = setTimeout(() => {
+                                    // Provide haptic feedback
+                                    Vibration.vibrate(100);
+                                  }, 2000);
+                                  
+                                  // Start a timer for 4 seconds for the bypass
+                                  const bypassTimer = setTimeout(() => {
+                                    handleReviewerBypass();
+                                  }, 4000);
+                                  
+                                  // Store the timer
+                                  setLongPressTimer(bypassTimer);
+                                } : undefined}
+                                onPressOut={platform.id === 'youtube' ? () => {
+                                  // Clear the timer if the press is released before 4 seconds
+                                  if (longPressTimer) {
+                                    clearTimeout(longPressTimer);
+                                    setLongPressTimer(null);
+                                  }
+                                } : undefined}
+                                style={[
+                                  isConnected ? styles.footerButtonConnected : styles.footerButtonConfirm, 
+                                  { paddingVertical: 8, paddingHorizontal: 16 }
+                                ]}
+                                disabled={isPlatformConnecting}
+                              >
+                                {isPlatformConnecting ? (
+                                  <ActivityIndicator size="small" color="#fff" />
+                                ) : (
+                                  <Text style={isConnected ? styles.footerButtonTextConnected : styles.footerButtonTextConfirm}>
+                                    {isConnected ? 'Connected' : 'Connect'}
+                                  </Text>
+                                )}
+                              </TouchableOpacity>
+                            </View>
+                          );
+                        })}
+
+                        {/* Add additional platforms toggle button */}
+                        <TouchableOpacity 
+                          style={styles.additionalPlatformsToggle}
+                          onPress={() => {
+                            triggerHaptic(HapticType.BUTTON_PRESS);
+                            const newShowState = !showAdditionalPlatforms;
+                            
+                            if (newShowState) {
+                              // Expanding - show platforms first, then animate in and scroll
+                              setShowAdditionalPlatforms(true);
+                              Animated.timing(additionalPlatformsOpacity, {
+                                toValue: 1,
+                                duration: 300,
+                                useNativeDriver: true,
+                              }).start();
+                              
+                              // Auto-scroll to reveal additional platforms when expanding
+                              setTimeout(() => {
+                                scrollViewRef.current?.scrollTo({
+                                  y: 220, // Scroll down to reveal additional platforms and hint at Gmail
+                                  animated: true,
+                                });
+                              }, 100);
+                            } else {
+                              // Collapsing - animate out first, then hide platforms and scroll back up
+                              Animated.timing(additionalPlatformsOpacity, {
+                                toValue: 0,
+                                duration: 300,
+                                useNativeDriver: true,
+                              }).start(() => {
+                                setShowAdditionalPlatforms(false);
+                              });
+                              
+                              // Scroll back up smoothly when collapsing
+                              setTimeout(() => {
+                                scrollViewRef.current?.scrollTo({
+                                  y: 0, // Scroll back to top
+                                  animated: true,
+                                });
+                              }, 100);
+                            }
+                          }}
+                        >
+                          <Text style={styles.additionalPlatformsText}>
+                            {showAdditionalPlatforms ? '− Hide additional platforms' : '+ Add additional platforms'}
+                          </Text>
+                        </TouchableOpacity>
+
+                        {/* Show additional platforms when expanded */}
+                        {showAdditionalPlatforms && (
+                          <Animated.View style={{ opacity: additionalPlatformsOpacity }}>
+                            {additionalPlatforms.map(platform => {
+                          const isConnected = connectionStatuses[platform.id] === 'connected';
+                          const isPlatformConnecting = connectingPlatform === platform.id;
+                          
+                          return (
+                            <View key={platform.id} style={styles.platformItem}>
+                              <View style={styles.platformInfo}>
+                                {platform.id === 'gmail' ? (
+                                  // Use the same wrapper for size/centering, but transparent background
+                                  <View style={[styles.platformIcon, { backgroundColor: 'transparent' }]}>
+                                    <Image
+                                      source={getPlatformIcon(platform.id)}
+                                      style={styles.gmailIconImage}
+                                      resizeMode="contain"
+                                    />
+                                  </View>
+                                ) : (
+                                  <View style={[styles.platformIcon, { backgroundColor: platform.color }]}>
+                                    <Image 
+                                      source={getPlatformIcon(platform.id)}
+                                      style={
+                                        platform.id === 'reddit' ? styles.redditIconImage : 
+                                        styles.platformIconImage
+                                      }
+                                      resizeMode="contain"
+                                    />
+                                  </View>
+                                )}
+                                <Text style={styles.platformName}>{platform.name}</Text>
+                              </View>
+                              
+                              <TouchableOpacity 
+                                onPress={() => {
+                                  if (isConnected) {
+                                    // Handle disconnect
+                                    handleDisconnectPlatform(platform.id, platform.name);
+                                  } else {
+                                    // Handle connect
+                                    handleConnectPlatform(platform.id);
+                                  }
+                                }}
+                                style={[
+                                  isConnected ? styles.footerButtonConnected : styles.footerButtonConfirm, 
+                                  { paddingVertical: 8, paddingHorizontal: 16 }
+                                ]}
+                                disabled={isPlatformConnecting}
+                              >
+                                {isPlatformConnecting ? (
+                                  <ActivityIndicator size="small" color="#fff" />
+                                ) : (
+                                  <Text style={isConnected ? styles.footerButtonTextConnected : styles.footerButtonTextConfirm}>
+                                    {isConnected ? 'Connected' : 'Connect'}
+                                  </Text>
+                                )}
+                              </TouchableOpacity>
+                            </View>
+                          );
+                        })}
+                          </Animated.View>
+                        )}
+                      </>
+                    )}
+                  </View>
+                </ScrollView>
+                
+                <View style={styles.footer}>
+                  <TouchableOpacity
+                    style={styles.footerButtonCancel}
+                    onPress={handleClose}
+                  >
+                    <Text style={styles.footerButtonText}>Cancel</Text>
+                  </TouchableOpacity>
+                  
+                  <TouchableOpacity
+                    style={[
+                      styles.footerButtonConfirm,
+                      !canProceed && styles.footerButtonDisabled,
+                    ]}
+                    onPress={handleProceed}
+                    disabled={!canProceed}
+                  >
+                    <Text style={styles.footerButtonTextConfirm}>Continue</Text>
+                  </TouchableOpacity>
+                </View>
+              </View>
+            )}
+
+                            {step === 'pin' && (
+                  <PinInput
+                    onSubmit={handlePinSubmit}
+                    minLength={8}
+                    requireSpecialChar
+                    requireNumber
+                    onBack={() => setStep('connect')}
+                    enableBiometricStorage={true}
+                    // ✅ REMOVED: Background training now starts during transition, not on component mount
+                    // onBackgroundTrainingStart={startBackgroundTraining}
+                    showBackgroundProgress={true}
+                    backgroundProgressText={backgroundTrainingProgress || "Training is starting in the background..."}
+                  />
+                )}
+
+            {step === 'persona' && (
+              <View style={styles.personaContainer}>
+                <View style={styles.personaHeaderWithBack}>
+                  <TouchableOpacity 
+                    style={[
+                      styles.personaBackButton,
+                      // Highlight the back button when there's insufficient data
+                      (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') && styles.highlightedBackButton
+                    ]} 
+                    onPress={() => setStep('connect')} // Changed from 'pin' to 'connect' to go back to platform connections
+                  >
+                    <Text style={[
+                      { fontSize: 24 },
+                      // Make the arrow more prominent when insufficient data
+                      (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') && styles.highlightedBackArrow
+                    ]}>←</Text>
+                  </TouchableOpacity>
+                  <Text style={styles.personaTitle}>
+                    {isPersonaComplete ? 'Your persona is ready! 🎉' : 'Creating your persona'}
+                  </Text>
+                </View>
+                <Text style={styles.personaSubtitle}>
+                  {isPersonaComplete 
+                    ? 'We\'ve created a personalized experience just for you.'
+                    : 'This will only take a moment. We\'re personalizing your experience.'
+                  }
+                </Text>
+                
+                <View style={styles.personaProgressContainer}>
+                  <View style={styles.personaProgressBar}>
+                    <View 
+                      style={[
+                        styles.personaProgressFill, 
+                        { width: `${personaProgress}%` },
+                        hasError && styles.progressError
+                      ]} 
+                    />
+                </View>
+                  <Text style={styles.personaProgressText}>{Math.round(personaProgress)}%</Text>
+                  {!isPersonaComplete && (
+                    <Text style={styles.personaStatusText}>{getPersonaStatusMessage(personaProgress)}</Text>
+                  )}
+                </View>
+
+                {/* Data Warning Component */}
+                {showDataWarning && dataScenario && (
+                  <View style={[
+                    styles.dataWarningContainer,
+                    (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? styles.dataConnectionsRequired : styles.dataInfoContainer
+                  ]}>
+                    <View style={styles.dataWarningHeader}>
+                      <Text style={styles.dataWarningIcon}>
+                        {(dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? '‼️' : 'ℹ️'}
+                      </Text>
+                      <Text style={[
+                        styles.dataWarningTitle,
+                        { color: (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? '#000000' : '#0369A1' }
+                      ]}>
+                        {dataScenario === 'CONNECTIONS_REQUIRED'
+                          ? 'Not enough data to personalize your experience'
+                          : dataScenario === 'NO_DATA' 
+                            ? 'Not enough data to personalize your experience' 
+                            : 'Working with your available data'
+                        }
+                      </Text>
+                    </View>
+                    
+                    <Text style={[
+                      styles.dataWarningMessage,
+                      { color: (dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') ? '#374151' : '#0C4A6E' }
+                    ]}>
+                      {dataScenario === 'CONNECTIONS_REQUIRED'
+                        ? 'To provide the best experience possible, please go back and add an additional platform.'
+                        : dataScenario === 'NO_DATA' 
+                          ? 'To provide the best experience possible, please go back and add an additional platform.'
+                          : 'We\'re building your persona with the information currently available.'
+                      }
+                    </Text>
+                    
+                    {/* Add back button call-to-action for NO_DATA and CONNECTIONS_REQUIRED scenarios */}
+                    {(dataScenario === 'NO_DATA' || dataScenario === 'CONNECTIONS_REQUIRED') && (
+                      <TouchableOpacity 
+                        style={styles.goBackButton}
+                        onPress={() => setStep('connect')}
+                        activeOpacity={0.8}
+                      >
+                        <Text style={styles.goBackButtonText}>← Add another platform</Text>
+                      </TouchableOpacity>
+                    )}
+                    
+                    {dataDetails?.suggestions && dataScenario !== 'NO_DATA' && (
+                      <View style={[
+                        styles.dataWarningSuggestions,
+                        { borderTopColor: 'rgba(3, 105, 161, 0.2)' }
+                      ]}>
+                        <Text style={[
+                          styles.dataWarningSuggestionsTitle,
+                          { color: '#0369A1' }
+                        ]}>
+                          For higher model quality:
+                        </Text>
+                        {dataDetails.suggestions.slice(0, 2).map((suggestion: string, index: number) => {
+                          // Override specific suggestions with new text
+                          let displayText = suggestion;
+                          if (suggestion.toLowerCase().includes('better model quality') || 
+                              suggestion.toLowerCase().includes('interact with more content')) {
+                            displayText = 'Connect additional platforms';
+                          } else if (suggestion.toLowerCase().includes('like/dislike more videos') || 
+                                     suggestion.toLowerCase().includes('posts, or content')) {
+                            displayText = 'Interact and generate more content (like/dislike more videos, etc.)';
+                          }
+                          
+                          return (
+                            <Text key={index} style={[
+                              styles.dataWarningSuggestionItem,
+                              { color: '#0C4A6E' }
+                            ]}>
+                              • {displayText}
+                            </Text>
+                          );
+                        })}
+                      </View>
+                    )}
+                    
+                    {dataScenario === 'LIMITED_DATA' && (
+                      <Text style={[
+                        styles.dataWarningContinueNote,
+                        { color: '#0369A1' }
+                      ]}>
+                        
+                      </Text>
+                    )}
+                  </View>
+                )}
+
+                {/* YouTube Reconnection Indicator */}
+                {personaStatus.includes('YouTube token expired') && (
+                  <View style={[styles.dataWarningContainer, styles.dataInfoContainer]}>
+                    <View style={styles.dataWarningHeader}>
+                      <Text style={styles.dataWarningIcon}>🔄</Text>
+                      <Text style={[styles.dataWarningTitle, { color: '#0369A1' }]}>
+                        Refreshing YouTube connection
+                      </Text>
+                    </View>
+                    <Text style={[styles.dataWarningMessage, { color: '#0C4A6E' }]}>
+                      Your YouTube access expired. We're automatically reconnecting...
+                    </Text>
+                  </View>
+                )}
+
+                {isPersonaComplete && (
+                  <View style={styles.personaCompleteContainer}>
+                    <TouchableOpacity
+                      style={styles.personaContinueButton}
+                      onPress={() => {
+                        console.log('🎯 Continue button pressed - completing onboarding');
+                        handlePersonaComplete();
+                      }}
+                      activeOpacity={0.8}
+                    >
+                      <Text style={styles.personaContinueButtonText}>Continue</Text>
+                    </TouchableOpacity>
+                  </View>
+                )}
+
+                {hasError && !isPersonaComplete && !showDataWarning && (
+                  <View style={styles.personaCompleteContainer}>
+                    <Text style={styles.personaCompleteTitle}>Something went wrong</Text>
+                    <Text style={styles.personaCompleteSubtitle}>
+                      Please try again or contact support if the issue persists.
+                    </Text>
+                    <TouchableOpacity
+                      style={[styles.personaContinueButton, { backgroundColor: '#FF3B30' }]}
+                      onPress={() => {
+                        console.log('🔄 Retry button pressed - redirecting to connector screen');
+                        setHasError(false);
+                        // ❌ DISABLED: Don't start new training on retry
+                        // Training should only start during connector→PIN transition
+                        // startPersonaCreation();
+                        
+                        // Instead, go back to connector screen so user can restart proper flow
+                        setStep('connect');
+                        setPersonaStatus('Initializing');
+                        setPersonaProgress(0);
+                      }}
+                      activeOpacity={0.8}
+                    >
+                      <Text style={styles.personaContinueButtonText}>Restart</Text>
+                    </TouchableOpacity>
+                  </View>
+                )}
+              </View>
+            )}
+
+
+            
+            {step === 'oauth' && oauthUrl && (
+              <View style={{ marginTop: -17 }}>
+                <OAuthWebView
+                  url={oauthUrl}
+                  platform={currentPlatform}
+                  onClose={() => {
+                    setStep('connect');
+                    setOauthUrl('');
+                  }}
+                  onSuccess={handleOAuthSuccess}
+                  onComplete={() => setStep('connect')}
+                />
+              </View>
+            )}
+            
+            {step === 'privacy' && (
+              <View style={styles.modalContent}>
+                <View style={styles.privacyHeader}>
+                  <TouchableOpacity 
+                    style={styles.backButton} 
+                    onPress={() => setStep('connect')}
+                  >
+                    <Text style={styles.backButtonText}>←</Text>
+                  </TouchableOpacity>
+                  <Text style={styles.headerTitle}>How Enoch uses personal data</Text>
+                  <View style={styles.backButtonSpacer} />
+                </View>
+                
+                <View style={styles.privacyDetailsContainer}>
+                  <Text style={styles.privacyDetailsTitle}></Text>
+                  
+                  <View style={styles.privacyBulletPoint}>
+                    <Text style={styles.bulletPoint}>•</Text>
+                    <Text style={styles.privacyBulletText}>
+                      Enoch legally accesses your platform data with explicit permission for this event only - never stored post-session and auto-deleted.
+                    </Text>
+                  </View>
+                  
+                  <View style={styles.privacyBulletPoint}>
+                    <Text style={styles.bulletPoint}>•</Text>
+                    <Text style={styles.privacyBulletText}>
+                      Enoch NEVER sells your data. You are a user, not a commodity.
+                    </Text>
+                  </View>
+                  
+                  <View style={styles.privacyBulletPoint}>
+                    <Text style={styles.bulletPoint}>•</Text>
+                    <Text style={styles.privacyBulletText}>
+                      Data collected builds your Onairos persona, enabling personalized experiences across future products while prioritizing your data sovereignty.
+                    </Text>
+                  </View>
+                </View>
+                
+                <TouchableOpacity 
+                  style={styles.footerButtonConfirm}
+                  onPress={() => {
+                    triggerHaptic(HapticType.BUTTON_PRESS);
+                    setStep('connect');
+                  }}
+                >
+                  <Text style={styles.footerButtonTextConfirm}>Got it</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+
+            {step === 'connections' && (
+              <View style={styles.modalContent}>
+                <View style={styles.privacyHeader}>
+                  <TouchableOpacity 
+                    style={styles.backButton} 
+                    onPress={() => setStep(primaryAuthOnly ? 'connections' : 'connect')}
+                  >
+                    <Text style={styles.backButtonText}>←</Text>
+                  </TouchableOpacity>
+                  <Text style={styles.headerTitle}>Connections Found</Text>
+                  <View style={styles.backButtonSpacer} />
+                </View>
+                
+                <View style={styles.privacyDetailsContainer}>
+                  <Text style={styles.connectionsCountText}>
+                    We found {connectionsCount} potential connections for you!
+                  </Text>
+                  
+                  <View style={styles.privacyBulletPoint}>
+                    <Text style={styles.bulletPoint}>•</Text>
+                    <Text style={styles.privacyBulletText}>
+                      Continue to see your personalized matches
+                    </Text>
+                  </View>
+                  
+                  <View style={styles.privacyBulletPoint}>
+                    <Text style={styles.bulletPoint}>•</Text>
+                    <Text style={styles.privacyBulletText}>
+                      Your privacy is protected - we only show compatible profiles
+                    </Text>
+                  </View>
+                  
+                  <View style={styles.privacyBulletPoint}>
+                    <Text style={styles.bulletPoint}>•</Text>
+                    <Text style={styles.privacyBulletText}>
+                      Ready to start building meaningful connections?
+                    </Text>
+                  </View>
+                </View>
+                
+                <TouchableOpacity 
+                  style={styles.footerButtonConfirm}
+                  onPress={async () => {
+                    triggerHaptic(HapticType.BUTTON_PRESS);
+                    // Complete the onboarding flow
+                    isCompletingRef.current = true;
+                    
+                    // Check if this is an existing user adding more data
+                    if (isExistingUser && existingUserToken) {
+                      console.log('🔑 EXISTING USER: UniversalOnboarding complete, returning existing user token:', `${existingUserToken.substring(0, 20)}...`);
+                      onComplete?.('https://api2.onairos.uk', existingUserToken, { email: userInfo?.email || '', ...userInfo });
+                    } else {
+                      // For new users, retrieve the stored JWT token from TrainingModal
+                      const storedToken = await AsyncStorage.getItem('onairos_jwt_token') || 
+                                        await AsyncStorage.getItem('auth_token') || 
+                                        await AsyncStorage.getItem('enoch_token');
+                      
+                      const storedEmail = await AsyncStorage.getItem('user_email');
+                      
+                      if (storedToken) {
+                        console.log('🔑 NEW USER: UniversalOnboarding complete, returning stored JWT token:', `${storedToken.substring(0, 20)}...`);
+                        onComplete?.('https://api2.onairos.uk', storedToken, { email: storedEmail || userInfo?.email || '', ...userInfo });
+                      } else {
+                        console.warn('⚠️ NEW USER: No stored JWT token found, using fallback');
+                        onComplete?.('https://api2.onairos.uk', 'connections-complete-token', { email: userInfo?.email || '', ...userInfo });
+                      }
+                    }
+                  }}
+                >
+                  <Text style={styles.footerButtonTextConfirm}>Continue to Setup</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+          </SafeAreaView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  bottomSheet: {
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingTop: 8,
+    paddingBottom: Platform.OS === 'ios' ? 20 : 0,
+    minHeight: height * .86,
+    width: '100%',
+  },
+  container: {
+    flex: 1,
+  },
+  handleContainer: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  handleButton: {
+    padding: 10,
+    width: 60,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 20,
+    paddingHorizontal: 24,
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 24,
+  },
+  appIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appIconText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  arrow: {
+    marginHorizontal: 16,
+    fontSize: 24,
+    color: '#666',
+  },
+  onairosIcon: {
+    width: 54,
+    height: 54,
+    borderRadius: 32,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  onairosIconText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#fff',
+  },
+  onairosIconImage: {
+    width: 54,
+    height: 54,
+  },
+  titleContainer: {
+    alignItems: 'center',
+  },
+  mainTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  privacyMessage: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  privacyLink: {
+    color: '#000000',
+    fontWeight: '600',
+    textDecorationLine: 'underline',
+  },
+  boldText: {
+    fontWeight: 'bold',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  platformsScrollView: {
+    flex: 1,
+    width: '100%',
+  },
+  platformsScrollContent: {
+    paddingBottom: 0,
+    paddingHorizontal: 24,
+  },
+  platformsContainer: {
+    marginTop: 16,
+  },
+  platformItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  platformInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  platformIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  platformIconText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333',
+    textAlign: 'center',
+    textAlignVertical: 'center',
+  },
+  platformIconImage: {
+    width: 24,
+    height: 24,
+  },
+  youtubeIconImage: {
+    width: 58,
+    height: 58,
+  },
+  redditIconImage: {
+    width: 34,
+    height: 34,
+  },
+  pinterestIconImage: {
+    width: 48,
+    height: 48,
+  },
+  gmailIconImage: {
+    width: 32,
+    height: 32,
+  },
+  linkedinPlatformIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  pinterestPlatformIcon: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: '#F5F5F5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  platformName: {
+    fontSize: 16,
+    color: '#333',
+    textAlignVertical: 'center',
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 24,
+    borderTopWidth: 1,
+    borderTopColor: '#E5E5E5',
+  },
+  footerButtonCancel: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  footerButtonText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  footerButtonConfirm: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    backgroundColor: '#000000',
+    borderRadius: 8,
+    marginTop: 20,
+  },
+  footerButtonConnected: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    backgroundColor: '#E9C46A',
+    borderRadius: 8,
+  },
+  footerButtonDisabled: {
+    backgroundColor: '#E5E5E5',
+  },
+  footerButtonTextConfirm: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  footerButtonTextConnected: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  connectContainer: {
+    flex: 1,
+  },
+  modalContent: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 24,
+  },
+  backButton: {
+    padding: 8,
+    width: 40,
+  },
+  backButtonText: {
+    fontSize: 24,
+    color: '#000000',
+  },
+  backButtonSpacer: {
+    width: 40,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  privacyHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 20,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
+  },
+  privacyDetailsContainer: {
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    flex: 1,
+    marginTop: 20,
+  },
+  privacyDetailsTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 0,
+  },
+  privacyBulletPoint: {
+    flexDirection: 'row',
+    marginBottom: 16,
+    alignItems: 'flex-start',
+  },
+  bulletPoint: {
+    fontSize: 18,
+    marginRight: 8,
+    color: '#333',
+  },
+  privacyBulletText: {
+    fontSize: 16,
+    color: '#333',
+    flex: 1,
+    lineHeight: 24,
+  },
+  connectionsCountText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 24,
+  },
+  personaContainer: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#fff',
+    justifyContent: 'flex-start',
+  },
+  personaHeaderWithBack: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+    paddingVertical: 8,
+  },
+  personaBackButton: {
+    padding: 8,
+  },
+  personaHeader: {
+    alignItems: 'center',
+    marginBottom: 32,
+    paddingHorizontal: 24,
+  },
+  personaTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+    flex: 1,
+    marginBottom: 8,
+  },
+  personaSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 24,
+    textAlign: 'center',
+  },
+  personaProgressContainer: {
+    marginBottom: 24,
+    paddingHorizontal: 0,
+  },
+  personaProgressBar: {
+    height: 8,
+    backgroundColor: '#F5F5F5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 12,
+  },
+  personaProgressFill: {
+    height: '100%',
+    backgroundColor: '#1BA9D4',
+    borderRadius: 4,
+  },
+  personaProgressText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  personaStatusText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+  },
+  personaCompleteContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 0,
+  },
+  personaCompleteTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  personaCompleteSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 40,
+  },
+  personaContinueButton: {
+    backgroundColor: '#000000',
+    paddingVertical: 16,
+    paddingHorizontal: 48,
+    borderRadius: 16,
+    alignItems: 'center',
+    width: '100%',
+    marginTop: 32,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  personaContinueButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  progressError: {
+    backgroundColor: '#FF3B30',
+  },
+  dataWarningContainer: {
+    padding: 16,
+    borderRadius: 12,
+    marginTop: 16,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  dataWarningHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  dataWarningIcon: {
+    fontSize: 20,
+    marginRight: 8,
+  },
+  dataWarningTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+  },
+  dataWarningMessage: {
+    fontSize: 14,
+    marginBottom: 0,
+    lineHeight: 20,
+  },
+  dataWarningSuggestions: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+  },
+  dataWarningSuggestionsTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 6,
+  },
+  dataWarningSuggestionItem: {
+    fontSize: 13,
+    marginBottom: 4,
+    lineHeight: 18,
+  },
+  dataWarningContinueNote: {
+    fontSize: 13,
+    fontWeight: '500',
+    marginTop: 12,
+    fontStyle: 'italic',
+  },
+  dataWarningError: {
+    backgroundColor: '#FFF5F5',
+    borderColor: '#FEB2B2',
+  },
+  dataInfoContainer: {
+    backgroundColor: '#F0F9FF',
+    borderColor: '#BAE6FD',
+  },
+  dataConnectionsRequired: {
+    backgroundColor: '#F5F5F5',
+    borderColor: '#D1D5DB',
+    shadowColor: '#6B7280',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+  },
+  highlightedBackButton: {
+    backgroundColor: '#F5F5F5',
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: '#000000',
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  highlightedBackArrow: {
+    color: '#000000',
+    fontWeight: 'bold',
+  },
+  goBackButton: {
+    backgroundColor: '#000000',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    marginTop: 12,
+    alignItems: 'center',
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  goBackButtonText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  additionalPlatformsToggle: {
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  additionalPlatformsText: {
+    fontSize: 14,
+    color: '#666',
+    fontWeight: '500',
+  },
+  asterisk: {
+    color: '#FF6B6B',
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginLeft: 2,
+  },
+
+  linkedinRequirementContainer: {
+    backgroundColor: '#F8F9FA',
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    marginTop: 8,
+    marginHorizontal: 4,
+  },
+  linkedinRequirementText: {
+    fontSize: 12,
+    fontStyle: 'italic',
+    textAlign: 'center',
+  },
+  linkedinRequirementAsterisk: {
+    color: '#FF6B6B',
+    fontWeight: 'bold',
+  },
+  linkedinRequirementMessage: {
+    color: '#6B7280',
+  },
+  existingUserBanner: {
+    backgroundColor: '#F0F9FF',
+    borderWidth: 1,
+    borderColor: '#0EA5E9',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    marginTop: 12,
+  },
+  existingUserText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#0369A1',
+    marginBottom: 4,
+  },
+  existingUserSubtext: {
+    fontSize: 12,
+    color: '#0C4A6E',
+    lineHeight: 16,
+  },
+});