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>

      <View style={styles.copy}>
        <Text style={styles.title}>
          Select games you play and find people with similar interests.
        </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>
  );
}

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,
  },
});
