/**
 * 价值前沿 - 启动页
 * 黑金主题设计
 */

import React from "react";
import {
  View,
  Image,
  StyleSheet,
  StatusBar,
  Dimensions,
  Platform,
  Pressable,
} from "react-native";
import { Box, VStack, HStack, Text, Center } from "native-base";
import { LinearGradient } from "expo-linear-gradient";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const { height, width } = Dimensions.get("screen");

// 金色渐变
const GOLD_GRADIENT = ['#D4AF37', '#F5D77A', '#D4AF37'];
const GOLD_DARK = '#B8962E';
const GOLD_LIGHT = '#F5D77A';
const GOLD_PRIMARY = '#D4AF37';

const Pro = ({ navigation }) => {
  const insets = useSafeAreaInsets();

  return (
    <Box flex={1} bg="#000000">
      <StatusBar barStyle="light-content" backgroundColor="#000000" />

      {/* 背景装饰 */}
      <Box position="absolute" top={0} left={0} right={0} bottom={0}>
        {/* 顶部金色光晕 */}
        <LinearGradient
          colors={['rgba(212, 175, 55, 0.15)', 'rgba(212, 175, 55, 0.05)', 'transparent']}
          start={{ x: 0.5, y: 0 }}
          end={{ x: 0.5, y: 0.5 }}
          style={StyleSheet.absoluteFill}
        />
        {/* 底部深色渐变 */}
        <LinearGradient
          colors={['transparent', 'rgba(0, 0, 0, 0.8)', '#000000']}
          start={{ x: 0.5, y: 0.5 }}
          end={{ x: 0.5, y: 1 }}
          style={StyleSheet.absoluteFill}
        />
      </Box>

      {/* 主内容 */}
      <VStack flex={1} justifyContent="space-between" style={{ paddingTop: insets.top }}>
        {/* 上部空间 */}
        <Box flex={1} />

        {/* Logo 区域 */}
        <Center flex={2}>
          <Box
            bg="rgba(212, 175, 55, 0.08)"
            borderWidth={1}
            borderColor="rgba(212, 175, 55, 0.2)"
            rounded="3xl"
            p={6}
            style={styles.logoContainer}
          >
            <Image
              source={require("../assets/logo.jpg")}
              style={styles.logo}
              resizeMode="contain"
            />
          </Box>

          {/* 品牌名称 */}
          <VStack alignItems="center" mt={8} space={2}>
            <Text
              fontSize="4xl"
              fontWeight="bold"
              letterSpacing="xl"
              style={styles.brandText}
            >
              价值前沿
            </Text>
            <Text
              fontSize="md"
              letterSpacing="lg"
              color="rgba(212, 175, 55, 0.7)"
            >
              VALUE FRONTIER
            </Text>
          </VStack>
        </Center>

        {/* 特性描述 */}
        <Center flex={1} px={8}>
          <Text
            fontSize="md"
            color="rgba(255, 255, 255, 0.6)"
            textAlign="center"
            lineHeight="xl"
          >
            智能投资决策平台{"\n"}
            发现市场热点，把握投资机会
          </Text>
        </Center>

        {/* 底部按钮区域 */}
        <VStack space={4} px={6} style={{ paddingBottom: insets.bottom + 30 }}>
          {/* 开始使用按钮 */}
          <Pressable onPress={() => navigation.navigate("App")}>
            {({ isPressed }) => (
              <LinearGradient
                colors={isPressed ? [GOLD_DARK, GOLD_PRIMARY] : GOLD_GRADIENT}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={[
                  styles.primaryButton,
                  { opacity: isPressed ? 0.9 : 1, transform: [{ scale: isPressed ? 0.98 : 1 }] }
                ]}
              >
                <Text fontSize="lg" fontWeight="bold" color="#000000">
                  开始使用
                </Text>
              </LinearGradient>
            )}
          </Pressable>

          {/* 版本信息 */}
          <Center>
            <Text fontSize="xs" color="rgba(255, 255, 255, 0.3)">
              Version 1.0.0
            </Text>
          </Center>
        </VStack>
      </VStack>
    </Box>
  );
};

const styles = StyleSheet.create({
  logoContainer: {
    shadowColor: '#D4AF37',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.3,
    shadowRadius: 30,
    elevation: 10,
  },
  logo: {
    width: 160,
    height: 160,
  },
  brandText: {
    color: '#D4AF37',
    textShadowColor: 'rgba(212, 175, 55, 0.5)',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 20,
  },
  primaryButton: {
    height: 56,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#D4AF37',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.4,
    shadowRadius: 12,
    elevation: 8,
  },
});

export default Pro;