// Metro module 16278 (f16279).
import { ScrollView, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import FastImage from "../../../../components_native/common/FastImage";
import Module11853 from "../../../../_bundle/Module11853";
import { handleOpenLearnMoreLink } from "../../../contact_sync/native/ContactSyncUtils";
import { Button } from "../../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  topContainer: {
    paddingTop: Module712.space.PX_16
  },
  growContainer: {
    flexGrow: 2
  },
  image: {
    width: "100%",
    marginBottom: Module712.space.PX_32
  },
  title: {
    textAlign: "center",
    marginBottom: Module712.space.PX_16
  },
  subtitle: {
    textAlign: "center",
    marginBottom: Module712.space.PX_32
  },
  info: {
    paddingHorizontal: 16,
    marginTop: 8,
    marginBottom: 24,
    textAlign: "center"
  }
});
export default function RedesignDiscoverabilityLanding(props) {
  const styles = useStyles();
  const onNext = props.onNext;
  return <ScrollView style={styles.container} alwaysBounceVertical={false} contentContainerStyle={{
    flexGrow: 2,
    paddingTop: NAV_BAR_HEIGHT + 32,
    paddingBottom: useSafeAreaInsets_native().bottom + 16,
    paddingHorizontal: Module712.space.PX_16
  }}>
    <View style={styles.topContainer} />
    <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
      {intl.string(t.n8nw6j)}
    </Text>
    <Text variant="text-sm/medium" color="text-default" style={styles.subtitle}>
      {intl.string(t.KMW0kP)}
    </Text>
    <FastImage resizeMode="contain" style={styles.image} source={Module11853} />
    <Text style={styles.info} variant="text-sm/medium" color="text-default">
      {intl.string(t.ci12MJ)}
      {" "}
      {intl.format(t.VcSQ4n, {
        learnMoreHook: function learnMoreHook(a0, a1) {
          return <Text key={a1} onPress={handleOpenLearnMoreLink} variant="text-sm/medium" color="text-link">
            {a0}
          </Text>;
        }
      })}
    </Text>
    <View style={styles.growContainer} />
    <Button variant="primary" size="lg" text={intl.string(t.gHPk3I)} onPress={onNext} />
  </ScrollView>;
};