Onboarding

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',
+  },
+});

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' },
+});

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' },
+});

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',
+  },
+});