Home.tsx

import { Pressable, ScrollView, Text, View } from "react-native";

import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";

import { useAuth } from "../../auth";
import { colors, styles } from "../../styles";
import type { RootStackParamList } from "../index";

export function Home() {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const { signOut } = useAuth();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.card}>
          <Text style={styles.title}>Detour Example</Text>
          <Text style={styles.subtitle}>
            Add credentials from the Detour panel to <Text style={styles.accent}>.env</Text> before
            testing.
          </Text>

          <View style={styles.divider} />

          <Text style={styles.sectionHeader}>Universal / App Link</Text>
          <Text style={styles.bullet}>
            Open a <Text style={styles.accent}>godetour.link</Text> URL in the browser — Detour
            resolves it and navigates to the Details screen.
          </Text>
          <Text style={styles.code}>
            https://&lt;your-org&gt;.godetour.link/&lt;hash&gt;/details
          </Text>

          <Text style={styles.sectionHeader}>Custom Scheme</Text>
          <Text style={styles.bullet}>
            This example also handles custom scheme links. Opening a non-Detour URL redirects to the
            Third-party screen. Test with the simulator:
          </Text>
          <Text style={styles.code}>
            npx uri-scheme open {`"detour-react-navigation-advanced://app"`} --ios
          </Text>

          <Text style={styles.sectionHeader}>Deferred Link + Auth Gate</Text>
          <Text style={styles.bullet}>
            Copy a Detour link, sign out, then relaunch. The link survives the sign-in flow — you'll
            land on the Details screen once you complete sign-in and onboarding.
          </Text>
          <Text style={styles.bullet}>
            Make sure <Text style={styles.accent}>Copy link feature enabled</Text> is turned on in
            App Configuration in the Detour panel.
          </Text>
        </View>
      </ScrollView>

      <View style={{ flexDirection: "row", gap: 12, padding: 16 }}>
        <Pressable
          onPress={() => navigation.navigate("Details")}
          style={[styles.button, { flex: 1 }]}
        >
          <Text style={styles.buttonText}>Go to Details →</Text>
        </Pressable>
        <Pressable onPress={signOut} style={[styles.button, styles.dangerButton, { flex: 1 }]}>
          <Text style={styles.buttonText}>Logout</Text>
        </Pressable>
      </View>
    </View>
  );
}