import { useRouter } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { Button } from '@/components/ui';
import { colors, space, text } from '@/theme/tokens';

export default function WillkommenScreen() {
  const router = useRouter();
  return (
    <SafeAreaView style={s.safe}>
      <View style={s.body}>
        <View style={s.top}>
          <Text style={s.marke}>BrandLoop</Text>
          <Text style={s.claim}>
            Deine Ads lernen aus jedem ausgegebenen Euro. Generische Tools erstellen Bilder – hier
            entsteht ein Gedächtnis für deine Marke.
          </Text>
        </View>
        <View style={s.actions}>
          <Button title="Konto erstellen" onPress={() => router.push('/registrieren')} />
          <Button title="Anmelden" variant="ghost" onPress={() => router.push('/anmelden')} />
        </View>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bg },
  body: { flex: 1, justifyContent: 'space-between', padding: space.xl, paddingBottom: space.xxl },
  top: { flex: 1, justifyContent: 'center', gap: space.lg },
  marke: { fontSize: 40, fontWeight: '700', color: colors.txt, letterSpacing: -1 },
  claim: { ...text.body, color: colors.mut, fontSize: 17, lineHeight: 25 },
  actions: { gap: space.md },
});
