gumblefrontend/src/app/(auth)/onboarding.tsx

import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { BrandPressable } from '@/components/brand-pressable';
import { Brand, BrandFont } from '@/constants/theme';

/**
 * Frame `52-54` in the Figma ("UI variation - 2"). The opening splash that
 * introduces Gumble and offers Sign Up / Log In. The hero artwork in the
 * Figma is a custom illustration that we approximate with a magenta-to-pink
 * gradient and a stylised game-pad silhouette drawn from primitives.
 */
export default function OnboardingScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.root, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
      <View style={styles.header}>
        <View style={styles.logoMark}>
          <Text style={styles.logoMarkText}>G</Text>
        </View>
        <Text style={styles.brandWordmark}>Gumble</Text>
      </View>

      <View style={styles.hero}>
        <View style={styles.heroFrame}>
          <LinearGradient
            colors={['rgba(233,46,186,0.18)', 'rgba(255,255,255,0.02)']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
          <GamePadIllustration />
        </View>
      </View>

      <View style={styles.copy}>
        <Text style={styles.title}>Gamble your games, gamble your skills</Text>
        <Text style={styles.subtitle}>
          Play mini-games, complete tasks, and earn rewards — all powered by your favorite games.
        </Text>
      </View>

      <View style={styles.actions}>
        <BrandPressable label="Sign Up" onPress={() => router.push('/(auth)/login')} />
        <BrandPressable
          label="Log In"
          variant="outline"
          onPress={() => router.push('/(auth)/login')}
        />
      </View>
    </View>
  );
}

function GamePadIllustration() {
  return (
    <View style={illustStyles.root}>
      <View style={illustStyles.pad}>
        <View style={illustStyles.dpad}>
          <View style={[illustStyles.dpadArm, illustStyles.dpadHorizontal]} />
          <View style={[illustStyles.dpadArm, illustStyles.dpadVertical]} />
        </View>
        <View style={illustStyles.buttons}>
          <View style={[illustStyles.button, { backgroundColor: '#e92eba' }]} />
          <View style={[illustStyles.button, { backgroundColor: '#f3c' }]} />
        </View>
        <View style={illustStyles.stick} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: Brand.bg,
    paddingHorizontal: 24,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    paddingTop: 12,
  },
  logoMark: {
    width: 28,
    height: 28,
    borderRadius: 8,
    backgroundColor: Brand.accent,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoMarkText: {
    color: Brand.text,
    fontSize: 16,
    lineHeight: 20,
    fontFamily: BrandFont.montserratBold,
  },
  brandWordmark: {
    color: Brand.accent,
    fontSize: 18,
    lineHeight: 22,
    fontFamily: BrandFont.montserratBold,
  },
  hero: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 16,
  },
  heroFrame: {
    width: '100%',
    aspectRatio: 1,
    maxHeight: 320,
    borderRadius: 16,
    overflow: 'hidden',
    backgroundColor: Brand.surfaceAlt,
    alignItems: 'center',
    justifyContent: 'center',
  },
  copy: {
    gap: 12,
    paddingBottom: 24,
  },
  title: {
    color: Brand.text,
    fontSize: 26,
    lineHeight: 32,
    fontFamily: BrandFont.montserratBold,
    textAlign: 'center',
  },
  subtitle: {
    color: Brand.textMuted,
    fontSize: 14,
    lineHeight: 20,
    fontFamily: BrandFont.poppinsRegular,
    textAlign: 'center',
    paddingHorizontal: 8,
  },
  actions: {
    gap: 12,
    paddingBottom: 8,
  },
});

const illustStyles = StyleSheet.create({
  root: {
    width: '70%',
    aspectRatio: 1.2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pad: {
    width: '100%',
    height: '60%',
    backgroundColor: 'rgba(255,255,255,0.05)',
    borderRadius: 24,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingHorizontal: 24,
  },
  dpad: {
    width: 44,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dpadArm: {
    position: 'absolute',
    backgroundColor: 'rgba(255,255,255,0.5)',
    borderRadius: 3,
  },
  dpadHorizontal: {
    width: 44,
    height: 10,
  },
  dpadVertical: {
    width: 10,
    height: 44,
  },
  buttons: {
    flexDirection: 'row',
    gap: 12,
  },
  button: {
    width: 18,
    height: 18,
    borderRadius: 9,
  },
  stick: {
    position: 'absolute',
    bottom: 14,
    alignSelf: 'center',
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'rgba(255,255,255,0.3)',
  },
});