feat(app): Stitch question screens with shared layout, pre-auth answer buffering

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/onboarding/experience.tsx

@@ -1,83 +1,44 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
-import { ImageBackground, 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 { useSafeAnalytics } from '../../services/analytics';
-import { ThemeBackdrop } from '../../components/ThemeBackdrop';
 import { useColors } from '../../constants/Colors';
 import { useApp } from '../../context/AppContext';
 import { OnboardingProgressService } from '../../services/onboardingProgressService';
-
+import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
-const ONBOARDING_BACKGROUND = {
+import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
-  light: '#fbfaf3',
-  dark: '#0a110b',
-};
 
 const EXPERIENCE_OPTIONS = [
-  { id: 'beginner', icon: 'leaf-outline' as const },
+  { id: 'beginner', emoji: '🌱' },
-  { id: 'intermediate', icon: 'sunny-outline' as const },
+  { id: 'intermediate', emoji: '☀️' },
-  { id: 'advanced', icon: 'flask-outline' as const },
+  { id: 'advanced', emoji: '🧪' },
 ];
 
-const getExperienceScreenCopy = (language: 'de' | 'en' | 'es') => {
-  if (language === 'de') {
-    return {
-      step: 'Schritt 3 von 4',
-      heroBadge: 'Pflege-Tiefe',
-      subtitles: {
-        beginner: 'Klare Sprache, sichere Defaults, weniger Fachbegriffe.',
-        intermediate: 'Praktische Schritte mit genug Kontext.',
-        advanced: 'Mehr botanische Details und engere Diagnose.',
-      },
-    };
-  }
-
-  if (language === 'es') {
-    return {
-      step: 'Paso 3 de 4',
-      heroBadge: 'Nivel de cuidado',
-      subtitles: {
-        beginner: 'Lenguaje claro y recomendaciones seguras.',
-        intermediate: 'Pasos practicos con suficiente contexto.',
-        advanced: 'Mas detalle botanico y diagnostico preciso.',
-      },
-    };
-  }
-
-  return {
-    step: 'Step 3 of 4',
-    heroBadge: 'Care depth',
-    subtitles: {
-      beginner: 'Clear language, fewer assumptions, safer defaults.',
-      intermediate: 'Practical care steps with enough detail.',
-      advanced: 'More botanical context and tighter diagnosis.',
-    },
-  };
-};
-
 export default function OnboardingExperienceScreen() {
   const router = useRouter();
   const posthog = useSafeAnalytics();
-  const { session, isDarkMode, colorPalette, language, t } = useApp();
+  const { session, isDarkMode, colorPalette, t } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
-  const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
   const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
-  const copy = getExperienceScreenCopy(language);
 
-  const levelLabels = useMemo(
+  const levelLabels: Record<string, string> = {
-    () => ({
+    beginner: t.experienceOptionBeginner,
-      beginner: t.experienceOptionBeginner,
+    intermediate: t.experienceOptionIntermediate,
-      intermediate: t.experienceOptionIntermediate,
+    advanced: t.experienceOptionAdvanced,
-      advanced: t.experienceOptionAdvanced,
+  };
-    }),
+
-    [t.experienceOptionAdvanced, t.experienceOptionBeginner, t.experienceOptionIntermediate],
+  const options: QuestionOption[] = EXPERIENCE_OPTIONS.map((option) => ({
-  );
+    id: option.id,
+    emoji: option.emoji,
+    label: levelLabels[option.id],
+  }));
 
   const finish = (level: string | null) => {
     if (session?.userId && level) {
       OnboardingProgressService.setExperienceLevel(session.userId, level);
     }
+    if (level) {
+      void PreAuthOnboardingService.setAnswer('experienceLevel', level);
+    }
 
     posthog.capture('onboarding_experience_completed', {
       experience_level: level ?? 'skipped',
@@ -86,113 +47,21 @@ export default function OnboardingExperienceScreen() {
   };
 
   return (
-    <View style={[styles.container, { backgroundColor: screenBackground }]}>
+    <OnboardingQuestion
-      {isDarkMode ? <ThemeBackdrop colors={colors} /> : null}
+      colors={colors}
-      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+      isDarkMode={isDarkMode}
-        <View style={styles.header}>
+      step={3}
-          <View style={[styles.stepPill, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
+      totalSteps={4}
-            <Text style={[styles.stepLabel, { color: colors.primaryDark }]}>{copy.step}</Text>
+      title={t.experienceOnboardingTitle}
-          </View>
+      subtitle={t.experienceOnboardingSubtitle}
-          <ImageBackground
+      options={options}
-            source={require('../../assets/onboarding_experience_mockup.png')}
+      selectedId={selectedLevel}
-            style={[styles.heroPreview, { borderColor: colors.border }]}
+      onSelect={setSelectedLevel}
-            imageStyle={styles.heroImage}
+      onContinue={() => finish(selectedLevel)}
-            resizeMode="cover"
+      onBack={() => router.back()}
-          >
+      continueLabel={t.experienceOnboardingContinue}
-            <View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.4)' : 'rgba(251, 250, 243, 0.24)' }]} />
+      skipLabel={t.experienceOnboardingSkip}
-            <View style={[styles.heroMetric, { backgroundColor: colors.surface, borderColor: colors.border }]}>
+      onSkip={() => finish(null)}
-              <Ionicons name="sparkles-outline" size={18} color={colors.primary} />
+    />
-              <Text style={[styles.heroMetricText, { color: colors.text }]}>{copy.heroBadge}</Text>
-            </View>
-          </ImageBackground>
-          <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>
-                <View style={styles.optionCopy}>
-                  <Text style={[styles.optionLabel, { color: colors.text }]}>{levelLabels[option.id as keyof typeof levelLabels]}</Text>
-                  <Text style={[styles.optionSubtitle, { color: colors.textMuted }]}>
-                    {copy.subtitles[option.id as keyof typeof copy.subtitles]}
-                  </Text>
-                </View>
-                {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: 12, paddingBottom: 14 },
-  header: { alignItems: 'center', gap: 9, marginBottom: 14 },
-  stepPill: { borderWidth: 1, borderRadius: 999, paddingHorizontal: 12, paddingVertical: 7 },
-  stepLabel: { fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.4 },
-  heroPreview: { width: '100%', height: 175, borderRadius: 24, borderWidth: 1, overflow: 'hidden', justifyContent: 'flex-end', alignItems: 'flex-start' },
-  heroImage: { borderRadius: 24 },
-  heroOverlay: { ...StyleSheet.absoluteFillObject },
-  heroMetric: { margin: 12, borderRadius: 999, borderWidth: 1, paddingHorizontal: 11, paddingVertical: 7, flexDirection: 'row', alignItems: 'center', gap: 6 },
-  heroMetricText: { fontSize: 12, fontWeight: '800' },
-  title: { fontSize: 25, fontWeight: '800', textAlign: 'center', lineHeight: 29 },
-  subtitle: { fontSize: 13, textAlign: 'center', lineHeight: 18, maxWidth: 320 },
-  options: { gap: 8, flex: 1 },
-  optionCard: {
-    flex: 1,
-    borderRadius: 15,
-    borderWidth: 1.5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 14,
-    paddingVertical: 16,
-    gap: 10,
-  },
-  optionIcon: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
-  optionCopy: { flex: 1, gap: 3 },
-  optionLabel: { fontSize: 14, fontWeight: '700' },
-  optionSubtitle: { fontSize: 10.5, lineHeight: 14 },
-  footer: { flexDirection: 'row', gap: 12, marginTop: 10 },
-  secondaryBtn: { flex: 1, height: 50, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
-  secondaryBtnText: { fontSize: 15, fontWeight: '600' },
-  primaryBtn: { flex: 1.2, height: 50, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
-  primaryBtnText: { fontSize: 15, fontWeight: '700' },
-});

app/onboarding/goal.tsx

@@ -1,88 +1,46 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
-import { ImageBackground, 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 { useSafeAnalytics } from '../../services/analytics';
-import { ThemeBackdrop } from '../../components/ThemeBackdrop';
 import { useColors } from '../../constants/Colors';
 import { useApp } from '../../context/AppContext';
 import { OnboardingProgressService } from '../../services/onboardingProgressService';
-
+import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
-const ONBOARDING_BACKGROUND = {
+import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
-  light: '#fbfaf3',
-  dark: '#0a110b',
-};
 
 const GOAL_OPTIONS = [
-  { id: 'identify', icon: 'scan-outline' as const },
+  { id: 'identify', emoji: '🔍' },
-  { id: 'care', icon: 'water-outline' as const },
+  { id: 'care', emoji: '💧' },
-  { id: 'collection', icon: 'albums-outline' as const },
+  { id: 'collection', emoji: '🗂️' },
-  { id: 'learn', icon: 'book-outline' as const },
+  { id: 'learn', emoji: '📚' },
 ];
 
-const getGoalScreenCopy = (language: 'de' | 'en' | 'es') => {
-  if (language === 'de') {
-    return {
-      step: 'Schritt 2 von 4',
-      heroBadge: 'Erstes Ziel',
-      subtitles: {
-        identify: 'Schnell erkennen, Pflege danach klaeren.',
-        care: 'Aus Symptomen konkrete Schritte machen.',
-        collection: 'Eine saubere Pflanzenbibliothek aufbauen.',
-        learn: 'Pflanzenwissen einfacher einsortieren.',
-      },
-    };
-  }
-
-  if (language === 'es') {
-    return {
-      step: 'Paso 2 de 4',
-      heroBadge: 'Primer objetivo',
-      subtitles: {
-        identify: 'Respuesta rapida primero, cuidado despues.',
-        care: 'Convertir sintomas en pasos claros.',
-        collection: 'Crear una biblioteca de plantas ordenada.',
-        learn: 'Aprender plantas con explicaciones simples.',
-      },
-    };
-  }
-
-  return {
-    step: 'Step 2 of 4',
-    heroBadge: 'First goal',
-    subtitles: {
-      identify: 'Fast answer first, care details after.',
-      care: 'Turn symptoms into a clear next step.',
-      collection: 'Build a tidy plant library over time.',
-      learn: 'Browse plants with simpler explanations.',
-    },
-  };
-};
-
 export default function OnboardingGoalScreen() {
   const router = useRouter();
   const posthog = useSafeAnalytics();
-  const { session, isDarkMode, colorPalette, language, t } = useApp();
+  const { session, isDarkMode, colorPalette, t } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
-  const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
   const [selectedGoal, setSelectedGoal] = useState<string | null>(null);
-  const copy = getGoalScreenCopy(language);
 
-  const goalLabels = useMemo(
+  const goalLabels: Record<string, string> = {
-    () => ({
+    identify: t.goalOptionIdentify,
-      identify: t.goalOptionIdentify,
+    care: t.goalOptionCare,
-      care: t.goalOptionCare,
+    collection: t.goalOptionCollection,
-      collection: t.goalOptionCollection,
+    learn: t.goalOptionLearn,
-      learn: t.goalOptionLearn,
+  };
-    }),
+
-    [t.goalOptionCare, t.goalOptionCollection, t.goalOptionIdentify, t.goalOptionLearn],
+  const options: QuestionOption[] = GOAL_OPTIONS.map((option) => ({
-  );
+    id: option.id,
+    emoji: option.emoji,
+    label: goalLabels[option.id],
+  }));
 
   const finish = (goal: string | null) => {
     if (session?.userId && goal) {
       OnboardingProgressService.setPrimaryGoal(session.userId, goal);
     }
+    if (goal) {
+      void PreAuthOnboardingService.setAnswer('primaryGoal', goal);
+    }
 
     posthog.capture('onboarding_goal_completed', {
       goal: goal ?? 'skipped',
@@ -91,113 +49,21 @@ export default function OnboardingGoalScreen() {
   };
 
   return (
-    <View style={[styles.container, { backgroundColor: screenBackground }]}>
+    <OnboardingQuestion
-      {isDarkMode ? <ThemeBackdrop colors={colors} /> : null}
+      colors={colors}
-      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+      isDarkMode={isDarkMode}
-        <View style={styles.header}>
+      step={2}
-          <View style={[styles.stepPill, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
+      totalSteps={4}
-            <Text style={[styles.stepLabel, { color: colors.primaryDark }]}>{copy.step}</Text>
+      title={t.goalOnboardingTitle}
-          </View>
+      subtitle={t.goalOnboardingSubtitle}
-          <ImageBackground
+      options={options}
-            source={require('../../assets/onboarding_goal_mockup.png')}
+      selectedId={selectedGoal}
-            style={[styles.heroPreview, { borderColor: colors.border }]}
+      onSelect={setSelectedGoal}
-            imageStyle={styles.heroImage}
+      onContinue={() => finish(selectedGoal)}
-            resizeMode="cover"
+      onBack={() => router.back()}
-          >
+      continueLabel={t.goalOnboardingContinue}
-            <View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.22)' : 'rgba(251, 250, 243, 0.28)' }]} />
+      skipLabel={t.goalOnboardingSkip}
-            <View style={[styles.heroBadge, { backgroundColor: colors.primary }]}>
+      onSkip={() => finish(null)}
-              <Ionicons name="flag-outline" size={16} color={colors.onPrimary} />
+    />
-              <Text style={[styles.heroBadgeText, { color: colors.onPrimary }]}>{copy.heroBadge}</Text>
-            </View>
-          </ImageBackground>
-          <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>
-                <View style={styles.optionCopy}>
-                  <Text style={[styles.optionLabel, { color: colors.text }]}>{goalLabels[option.id as keyof typeof goalLabels]}</Text>
-                  <Text style={[styles.optionSubtitle, { color: colors.textMuted }]}>
-                    {copy.subtitles[option.id as keyof typeof copy.subtitles]}
-                  </Text>
-                </View>
-                {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: 12, paddingBottom: 14 },
-  header: { alignItems: 'center', gap: 9, marginBottom: 14 },
-  stepPill: { borderWidth: 1, borderRadius: 999, paddingHorizontal: 12, paddingVertical: 7 },
-  stepLabel: { fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.4 },
-  heroPreview: { width: '100%', height: 175, borderRadius: 24, borderWidth: 1, overflow: 'hidden', justifyContent: 'flex-end', alignItems: 'flex-start' },
-  heroImage: { borderRadius: 24 },
-  heroOverlay: { ...StyleSheet.absoluteFillObject },
-  heroBadge: { margin: 12, borderRadius: 999, paddingHorizontal: 11, paddingVertical: 7, flexDirection: 'row', alignItems: 'center', gap: 6 },
-  heroBadgeText: { fontSize: 12, fontWeight: '800' },
-  title: { fontSize: 25, fontWeight: '800', textAlign: 'center', lineHeight: 29 },
-  subtitle: { fontSize: 13, textAlign: 'center', lineHeight: 18, maxWidth: 320 },
-  options: { gap: 8, flex: 1 },
-  optionCard: {
-    flex: 1,
-    borderRadius: 15,
-    borderWidth: 1.5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    gap: 10,
-  },
-  optionIcon: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
-  optionCopy: { flex: 1, gap: 3 },
-  optionLabel: { fontSize: 14, fontWeight: '700' },
-  optionSubtitle: { fontSize: 10.5, lineHeight: 14 },
-  footer: { flexDirection: 'row', gap: 12, marginTop: 10 },
-  secondaryBtn: { flex: 1, height: 50, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
-  secondaryBtnText: { fontSize: 15, fontWeight: '600' },
-  primaryBtn: { flex: 1.2, height: 50, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
-  primaryBtnText: { fontSize: 15, fontWeight: '700' },
-});

app/onboarding/health-check.tsx

@@ -16,7 +16,6 @@ const ONBOARDING_BACKGROUND = {
 const getHealthOnboardingCopy = (language: 'de' | 'en' | 'es') => {
   if (language === 'de') {
     return {
-      step: 'Schritt 4 von 4',
       title: 'Wo ist der Health-Scan?',
       subtitle: 'Du findest ihn auf jeder gespeicherten Pflanze, direkt unter der Beschreibung.',
       buttonPreview: 'Health-Scan starten',
@@ -36,7 +35,6 @@ const getHealthOnboardingCopy = (language: 'de' | 'en' | 'es') => {
 
   if (language === 'es') {
     return {
-      step: 'Paso 4 de 4',
       title: 'Donde esta el health-scan?',
       subtitle: 'Lo encuentras en cada planta guardada, justo debajo de la descripcion.',
       buttonPreview: 'Iniciar health-scan',
@@ -55,7 +53,6 @@ const getHealthOnboardingCopy = (language: 'de' | 'en' | 'es') => {
   }
 
   return {
-    step: 'Step 4 of 4',
     title: 'Where is the health scan?',
     subtitle: 'It lives on every saved plant, directly below the plant description.',
     buttonPreview: 'Start health scan',
@@ -86,19 +83,23 @@ export default function HealthCheckOnboardingScreen() {
       skipped,
       plan: billingSummary?.entitlement?.plan ?? 'free',
     });
-    const hasActiveEntitlement = billingSummary?.entitlement?.plan === 'pro'
+    router.replace('/onboarding/personalizing');
-      && billingSummary?.entitlement?.status === 'active';
-    router.replace(hasActiveEntitlement ? '/(tabs)' : '/profile/billing');
   };
 
   return (
     <View style={[styles.container, { backgroundColor: screenBackground }]}>
       {isDarkMode ? <ThemeBackdrop colors={colors} /> : null}
       <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
-        <View style={styles.header}>
+        <View style={styles.topBar}>
-          <View style={[styles.stepPill, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
+          <TouchableOpacity onPress={() => router.back()} style={[styles.backBtn, { backgroundColor: colors.surface }]}>
-            <Text style={[styles.stepLabel, { color: colors.primaryDark }]}>{copy.step}</Text>
+            <Ionicons name="arrow-back" size={20} color={colors.primary} />
+          </TouchableOpacity>
+          <View style={[styles.progressTrack, { backgroundColor: colors.primarySoft }]}>
+            <View style={[styles.progressFill, { backgroundColor: colors.primary, width: '100%' }]} />
           </View>
+          <View style={styles.backBtn} />
+        </View>
+        <View style={styles.header}>
           <Text style={[styles.title, { color: colors.text }]}>{copy.title}</Text>
           <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{copy.subtitle}</Text>
         </View>
@@ -161,9 +162,11 @@ export default function HealthCheckOnboardingScreen() {
 const styles = StyleSheet.create({
   container: { flex: 1 },
   safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
-  header: { gap: 9, marginBottom: 18 },
+  topBar: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingVertical: 10 },
-  stepPill: { alignSelf: 'flex-start', borderWidth: 1, borderRadius: 999, paddingHorizontal: 12, paddingVertical: 7 },
+  backBtn: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
-  stepLabel: { fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.4 },
+  progressTrack: { flex: 1, height: 6, borderRadius: 3, overflow: 'hidden' },
+  progressFill: { height: 6, borderRadius: 3 },
+  header: { gap: 9, marginTop: 8, marginBottom: 18 },
   title: { fontSize: 30, lineHeight: 34, fontWeight: '900' },
   subtitle: { fontSize: 14, lineHeight: 20 },
   content: { gap: 14, paddingBottom: 12 },

app/onboarding/source.tsx

@@ -1,114 +1,50 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
-import { ImageBackground, 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 { useSafeAnalytics } from '../../services/analytics';
-import { ThemeBackdrop } from '../../components/ThemeBackdrop';
 import { useColors } from '../../constants/Colors';
 import { useApp } from '../../context/AppContext';
 import { OnboardingProgressService } from '../../services/onboardingProgressService';
-
+import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
-const ONBOARDING_BACKGROUND = {
+import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
-  light: '#fbfaf3',
-  dark: '#0a110b',
-};
 
 const SOURCE_OPTIONS = [
-  { id: 'app_store', icon: 'storefront-outline' as const, signal: 'organic_store' },
+  { id: 'app_store', emoji: '🏬', signal: 'organic_store' },
-  { id: 'instagram', icon: 'logo-instagram' as const, signal: 'social_visual' },
+  { id: 'instagram', emoji: '📸', signal: 'social_visual' },
-  { id: 'tiktok', icon: 'musical-notes-outline' as const, signal: 'social_video' },
+  { id: 'tiktok', emoji: '🎵', signal: 'social_video' },
-  { id: 'friend', icon: 'people-outline' as const, signal: 'referral' },
+  { id: 'friend', emoji: '👥', signal: 'referral' },
-  { id: 'search', icon: 'search-outline' as const, signal: 'high_intent_search' },
+  { id: 'search', emoji: '🔎', signal: 'high_intent_search' },
-  { id: 'other', icon: 'ellipsis-horizontal-circle-outline' as const, signal: 'unclassified' },
+  { id: 'other', emoji: '✨', signal: 'unclassified' },
 ];
 
-const getSourceOnboardingCopy = (language: 'de' | 'en' | 'es') => {
-  if (language === 'de') {
-    return {
-      step: 'Schritt 1 von 4',
-      heroTitle: 'Dein Start wird danach personalisiert.',
-      heroMeta: 'Scan, Sammlung und Health-Check passen sich deinem Ziel an.',
-      valueTitle: 'Warum wir fragen',
-      valueBody: 'Die Antwort hilft, deinen Einstieg auf das auszurichten, was dich wirklich hierher gebracht hat.',
-      subtitles: {
-        app_store: 'Du hast aktiv nach Pflanzen- oder Pflegehilfe gesucht.',
-        instagram: 'Du kamst ueber visuelle Pflanzen-Inhalte.',
-        tiktok: 'Du kamst ueber kurze Videos oder Creator.',
-        friend: 'Persoenliche Empfehlung, hoher Vertrauens-Intent.',
-        search: 'Konkretes Problem oder schneller Pflanzen-Check.',
-        other: 'Passt nicht sauber in die anderen Quellen.',
-      },
-    };
-  }
-
-  if (language === 'es') {
-    return {
-      step: 'Paso 1 de 4',
-      heroTitle: 'Tu inicio se adapta despues.',
-      heroMeta: 'Escaneo, coleccion y health-check segun tu objetivo.',
-      valueTitle: 'Por que preguntamos',
-      valueBody: 'La respuesta ayuda a adaptar el inicio a lo que realmente te trajo aqui.',
-      subtitles: {
-        app_store: 'Buscaste ayuda para plantas o cuidado.',
-        instagram: 'Llegaste desde contenido visual de plantas.',
-        tiktok: 'Llegaste desde videos cortos o creadores.',
-        friend: 'Recomendacion personal con alta confianza.',
-        search: 'Problema concreto o chequeo rapido.',
-        other: 'No encaja en las demas fuentes.',
-      },
-    };
-  }
-
-  return {
-    step: 'Step 1 of 4',
-    heroTitle: 'Your first run adapts next.',
-    heroMeta: 'Scanner, collection, and health check based on your goal.',
-    valueTitle: 'Why we ask',
-    valueBody: 'This helps tailor the first steps to what actually brought you here.',
-    subtitles: {
-      app_store: 'You actively searched for plant or care help.',
-      instagram: 'You came from visual plant content.',
-      tiktok: 'You came from short videos or creators.',
-      friend: 'Personal referral with high trust intent.',
-      search: 'Concrete problem or quick plant check intent.',
-      other: 'Does not fit the other sources cleanly.',
-    },
-  };
-};
-
 export default function OnboardingSourceScreen() {
   const router = useRouter();
   const posthog = useSafeAnalytics();
-  const { session, isDarkMode, colorPalette, language, t } = useApp();
+  const { session, isDarkMode, colorPalette, t } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
-  const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
   const [selectedSource, setSelectedSource] = useState<string | null>(null);
-  const copy = getSourceOnboardingCopy(language);
 
-  const sourceLabels = useMemo(
+  const sourceLabels: Record<string, string> = {
-    () => ({
+    app_store: t.sourceOptionAppStore,
-      app_store: t.sourceOptionAppStore,
+    instagram: t.sourceOptionInstagram,
-      instagram: t.sourceOptionInstagram,
+    tiktok: t.sourceOptionTikTok,
-      tiktok: t.sourceOptionTikTok,
+    friend: t.sourceOptionFriend,
-      friend: t.sourceOptionFriend,
+    search: t.sourceOptionSearch,
-      search: t.sourceOptionSearch,
+    other: t.sourceOptionOther,
-      other: t.sourceOptionOther,
+  };
-    }),
+
-    [
+  const options: QuestionOption[] = SOURCE_OPTIONS.map((option) => ({
-      t.sourceOptionAppStore,
+    id: option.id,
-      t.sourceOptionFriend,
+    emoji: option.emoji,
-      t.sourceOptionInstagram,
+    label: sourceLabels[option.id],
-      t.sourceOptionOther,
+  }));
-      t.sourceOptionSearch,
-      t.sourceOptionTikTok,
-    ],
-  );
 
   const finish = (source: string | null) => {
     if (session?.userId && source) {
       OnboardingProgressService.setAcquisitionSource(session.userId, source);
     }
+    if (source) {
+      void PreAuthOnboardingService.setAnswer('acquisitionSource', source);
+    }
 
     posthog.capture('onboarding_source_completed', {
       source: source ?? 'skipped',
@@ -118,241 +54,21 @@ export default function OnboardingSourceScreen() {
   };
 
   return (
-    <View style={[styles.container, { backgroundColor: screenBackground }]}>
+    <OnboardingQuestion
-      {isDarkMode ? <ThemeBackdrop colors={colors} /> : null}
+      colors={colors}
-      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
+      isDarkMode={isDarkMode}
-        <View style={styles.header}>
+      step={1}
-          <View style={[styles.stepPill, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
+      totalSteps={4}
-            <Text style={[styles.stepLabel, { color: colors.primaryDark }]}>{copy.step}</Text>
+      title={t.sourceOnboardingTitle}
-          </View>
+      subtitle={t.sourceOnboardingSubtitle}
-          <ImageBackground
+      options={options}
-            source={require('../../assets/onboarding_source_mockup.png')}
+      selectedId={selectedSource}
-            style={[styles.heroPreview, { borderColor: colors.border }]}
+      onSelect={setSelectedSource}
-            imageStyle={styles.heroImage}
+      onContinue={() => finish(selectedSource)}
-            resizeMode="cover"
+      onBack={() => router.back()}
-          >
+      continueLabel={t.sourceOnboardingContinue}
-            <View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.46)' : 'rgba(251, 250, 243, 0.32)' }]} />
+      skipLabel={t.sourceOnboardingSkip}
-            <View style={styles.heroContent}>
+      onSkip={() => finish(null)}
-              <View style={[styles.heroIcon, { backgroundColor: colors.primary }]}>
+    />
-                <Ionicons name="scan-outline" size={20} color={colors.onPrimary} />
-              </View>
-              <View style={styles.heroCopy}>
-                <Text style={[styles.heroTitle, { color: isDarkMode ? colors.textOnImage : colors.text }]}>
-                  {copy.heroTitle}
-                </Text>
-                <Text style={[styles.heroMeta, { color: isDarkMode ? '#d7ded9' : colors.textSecondary }]}>
-                  {copy.heroMeta}
-                </Text>
-              </View>
-            </View>
-          </ImageBackground>
-          <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>
-                <View style={styles.optionCopy}>
-                  <Text style={[styles.optionLabel, { color: colors.text }]}>{sourceLabels[option.id as keyof typeof sourceLabels]}</Text>
-                  <Text style={[styles.optionSubtitle, { color: colors.textMuted }]}>
-                    {copy.subtitles[option.id as keyof typeof copy.subtitles]}
-                  </Text>
-                </View>
-                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} style={styles.optionCheck} />}
-              </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: 12,
-    paddingBottom: 14,
-    justifyContent: 'space-between',
-  },
-  header: {
-    alignItems: 'center',
-    gap: 9,
-  },
-  stepPill: {
-    borderWidth: 1,
-    borderRadius: 999,
-    paddingHorizontal: 12,
-    paddingVertical: 7,
-  },
-  stepLabel: {
-    fontSize: 12,
-    fontWeight: '800',
-    textTransform: 'uppercase',
-    letterSpacing: 0.4,
-  },
-  heroPreview: {
-    width: '100%',
-    height: 175,
-    borderRadius: 24,
-    borderWidth: 1,
-    justifyContent: 'flex-end',
-    overflow: 'hidden',
-  },
-  heroImage: {
-    borderRadius: 24,
-  },
-  heroOverlay: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  heroContent: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    gap: 12,
-    padding: 12,
-  },
-  heroIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  heroCopy: {
-    flex: 1,
-    gap: 3,
-  },
-  heroTitle: {
-    fontSize: 15,
-    lineHeight: 18,
-    fontWeight: '800',
-  },
-  heroMeta: {
-    fontSize: 10.5,
-    lineHeight: 14,
-    fontWeight: '600',
-  },
-  title: {
-    fontSize: 25,
-    fontWeight: '800',
-    textAlign: 'center',
-    lineHeight: 29,
-  },
-  subtitle: {
-    fontSize: 13,
-    textAlign: 'center',
-    lineHeight: 18,
-    maxWidth: 320,
-  },
-  options: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  optionCard: {
-    width: '48.8%',
-    minHeight: 68,
-    borderRadius: 15,
-    borderWidth: 1.5,
-    padding: 9,
-    gap: 8,
-    position: 'relative',
-  },
-  optionIcon: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  optionCopy: {
-    gap: 3,
-  },
-  optionLabel: {
-    fontSize: 13,
-    fontWeight: '700',
-  },
-  optionSubtitle: {
-    fontSize: 10,
-    lineHeight: 13,
-  },
-  optionCheck: {
-    position: 'absolute',
-    right: 9,
-    top: 9,
-  },
-  footer: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  secondaryBtn: {
-    flex: 1,
-    height: 50,
-    borderRadius: 16,
-    borderWidth: 1.5,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  secondaryBtnText: {
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  primaryBtn: {
-    flex: 1.2,
-    height: 50,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  primaryBtnText: {
-    fontSize: 15,
-    fontWeight: '700',
-  },
-});

components/OnboardingQuestion.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Ionicons } from '@expo/vector-icons';
+import { useColors } from '../constants/Colors';
+
+type ColorsType = ReturnType<typeof useColors>;
+
+export type QuestionOption = { id: string; emoji: string; label: string; subtitle?: string };
+
+type Props = {
+  colors: ColorsType;
+  isDarkMode: boolean;
+  step: number;         // 1-based
+  totalSteps: number;
+  title: string;
+  subtitle: string;
+  options: QuestionOption[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onContinue: () => void;
+  onBack?: () => void;
+  continueLabel: string;
+  skipLabel?: string;
+  onSkip?: () => void;
+};
+
+export function OnboardingQuestion({
+  colors, isDarkMode, step, totalSteps, title, subtitle, options,
+  selectedId, onSelect, onContinue, onBack, continueLabel, skipLabel, onSkip,
+}: Props) {
+  return (
+    <SafeAreaView style={[styles.safe, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]} edges={['top', 'left', 'right', 'bottom']}>
+      <View style={styles.topBar}>
+        {onBack ? (
+          <TouchableOpacity onPress={onBack} style={[styles.backBtn, { backgroundColor: colors.surface }]}>
+            <Ionicons name="arrow-back" size={20} color={colors.primary} />
+          </TouchableOpacity>
+        ) : <View style={styles.backBtn} />}
+        <View style={[styles.progressTrack, { backgroundColor: colors.primarySoft }]}>
+          <View style={[styles.progressFill, { backgroundColor: colors.primary, width: `${Math.round((step / totalSteps) * 100)}%` }]} />
+        </View>
+        <View style={styles.backBtn} />
+      </View>
+      <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+      <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{subtitle}</Text>
+      <View style={styles.options}>
+        {options.map((option) => {
+          const active = selectedId === option.id;
+          return (
+            <TouchableOpacity
+              key={option.id}
+              onPress={() => onSelect(option.id)}
+              activeOpacity={0.85}
+              style={[styles.card, {
+                backgroundColor: active ? colors.primarySoft : colors.surface,
+                borderColor: active ? colors.primary : 'transparent',
+              }]}
+            >
+              <Text style={styles.emoji}>{option.emoji}</Text>
+              <View style={styles.cardCopy}>
+                <Text style={[styles.cardLabel, { color: active ? colors.primary : colors.text }]}>{option.label}</Text>
+                {option.subtitle ? <Text style={[styles.cardSubtitle, { color: colors.textMuted }]}>{option.subtitle}</Text> : null}
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      <View style={styles.footer}>
+        {skipLabel && onSkip ? (
+          <TouchableOpacity onPress={onSkip} style={styles.skipBtn}>
+            <Text style={[styles.skipText, { color: colors.textMuted }]}>{skipLabel}</Text>
+          </TouchableOpacity>
+        ) : null}
+        <TouchableOpacity
+          onPress={onContinue}
+          disabled={!selectedId}
+          activeOpacity={0.86}
+          style={[styles.cta, { backgroundColor: selectedId ? colors.primary : colors.surfaceMuted }]}
+        >
+          <Text style={[styles.ctaText, { color: selectedId ? colors.onPrimary : colors.textMuted }]}>{continueLabel}</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1, paddingHorizontal: 22 },
+  topBar: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingVertical: 10 },
+  backBtn: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+  progressTrack: { flex: 1, height: 6, borderRadius: 3, overflow: 'hidden' },
+  progressFill: { height: 6, borderRadius: 3 },
+  title: { fontSize: 30, lineHeight: 35, fontWeight: '900', textAlign: 'center', marginTop: 18, marginBottom: 8 },
+  subtitle: { fontSize: 15, lineHeight: 20, textAlign: 'center', marginBottom: 22 },
+  options: { gap: 12, flex: 1 },
+  card: { flexDirection: 'row', alignItems: 'center', gap: 14, borderRadius: 16, borderWidth: 2, paddingHorizontal: 16, paddingVertical: 18 },
+  emoji: { fontSize: 26 },
+  cardCopy: { flex: 1, gap: 2 },
+  cardLabel: { fontSize: 17, fontWeight: '800' },
+  cardSubtitle: { fontSize: 12.5, lineHeight: 16 },
+  footer: { gap: 8, paddingBottom: 6 },
+  skipBtn: { alignItems: 'center', paddingVertical: 6 },
+  skipText: { fontSize: 14, fontWeight: '700' },
+  cta: { height: 56, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
+  ctaText: { fontSize: 17, fontWeight: '800' },
+});