Onboarding

2026-04-22 21:37:52 +02:00
parent c16fee77af
commit 3e9f863121
21 changed files with 2524 additions and 184 deletions
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -10,55 +10,167 @@ import {
  View,
  Dimensions,
 } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useRouter } from 'expo-router';
-import { Ionicons } from '@expo/vector-icons';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useApp } from '../../context/AppContext';
-import { useColors } from '../../constants/Colors';
-import { ThemeBackdrop } from '../../components/ThemeBackdrop';
-import { SafeImage } from '../../components/SafeImage';
-import { Plant } from '../../types';
-import { useCoachMarks } from '../../context/CoachMarksContext';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { useFocusEffect } from '@react-navigation/native';
+import { Ionicons } from '@expo/vector-icons';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { usePostHog } from 'posthog-react-native';
+import { useApp } from '../../context/AppContext';
+import { useColors } from '../../constants/Colors';
+import { ThemeBackdrop } from '../../components/ThemeBackdrop';
+import { SafeImage } from '../../components/SafeImage';
+import { Plant } from '../../types';
+import { useCoachMarks } from '../../context/CoachMarksContext';
+import { OnboardingProgressService } from '../../services/onboardingProgressService';

 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');

 type FilterKey = 'all' | 'today' | 'week' | 'healthy' | 'dormant';

