new register

src/screens/LandingPage.js

@@ -1,6 +1,7 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useNavigation } from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import { useCallback, useEffect, useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { background } from "../assets";
 import FullscreenIntroVideo from "../components/FullscreenIntroVideo";
 import GradientButton from "../components/GradientButton";
@@ -10,16 +11,36 @@ import { isWeb } from "../hooks/useLayoutType";
 import Page from "../layouts/Page";
 import { Routes } from "../navigation/Routes";
 import { useUser } from "../providers/UserDataProvider";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+
+const LANGUAGE_STORAGE_KEY = "preferredLanguage";
 
 export default function LandingPage() {
   const navigation = useNavigation();
   const { currentUID } = useUser();
   const [isVideoVisible, setIsVideoVisible] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState(null);
 
   const handleStartVisit = useCallback(() => {
     setIsVideoVisible(true);
   }, []);
 
+  const handleSelectLanguage = useCallback((language) => {
+    setSelectedLanguage(language);
+    AsyncStorage.setItem(LANGUAGE_STORAGE_KEY, language).catch((error) => {
+      console.warn("LandingPage: failed to persist language", error);
+    });
+  }, []);
+
+  const handleSashaHome = useCallback(() => {
+    // Placeholder handler until the Sasha experience is available.
+  }, []);
+
+  const handleLaunchAdventure = useCallback(() => {
+    navigation.navigate(Routes.Register);
+  }, [navigation]);
+
   const persistAdventureStarted = useCallback(async () => {
     if (!currentUID) {
       return;
@@ -44,11 +65,28 @@ export default function LandingPage() {
     simpleRef: true,
   });
 
+  useEffect(() => {
+    let isMounted = true;
+    AsyncStorage.getItem(LANGUAGE_STORAGE_KEY)
+      .then((storedLanguage) => {
+        if (storedLanguage && isMounted) {
+          setSelectedLanguage(storedLanguage);
+        }
+      })
+      .catch((error) => {
+        console.warn("LandingPage: failed to load language", error);
+      });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
   return (
     <>
       <Page
         shareBtn
-        connect
+        // connect
         title="Landing Page"
         backgroundImg={background.homeBGWeb}
       >
@@ -59,10 +97,43 @@ export default function LandingPage() {
             alignItems: "center",
           }}
         >
-          <GradientButton
-            title="Commencer la visite"
-            onPress={handleStartVisit}
-          />
+          <View style={styles.content}>
+            {!selectedLanguage && (
+              <View style={styles.languageRow}>
+                <TouchableOpacity
+                  style={[styles.languageButton]}
+                  onPress={() => handleSelectLanguage("fr")}
+                >
+                  <Text style={styles.languageText}>🇫🇷 Français</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.languageButton]}
+                  onPress={() => handleSelectLanguage("en")}
+                >
+                  <Text style={styles.languageText}>🇬🇧 English</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+            {selectedLanguage && (
+              <View style={styles.actions}>
+                <GradientButton
+                  title="Découvrir Musicland"
+                  onPress={handleStartVisit}
+                  containerStyle={styles.actionButton}
+                />
+                <GradientButton
+                  title="Accueil avec Sasha"
+                  onPress={handleSashaHome}
+                  containerStyle={styles.actionButton}
+                />
+                <GradientButton
+                  title="Je me lance dans l'aventure"
+                  onPress={handleLaunchAdventure}
+                  containerStyle={styles.actionButton}
+                />
+              </View>
+            )}
+          </View>
         </View>
       </Page>
       <FullscreenIntroVideo
@@ -73,3 +144,40 @@ export default function LandingPage() {
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  content: {
+    width: "100%",
+    maxWidth: 360,
+    alignItems: "center",
+    gap: 32,
+  },
+  languageRow: {
+    flexDirection: "row",
+    gap: 16,
+    justifyContent: "center",
+  },
+  languageButton: {
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: Palette.ultraLightWhite,
+    backgroundColor: Palette.ultraLightWhite,
+    paddingVertical: 12,
+    paddingHorizontal: 18,
+    minWidth: 140,
+    alignItems: "center",
+  },
+  languageText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  actions: {
+    width: "100%",
+    maxWidth: 320,
+    gap: 16,
+  },
+  actionButton: {
+    width: "100%",
+  },
+});