-const DAY_MS = 24 * 60 * 60 * 1000;
-const CONTENT_BOTTOM_PADDING = 12;
-const FAB_BOTTOM_OFFSET = 16;
-
-function OnboardingChecklist({ plantsCount, colors, router, t }: { plantsCount: number; colors: any; router: any; t: any }) {
-  const checklist = [
-    { id: 'scan', label: t.stepScan, completed: plantsCount > 0, icon: 'camera-outline', route: '/scanner' },
-    { id: 'lexicon', label: t.stepLexicon, completed: false, icon: 'search-outline', route: '/lexicon' },
-    { id: 'theme', label: t.stepTheme, completed: false, icon: 'color-palette-outline', route: '/profile/preferences' },
-  ];
-
-  return (
-    <View style={[styles.checklistCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
-      <Text style={[styles.checklistTitle, { color: colors.text }]}>{t.nextStepsTitle}</Text>
-      <View style={styles.checklistGrid}>
-        {checklist.map((item) => (
-          <TouchableOpacity
-            key={item.id}
-            style={styles.checklistItem}
-            onPress={() => {
-              if (item.id === 'theme') {
-                router.push('/profile/preferences');
-              } else if (item.id === 'scan') {
-                router.push('/scanner');
-              } else if (item.id === 'lexicon') {
-                router.push('/lexicon');
-              } else {
-                router.push(item.route);
-              }
-            }}
-            disabled={item.completed}
-          >
-            <View style={[styles.checkIcon, { backgroundColor: item.completed ? colors.successSoft : colors.surfaceMuted }]}>
-              <Ionicons
+const DAY_MS = 24 * 60 * 60 * 1000;
+const CONTENT_BOTTOM_PADDING = 12;
+const FAB_BOTTOM_OFFSET = 16;
+
+type OnboardingStepId = 'scan' | 'reminder' | 'lexicon' | 'theme' | 'collection';
+
+function OnboardingChecklist({
+  plants,
+  appearanceMode,
+  colorPalette,
+  lexiconExplored,
+  customizationDone,
+  colors,
+  router,
+  t,
+  getLexiconSearchHistory,
+  registerLayout,
+  posthog,
+}: {
+  plants: Plant[];
+  appearanceMode: string;
+  colorPalette: string;
+  lexiconExplored: boolean;
+  customizationDone: boolean;
+  colors: any;
+  router: any;
+  t: any;
+  getLexiconSearchHistory: () => string[];
+  registerLayout: (key: string, layout: { x: number; y: number; width: number; height: number }) => void;
+  posthog: any;
+}) {
+  const cardRef = useRef<View>(null);
+  const previousProgressRef = useRef<number | null>(null);
+  const lexiconHistoryCount = getLexiconSearchHistory().length;
+  const plantsCount = plants.length;
+  const reminderReady = plants.some((plant) => Boolean(plant.notificationsEnabled));
+  const themeCustomized = customizationDone || appearanceMode !== 'system' || colorPalette !== 'forest';
+  const lexiconCompleted = lexiconExplored || lexiconHistoryCount > 0;
+  const checklist = [
+    { id: 'scan' as const, label: t.stepScan, completed: plantsCount > 0, icon: 'camera-outline' },
+    { id: 'reminder' as const, label: t.stepReminder, completed: reminderReady, icon: 'notifications-outline' },
+    { id: 'lexicon' as const, label: t.stepLexicon, completed: lexiconCompleted, icon: 'search-outline' },
+    { id: 'theme' as const, label: t.stepTheme, completed: themeCustomized, icon: 'color-palette-outline' },
+    { id: 'collection' as const, label: t.stepCollection, completed: plantsCount >= 3, icon: 'albums-outline' },
+  ];
+  const completedCount = checklist.filter((item) => item.completed).length;
+  const progressRatio = completedCount / checklist.length;
+  const progressWidth: `${number}%` = completedCount === 0 ? '0%' : `${Math.max(progressRatio * 100, 12)}%`;
+  const nextItem = checklist.find((item) => !item.completed) ?? null;
+
+  useEffect(() => {
+    if (previousProgressRef.current === completedCount) return;
+    previousProgressRef.current = completedCount;
+    posthog.capture('onboarding_progress_updated', {
+      completed_count: completedCount,
+      total_count: checklist.length,
+      next_step_id: nextItem?.id ?? 'complete',
+    });
+  }, [completedCount, checklist.length, nextItem?.id, posthog]);
+
+  if (completedCount === checklist.length) {
+    return null;
+  }
+
+  const navigateToStep = (stepId: OnboardingStepId) => {
+    posthog.capture('onboarding_step_opened', {
+      step_id: stepId,
+      completed_count: completedCount,
+    });
+
+    if (stepId === 'scan' || stepId === 'collection') {
+      router.push('/scanner');
+      return;
+    }
+
+    if (stepId === 'reminder') {
+      if (plants[0]?.id) {
+        router.push(`/plant/${plants[0].id}`);
+      } else {
+        router.push('/scanner');
+      }
+      return;
+    }
+
+    if (stepId === 'lexicon') {
+      router.push('/lexicon');
+      return;
+    }
+
+    router.push('/onboarding/customize');
+  };
+
+  return (
+    <View
+      ref={cardRef}
+      style={[styles.checklistCard, { backgroundColor: colors.surface, borderColor: colors.border }]}
+      onLayout={() => {
+        cardRef.current?.measureInWindow((x, y, width, height) => {
+          registerLayout('onboarding_checklist', { x, y, width, height });
+        });
+      }}
+    >
+      <View style={styles.checklistHeader}>
+        <View style={styles.checklistHeaderCopy}>
+          <Text style={[styles.checklistEyebrow, { color: colors.primary }]}>
+            {t.onboardingChecklistIntro}
+          </Text>
+          <Text style={[styles.checklistTitle, { color: colors.text }]}>{t.onboardingChecklistTitle}</Text>
+          <Text style={[styles.checklistSubtitle, { color: colors.textSecondary }]}>
+            {(nextItem ? t.onboardingChecklistNextLabel : t.onboardingChecklistDone).replace('{0}', nextItem?.label ?? '')}
+          </Text>
+        </View>
+        <View style={[styles.checklistProgressPill, { backgroundColor: colors.primarySoft }]}>
+          <Text style={[styles.checklistProgressText, { color: colors.primaryDark }]}>
+            {t.onboardingChecklistProgress
+              .replace('{0}', completedCount.toString())
+              .replace('{1}', checklist.length.toString())}
+          </Text>
+        </View>
+      </View>
+
+      <View style={[styles.progressTrack, { backgroundColor: colors.surfaceMuted }]}>
+        <View
+          style={[
+            styles.progressFill,
+            {
+              backgroundColor: colors.primary,
+              width: progressWidth,
+            },
+          ]}
+        />
+      </View>
+
+      <View style={styles.checklistGrid}>
+        {checklist.map((item) => (
+          <TouchableOpacity
+            key={item.id}
+            style={styles.checklistItem}
+            onPress={() => navigateToStep(item.id)}
+            disabled={item.completed}
+          >
+            <View style={[styles.checkIcon, { backgroundColor: item.completed ? colors.successSoft : colors.surfaceMuted }]}>
+              <Ionicons
                name={item.completed ? 'checkmark-circle' : item.icon as any}
                size={18}
                color={item.completed ? colors.success : colors.textMuted}
@@ -95,29 +207,50 @@ const getDaysUntilWatering = (plant: Plant): number => {
  return Math.ceil(remainingMs / DAY_MS);
 };

-export default function HomeScreen() {
-  const {
-    plants,
-    isLoadingPlants,
-    profileImageUri,
-    profileName,
-    billingSummary,
-    isLoadingBilling,
-    language,
-    t,
-    isDarkMode,
-    colorPalette,
-  } = useApp();
-  const colors = useColors(isDarkMode, colorPalette);
-  const router = useRouter();
-  const insets = useSafeAreaInsets();
-  const [activeFilter, setActiveFilter] = useState<FilterKey>('all');
-  const { registerLayout, startTour } = useCoachMarks();
-  const fabRef = useRef<View>(null);
-
-  // Tour nach Registrierung starten
-  useEffect(() => {
-    const checkTour = async () => {
+export default function HomeScreen() {
+  const {
+    session,
+    plants,
+    isLoadingPlants,
+    profileImageUri,
+    profileName,
+    billingSummary,
+    isLoadingBilling,
+    t,
+    isDarkMode,
+    appearanceMode,
+    colorPalette,
+    getLexiconSearchHistory,
+  } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const [activeFilter, setActiveFilter] = useState<FilterKey>('all');
+  const [onboardingSignals, setOnboardingSignals] = useState({
+    lexiconExplored: false,
+    customizationDone: false,
+  });
+  const { registerLayout, startTour } = useCoachMarks();
+  const fabRef = useRef<View>(null);
+  const posthog = usePostHog();
+
+  useFocusEffect(
+    React.useCallback(() => {
+      if (!session?.userId) {
+        setOnboardingSignals({
+          lexiconExplored: false,
+          customizationDone: false,
+        });
+        return;
+      }
+
+      setOnboardingSignals(OnboardingProgressService.getSignals(session.userId));
+    }, [session?.userId]),
+  );
+
+  // Tour nach Registrierung starten
+  useEffect(() => {
+    const checkTour = async () => {
      const flag = await AsyncStorage.getItem('greenlens_show_tour');
      if (flag !== 'true') return;
      await AsyncStorage.removeItem('greenlens_show_tour');
@@ -143,17 +276,23 @@ export default function HomeScreen() {
            description: t.tourSearchDesc,
            tooltipSide: 'above',
          },
-          {
-            elementKey: 'tab_profile',
-            title: t.tourProfileTitle,
-            description: t.tourProfileDesc,
-            tooltipSide: 'above',
-          },
-        ]);
-      }, 1000);
-    };
-    checkTour();
-  }, []);
+          {
+            elementKey: 'tab_profile',
+            title: t.tourProfileTitle,
+            description: t.tourProfileDesc,
+            tooltipSide: 'above',
+          },
+          {
+            elementKey: 'onboarding_checklist',
+            title: t.tourChecklistTitle,
+            description: t.tourChecklistDesc,
+            tooltipSide: 'below',
+          },
+        ]);
+      }, 1000);
+    };
+    checkTour();
+  }, [registerLayout, startTour, t.tourChecklistDesc, t.tourChecklistTitle, t.tourFabDesc, t.tourFabTitle, t.tourProfileDesc, t.tourProfileTitle, t.tourSearchDesc, t.tourSearchTitle]);

  const copy = t;
  const greetingText = useMemo(() => {
@@ -326,9 +465,19 @@ export default function HomeScreen() {
          />
        </View>

-        {plants.length === 0 && (
-          <OnboardingChecklist plantsCount={plants.length} colors={colors} router={router} t={t} />
-        )}
+        <OnboardingChecklist
+          plants={plants}
+          appearanceMode={appearanceMode}
+          colorPalette={colorPalette}
+          lexiconExplored={onboardingSignals.lexiconExplored}
+          customizationDone={onboardingSignals.customizationDone}
+          colors={colors}
+          router={router}
+          t={t}
+          getLexiconSearchHistory={getLexiconSearchHistory}
+          registerLayout={registerLayout}
+          posthog={posthog}
+        />

        <ScrollView
          horizontal
@@ -812,20 +961,59 @@ const styles = StyleSheet.create({
    shadowOffset: { width: 0, height: 5 },
    elevation: 9,
  },
-  checklistCard: {
-    borderRadius: 24,
-    borderWidth: 1,
-    padding: 20,
-    marginBottom: 20,
-  },
-  checklistTitle: {
-    fontSize: 16,
-    fontWeight: '700',
-    marginBottom: 16,
-  },
-  checklistGrid: {
-    gap: 12,
-  },
+  checklistCard: {
+    borderRadius: 24,
+    borderWidth: 1,
+    padding: 20,
+    marginBottom: 20,
+  },
+  checklistHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginBottom: 14,
+  },
+  checklistHeaderCopy: {
+    flex: 1,
+    gap: 4,
+  },
+  checklistEyebrow: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },
+  checklistTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  checklistSubtitle: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  checklistProgressPill: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  checklistProgressText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  progressTrack: {
+    height: 8,
+    borderRadius: 999,
+    overflow: 'hidden',
+    marginBottom: 16,
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 999,
+  },
+  checklistGrid: {
+    gap: 12,
+  },
  checklistItem: {
    flexDirection: 'row',
    alignItems: 'center',
--- a/app/(tabs)/search.tsx
+++ b/app/(tabs)/search.tsx
@@ -267,15 +267,14 @@ export default function SearchScreen() {
    }
  };

-  const openCategoryLexicon = (categoryId: string, categoryName: string) => {
-    router.push({
-      pathname: '/lexicon',
-      params: {
-        categoryId,
-        categoryLabel: encodeURIComponent(categoryName),
-      },
-    });
-  };
+  const openCategoryLexicon = (categoryId: string) => {
+    router.push({
+      pathname: '/lexicon',
+      params: {
+        categoryId,
+      },
+    });
+  };

  const clearAll = () => {
    setSearchQuery('');
@@ -384,9 +383,9 @@ export default function SearchScreen() {
                  borderColor: colors.chipBorder,
                },
              ]}
-              onPress={() => openCategoryLexicon(item.id, item.name)}
-              activeOpacity={0.8}
-            >
+              onPress={() => openCategoryLexicon(item.id)}
+              activeOpacity={0.8}
+            >
              <Text style={[styles.catChipText, { color: getCategoryTextColor(item.bg, item.accent) }]}>
                {item.name}
              </Text>
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -162,9 +162,13 @@ function RootLayoutInner() {
              contentStyle: { backgroundColor: colors.background },
            }}
          >
-            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
-            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
-            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
+            <Stack.Screen name="onboarding/source" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding/goal" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding/experience" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding/customize" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
            <Stack.Screen
              name="scanner"
              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
@@ -185,9 +189,13 @@ function RootLayoutInner() {
              contentStyle: { backgroundColor: colors.background },
            }}
          >
-            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
-            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
-            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
+            <Stack.Screen name="onboarding/source" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding/goal" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding/experience" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="onboarding/customize" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
            <Stack.Screen name="(tabs)" options={{ animation: 'none' }} />
            <Stack.Screen
              name="scanner"
--- a/app/auth/signup.tsx
+++ b/app/auth/signup.tsx
@@ -54,7 +54,7 @@ export default function SignupScreen() {
      await hydrateSession(session);
      // Flag setzen: Tour beim nächsten App-Öffnen anzeigen
      await AsyncStorage.setItem('greenlens_show_tour', 'true');
-      router.replace('/(tabs)');
+      router.replace('/onboarding/source');
    } catch (e: any) {
      if (e.message === 'EMAIL_TAKEN') {
        setError(t.errEmailTaken);
--- a/app/lexicon.tsx
+++ b/app/lexicon.tsx
@@ -11,35 +11,25 @@ import { PlantDatabaseService } from '../services/plantDatabaseService';
 import { IdentificationResult } from '../types';
 import { DatabaseEntry } from '../services/plantDatabaseService';
 import { ResultCard } from '../components/ResultCard';
-import { ThemeBackdrop } from '../components/ThemeBackdrop';
-import { SafeImage } from '../components/SafeImage';
-import { resolveImageUri } from '../utils/imageUri';
-
-export default function LexiconScreen() {
-  const { isDarkMode, colorPalette, language, t, savePlant, getLexiconSearchHistory, saveLexiconSearchQuery, clearLexiconSearchHistory } = useApp();
-  const colors = useColors(isDarkMode, colorPalette);
-  const insets = useSafeAreaInsets();
-  const router = useRouter();
-  const params = useLocalSearchParams();
-  const categoryIdParam = Array.isArray(params.categoryId) ? params.categoryId[0] : params.categoryId;
-  const categoryLabelParam = Array.isArray(params.categoryLabel) ? params.categoryLabel[0] : params.categoryLabel;
-
-  const decodeParam = (value?: string | string[]) => {
-    if (!value || typeof value !== 'string') return '';
-    try {
-      return decodeURIComponent(value);
-    } catch {
-      return value;
-    }
-  };
-
-  const initialCategoryId = typeof categoryIdParam === 'string' ? categoryIdParam : null;
-  const initialCategoryLabel = decodeParam(categoryLabelParam);
-  const topInsetFallback = Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : 20;
-  const topInset = insets.top > 0 ? insets.top : topInsetFallback;
-
-  const [searchQuery, setSearchQuery] = useState(initialCategoryLabel);
-  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(initialCategoryId);
+import { ThemeBackdrop } from '../components/ThemeBackdrop';
+import { SafeImage } from '../components/SafeImage';
+import { resolveImageUri } from '../utils/imageUri';
+import { OnboardingProgressService } from '../services/onboardingProgressService';
+
+export default function LexiconScreen() {
+  const { session, isDarkMode, colorPalette, language, t, savePlant, getLexiconSearchHistory, saveLexiconSearchQuery, clearLexiconSearchHistory } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const insets = useSafeAreaInsets();
+  const router = useRouter();
+  const params = useLocalSearchParams();
+  const categoryIdParam = Array.isArray(params.categoryId) ? params.categoryId[0] : params.categoryId;
+
+  const initialCategoryId = typeof categoryIdParam === 'string' ? categoryIdParam : null;
+  const topInsetFallback = Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : 20;
+  const topInset = insets.top > 0 ? insets.top : topInsetFallback;
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(initialCategoryId);
  const [selectedItem, setSelectedItem] = useState<(IdentificationResult & { imageUri: string }) | null>(null);
  const [isAiSearching, setIsAiSearching] = useState(false);
  const [aiResults, setAiResults] = useState<DatabaseEntry[] | null>(null);
@@ -66,20 +56,25 @@ export default function LexiconScreen() {
        }
      }
    }
-  }, [detailParam]);
+  }, [detailParam]);
+
+  React.useEffect(() => {
+    setActiveCategoryId(initialCategoryId);
+    setSearchQuery('');
+  }, [initialCategoryId]);

-  React.useEffect(() => {
-    setActiveCategoryId(initialCategoryId);
-    setSearchQuery(initialCategoryLabel);
-  }, [initialCategoryId, initialCategoryLabel]);
-
-  React.useEffect(() => {
-    const loadHistory = async () => {
-      const history = getLexiconSearchHistory();
-      setSearchHistory(history);
-    };
-    loadHistory();
-  }, []);
+  React.useEffect(() => {
+    const loadHistory = async () => {
+      const history = getLexiconSearchHistory();
+      setSearchHistory(history);
+    };
+    loadHistory();
+  }, []);
+
+  React.useEffect(() => {
+    if (!session?.userId) return;
+    OnboardingProgressService.completeStep(session.userId, 'lexicon');
+  }, [session?.userId]);

  const handleResultClose = () => {
    if (openedWithDetail) {
--- a/app/onboarding/customize.tsx
+++ b/app/onboarding/customize.tsx
@@ -0,0 +1,341 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { usePostHog } from 'posthog-react-native';
+import { ThemeBackdrop } from '../../components/ThemeBackdrop';
+import { useColors } from '../../constants/Colors';
+import { useApp } from '../../context/AppContext';
+import { OnboardingProgressService } from '../../services/onboardingProgressService';
+import { AppearanceMode, ColorPalette, Language } from '../../types';
+
+const PALETTE_SWATCHES: Record<ColorPalette, string[]> = {
+  forest: ['#5fa779', '#3d7f57'],
+  ocean: ['#5a90be', '#3d6f99'],
+  sunset: ['#c98965', '#a36442'],
+  mono: ['#7b8796', '#5b6574'],
+};
+
+export default function CustomizeOnboardingScreen() {
+  const router = useRouter();
+  const posthog = usePostHog();
+  const {
+    session,
+    isDarkMode,
+    appearanceMode,
+    colorPalette,
+    language,
+    setAppearanceMode,
+    setColorPalette,
+    changeLanguage,
+    t,
+  } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+
+  const finishCustomization = () => {
+    if (session?.userId) {
+      OnboardingProgressService.completeStep(session.userId, 'customize');
+    }
+
+    posthog.capture('onboarding_customization_completed', {
+      appearance_mode: appearanceMode,
+      color_palette: colorPalette,
+      language,
+    });
+    router.back();
+  };
+
+  const skipCustomization = () => {
+    posthog.capture('onboarding_customization_skipped');
+    router.back();
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <ThemeBackdrop colors={colors} />
+      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+        <View style={styles.header}>
+          <TouchableOpacity onPress={skipCustomization} style={[styles.iconBtn, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+            <Ionicons name="close" size={20} color={colors.text} />
+          </TouchableOpacity>
+          <View style={styles.headerCopy}>
+            <Text style={[styles.eyebrow, { color: colors.primary }]}>{t.onboardingChecklistIntro}</Text>
+            <Text style={[styles.title, { color: colors.text }]}>{t.customizeOnboardingTitle}</Text>
+            <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.customizeOnboardingSubtitle}</Text>
+          </View>
+        </View>
+
+        <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+          <View style={[styles.previewCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+            <Text style={[styles.previewLabel, { color: colors.textMuted }]}>{t.customizeOnboardingPreview}</Text>
+            <Text style={[styles.previewTitle, { color: colors.text }]}>{t.onboardingTagline}</Text>
+            <View style={styles.previewMeta}>
+              <View style={[styles.previewChip, { backgroundColor: colors.primarySoft }]}>
+                <Text style={[styles.previewChipText, { color: colors.primaryDark }]}>{appearanceMode}</Text>
+              </View>
+              <View style={[styles.previewChip, { backgroundColor: colors.surfaceMuted }]}>
+                <Text style={[styles.previewChipText, { color: colors.text }]}>{colorPalette}</Text>
+              </View>
+              <View style={[styles.previewChip, { backgroundColor: colors.surfaceMuted }]}>
+                <Text style={[styles.previewChipText, { color: colors.text }]}>{language.toUpperCase()}</Text>
+              </View>
+            </View>
+          </View>
+
+          <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.appearanceMode}</Text>
+            <View style={styles.segmentedControl}>
+              {(['system', 'light', 'dark'] as AppearanceMode[]).map((mode) => {
+                const isActive = appearanceMode === mode;
+                const label = mode === 'system' ? t.themeSystem : mode === 'light' ? t.themeLight : t.themeDark;
+
+                return (
+                  <TouchableOpacity
+                    key={mode}
+                    style={[styles.segmentBtn, isActive && { backgroundColor: colors.primary }]}
+                    onPress={() => setAppearanceMode(mode)}
+                  >
+                    <Text style={[styles.segmentText, { color: isActive ? colors.onPrimary : colors.text }]}>
+                      {label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+
+          <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.colorPalette}</Text>
+            <View style={styles.swatchContainer}>
+              {(['forest', 'ocean', 'sunset', 'mono'] as ColorPalette[]).map((palette) => {
+                const isActive = colorPalette === palette;
+                const swatch = PALETTE_SWATCHES[palette];
+                const label =
+                  palette === 'forest'
+                    ? t.paletteForest
+                    : palette === 'ocean'
+                    ? t.paletteOcean
+                    : palette === 'sunset'
+                    ? t.paletteSunset
+                    : t.paletteMono;
+
+                return (
+                  <TouchableOpacity
+                    key={palette}
+                    style={[styles.swatchWrap, isActive && { borderColor: colors.primary }]}
+                    onPress={() => setColorPalette(palette)}
+                  >
+                    <View style={[styles.swatch, { backgroundColor: swatch[0] }]} />
+                    <Text style={[styles.swatchLabel, { color: colors.text }]}>{label}</Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+
+          <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t.language}</Text>
+            <View style={styles.languageRow}>
+              {(['en', 'de', 'es'] as Language[]).map((lang) => {
+                const isActive = language === lang;
+                const label = lang === 'en' ? 'English' : lang === 'de' ? 'Deutsch' : 'Español';
+
+                return (
+                  <TouchableOpacity
+                    key={lang}
+                    style={[styles.languageBtn, isActive && { backgroundColor: colors.primary }]}
+                    onPress={() => changeLanguage(lang)}
+                  >
+                    <Text style={{ color: isActive ? colors.onPrimary : colors.text, fontWeight: '600' }}>
+                      {label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+        </ScrollView>
+
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
+            onPress={skipCustomization}
+          >
+            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.customizeOnboardingSkip}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[styles.primaryBtn, { backgroundColor: colors.primary }]} onPress={finishCustomization}>
+            <Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{t.customizeOnboardingContinue}</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 14,
+    paddingHorizontal: 20,
+    paddingTop: 12,
+  },
+  iconBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerCopy: {
+    flex: 1,
+    gap: 6,
+    paddingTop: 2,
+  },
+  eyebrow: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  content: {
+    padding: 20,
+    gap: 16,
+  },
+  previewCard: {
+    borderWidth: 1,
+    borderRadius: 24,
+    padding: 18,
+    gap: 10,
+  },
+  previewLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
+  },
+  previewTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  previewMeta: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  previewChip: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  previewChipText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  card: {
+    padding: 18,
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 14,
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  segmentedControl: {
+    flexDirection: 'row',
+    backgroundColor: '#00000010',
+    borderRadius: 14,
+    padding: 4,
+  },
+  segmentBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  segmentText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  swatchContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  swatchWrap: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderRadius: 16,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    gap: 8,
+  },
+  swatch: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+  },
+  swatchLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  languageRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 12,
+  },
+  languageBtn: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 14,
+    backgroundColor: '#00000010',
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: 12,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+  },
+  secondaryBtn: {
+    flex: 1,
+    height: 52,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryBtnText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  primaryBtn: {
+    flex: 1.3,
+    height: 52,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryBtnText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+});
--- a/app/onboarding/experience.tsx
+++ b/app/onboarding/experience.tsx
@@ -0,0 +1,129 @@
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import { usePostHog } from 'posthog-react-native';
+import { ThemeBackdrop } from '../../components/ThemeBackdrop';
+import { useColors } from '../../constants/Colors';
+import { useApp } from '../../context/AppContext';
+import { OnboardingProgressService } from '../../services/onboardingProgressService';
+
+const EXPERIENCE_OPTIONS = [
+  { id: 'beginner', icon: 'leaf-outline' as const },
+  { id: 'intermediate', icon: 'sunny-outline' as const },
+  { id: 'advanced', icon: 'flask-outline' as const },
+];
+
+export default function OnboardingExperienceScreen() {
+  const router = useRouter();
+  const posthog = usePostHog();
+  const { session, isDarkMode, colorPalette, t } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
+
+  const levelLabels = useMemo(
+    () => ({
+      beginner: t.experienceOptionBeginner,
+      intermediate: t.experienceOptionIntermediate,
+      advanced: t.experienceOptionAdvanced,
+    }),
+    [t.experienceOptionAdvanced, t.experienceOptionBeginner, t.experienceOptionIntermediate],
+  );
+
+  const finish = (level: string | null) => {
+    if (session?.userId && level) {
+      OnboardingProgressService.setExperienceLevel(session.userId, level);
+    }
+
+    posthog.capture('onboarding_experience_completed', {
+      experience_level: level ?? 'skipped',
+    });
+    router.replace('/(tabs)');
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <ThemeBackdrop colors={colors} />
+      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+        <View style={styles.header}>
+          <View style={[styles.headerIcon, { backgroundColor: colors.primarySoft }]}>
+            <Ionicons name="sparkles-outline" size={26} color={colors.primaryDark} />
+          </View>
+          <Text style={[styles.title, { color: colors.text }]}>{t.experienceOnboardingTitle}</Text>
+          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.experienceOnboardingSubtitle}</Text>
+        </View>
+
+        <View style={styles.options}>
+          {EXPERIENCE_OPTIONS.map((option) => {
+            const isActive = selectedLevel === option.id;
+            return (
+              <TouchableOpacity
+                key={option.id}
+                style={[
+                  styles.optionCard,
+                  {
+                    backgroundColor: isActive ? colors.primarySoft : colors.surface,
+                    borderColor: isActive ? colors.primary : colors.border,
+                  },
+                ]}
+                onPress={() => setSelectedLevel(option.id)}
+                activeOpacity={0.85}
+              >
+                <View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
+                  <Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
+                </View>
+                <Text style={[styles.optionLabel, { color: colors.text }]}>{levelLabels[option.id as keyof typeof levelLabels]}</Text>
+                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} />}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
+            onPress={() => finish(null)}
+          >
+            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.experienceOnboardingSkip}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.primaryBtn, { backgroundColor: selectedLevel ? colors.primary : colors.surfaceMuted }]}
+            onPress={() => finish(selectedLevel)}
+            disabled={!selectedLevel}
+          >
+            <Text style={[styles.primaryBtnText, { color: selectedLevel ? colors.onPrimary : colors.textMuted }]}>
+              {t.experienceOnboardingContinue}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
+  header: { alignItems: 'center', gap: 10, marginBottom: 28 },
+  headerIcon: { width: 64, height: 64, borderRadius: 32, alignItems: 'center', justifyContent: 'center' },
+  title: { fontSize: 28, fontWeight: '800', textAlign: 'center', lineHeight: 32 },
+  subtitle: { fontSize: 14, textAlign: 'center', lineHeight: 20, maxWidth: 320 },
+  options: { gap: 12, flex: 1 },
+  optionCard: {
+    minHeight: 64,
+    borderRadius: 18,
+    borderWidth: 1.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  optionIcon: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
+  optionLabel: { flex: 1, fontSize: 15, fontWeight: '600' },
+  footer: { flexDirection: 'row', gap: 12, marginTop: 16 },
+  secondaryBtn: { flex: 1, height: 52, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
+  secondaryBtnText: { fontSize: 15, fontWeight: '600' },
+  primaryBtn: { flex: 1.2, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
+  primaryBtnText: { fontSize: 15, fontWeight: '700' },
+});
--- a/app/onboarding/goal.tsx
+++ b/app/onboarding/goal.tsx
@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import { usePostHog } from 'posthog-react-native';
+import { ThemeBackdrop } from '../../components/ThemeBackdrop';
+import { useColors } from '../../constants/Colors';
+import { useApp } from '../../context/AppContext';
+import { OnboardingProgressService } from '../../services/onboardingProgressService';
+
+const GOAL_OPTIONS = [
+  { id: 'identify', icon: 'scan-outline' as const },
+  { id: 'care', icon: 'water-outline' as const },
+  { id: 'collection', icon: 'albums-outline' as const },
+  { id: 'learn', icon: 'book-outline' as const },
+];
+
+export default function OnboardingGoalScreen() {
+  const router = useRouter();
+  const posthog = usePostHog();
+  const { session, isDarkMode, colorPalette, t } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const [selectedGoal, setSelectedGoal] = useState<string | null>(null);
+
+  const goalLabels = useMemo(
+    () => ({
+      identify: t.goalOptionIdentify,
+      care: t.goalOptionCare,
+      collection: t.goalOptionCollection,
+      learn: t.goalOptionLearn,
+    }),
+    [t.goalOptionCare, t.goalOptionCollection, t.goalOptionIdentify, t.goalOptionLearn],
+  );
+
+  const finish = (goal: string | null) => {
+    if (session?.userId && goal) {
+      OnboardingProgressService.setPrimaryGoal(session.userId, goal);
+    }
+
+    posthog.capture('onboarding_goal_completed', {
+      goal: goal ?? 'skipped',
+    });
+    router.replace('/onboarding/experience');
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <ThemeBackdrop colors={colors} />
+      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+        <View style={styles.header}>
+          <View style={[styles.headerIcon, { backgroundColor: colors.primarySoft }]}>
+            <Ionicons name="flag-outline" size={26} color={colors.primaryDark} />
+          </View>
+          <Text style={[styles.title, { color: colors.text }]}>{t.goalOnboardingTitle}</Text>
+          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.goalOnboardingSubtitle}</Text>
+        </View>
+
+        <View style={styles.options}>
+          {GOAL_OPTIONS.map((option) => {
+            const isActive = selectedGoal === option.id;
+            return (
+              <TouchableOpacity
+                key={option.id}
+                style={[
+                  styles.optionCard,
+                  {
+                    backgroundColor: isActive ? colors.primarySoft : colors.surface,
+                    borderColor: isActive ? colors.primary : colors.border,
+                  },
+                ]}
+                onPress={() => setSelectedGoal(option.id)}
+                activeOpacity={0.85}
+              >
+                <View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
+                  <Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
+                </View>
+                <Text style={[styles.optionLabel, { color: colors.text }]}>{goalLabels[option.id as keyof typeof goalLabels]}</Text>
+                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} />}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
+            onPress={() => finish(null)}
+          >
+            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.goalOnboardingSkip}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.primaryBtn, { backgroundColor: selectedGoal ? colors.primary : colors.surfaceMuted }]}
+            onPress={() => finish(selectedGoal)}
+            disabled={!selectedGoal}
+          >
+            <Text style={[styles.primaryBtnText, { color: selectedGoal ? colors.onPrimary : colors.textMuted }]}>
+              {t.goalOnboardingContinue}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
+  header: { alignItems: 'center', gap: 10, marginBottom: 28 },
+  headerIcon: { width: 64, height: 64, borderRadius: 32, alignItems: 'center', justifyContent: 'center' },
+  title: { fontSize: 28, fontWeight: '800', textAlign: 'center', lineHeight: 32 },
+  subtitle: { fontSize: 14, textAlign: 'center', lineHeight: 20, maxWidth: 320 },
+  options: { gap: 12, flex: 1 },
+  optionCard: {
+    minHeight: 64,
+    borderRadius: 18,
+    borderWidth: 1.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  optionIcon: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
+  optionLabel: { flex: 1, fontSize: 15, fontWeight: '600' },
+  footer: { flexDirection: 'row', gap: 12, marginTop: 16 },
+  secondaryBtn: { flex: 1, height: 52, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
+  secondaryBtnText: { fontSize: 15, fontWeight: '600' },
+  primaryBtn: { flex: 1.2, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
+  primaryBtnText: { fontSize: 15, fontWeight: '700' },
+});
--- a/app/onboarding/source.tsx
+++ b/app/onboarding/source.tsx
@@ -0,0 +1,213 @@
+import React, { useMemo, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useRouter } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+import { usePostHog } from 'posthog-react-native';
+import { ThemeBackdrop } from '../../components/ThemeBackdrop';
+import { useColors } from '../../constants/Colors';
+import { useApp } from '../../context/AppContext';
+import { OnboardingProgressService } from '../../services/onboardingProgressService';
+
+const SOURCE_OPTIONS = [
+  { id: 'app_store', icon: 'phone-portrait-outline' as const },
+  { id: 'instagram', icon: 'logo-instagram' as const },
+  { id: 'tiktok', icon: 'musical-notes-outline' as const },
+  { id: 'friend', icon: 'people-outline' as const },
+  { id: 'search', icon: 'search-outline' as const },
+  { id: 'other', icon: 'ellipsis-horizontal-circle-outline' as const },
+];
+
+export default function OnboardingSourceScreen() {
+  const router = useRouter();
+  const posthog = usePostHog();
+  const { session, isDarkMode, colorPalette, t } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const [selectedSource, setSelectedSource] = useState<string | null>(null);
+
+  const sourceLabels = useMemo(
+    () => ({
+      app_store: t.sourceOptionAppStore,
+      instagram: t.sourceOptionInstagram,
+      tiktok: t.sourceOptionTikTok,
+      friend: t.sourceOptionFriend,
+      search: t.sourceOptionSearch,
+      other: t.sourceOptionOther,
+    }),
+    [
+      t.sourceOptionAppStore,
+      t.sourceOptionFriend,
+      t.sourceOptionInstagram,
+      t.sourceOptionOther,
+      t.sourceOptionSearch,
+      t.sourceOptionTikTok,
+    ],
+  );
+
+  const finish = (source: string | null) => {
+    if (session?.userId && source) {
+      OnboardingProgressService.setAcquisitionSource(session.userId, source);
+    }
+
+    posthog.capture('onboarding_source_completed', {
+      source: source ?? 'skipped',
+    });
+    router.replace('/onboarding/goal');
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <ThemeBackdrop colors={colors} />
+      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+        <View style={styles.header}>
+          <View style={[styles.headerIcon, { backgroundColor: colors.primarySoft }]}>
+            <Ionicons name="paper-plane-outline" size={26} color={colors.primaryDark} />
+          </View>
+          <Text style={[styles.title, { color: colors.text }]}>{t.sourceOnboardingTitle}</Text>
+          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.sourceOnboardingSubtitle}</Text>
+        </View>
+
+        <View style={styles.options}>
+          {SOURCE_OPTIONS.map((option) => {
+            const isActive = selectedSource === option.id;
+            return (
+              <TouchableOpacity
+                key={option.id}
+                style={[
+                  styles.optionCard,
+                  {
+                    backgroundColor: isActive ? colors.primarySoft : colors.surface,
+                    borderColor: isActive ? colors.primary : colors.border,
+                  },
+                ]}
+                onPress={() => setSelectedSource(option.id)}
+                activeOpacity={0.85}
+              >
+                <View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
+                  <Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
+                </View>
+                <Text style={[styles.optionLabel, { color: colors.text }]}>{sourceLabels[option.id as keyof typeof sourceLabels]}</Text>
+                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} />}
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        <View style={styles.footer}>
+          <TouchableOpacity
+            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
+            onPress={() => finish(null)}
+          >
+            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.sourceOnboardingSkip}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.primaryBtn,
+              { backgroundColor: selectedSource ? colors.primary : colors.surfaceMuted },
+            ]}
+            onPress={() => finish(selectedSource)}
+            disabled={!selectedSource}
+          >
+            <Text
+              style={[
+                styles.primaryBtnText,
+                { color: selectedSource ? colors.onPrimary : colors.textMuted },
+              ]}
+            >
+              {t.sourceOnboardingContinue}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  safeArea: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 24,
+    paddingBottom: 20,
+  },
+  header: {
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 28,
+  },
+  headerIcon: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '800',
+    textAlign: 'center',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+    maxWidth: 320,
+  },
+  options: {
+    gap: 12,
+    flex: 1,
+  },
+  optionCard: {
+    minHeight: 64,
+    borderRadius: 18,
+    borderWidth: 1.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    gap: 12,
+  },
+  optionIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 16,
+  },
+  secondaryBtn: {
+    flex: 1,
+    height: 52,
+    borderRadius: 16,
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryBtnText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  primaryBtn: {
+    flex: 1.2,
+    height: 52,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryBtnText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+});