/**
 * 关于页面 - 价值前沿
 */

import React from "react";
import { ScrollView, StyleSheet, Image, Dimensions } from "react-native";
import { Box, VStack, HStack, Text, Center, Icon } from "native-base";
import { LinearGradient } from "expo-linear-gradient";
import { Ionicons } from "@expo/vector-icons";

const { width } = Dimensions.get("window");

// 金色主题
const GOLD_PRIMARY = '#D4AF37';
const GOLD_GRADIENT = ['#D4AF37', '#F5D77A', '#D4AF37'];

const FeatureItem = ({ icon, title, description }) => (
  <HStack
    bg="rgba(212, 175, 55, 0.08)"
    borderWidth={1}
    borderColor="rgba(212, 175, 55, 0.15)"
    rounded="xl"
    p={4}
    space={3}
    alignItems="center"
    mb={3}
  >
    <Box
      bg="rgba(212, 175, 55, 0.15)"
      rounded="lg"
      p={2}
    >
      <Icon as={Ionicons} name={icon} size="md" color={GOLD_PRIMARY} />
    </Box>
    <VStack flex={1}>
      <Text fontSize="sm" fontWeight="bold" color="white">
        {title}
      </Text>
      <Text fontSize="xs" color="gray.400">
        {description}
      </Text>
    </VStack>
  </HStack>
);

export default function About() {
  return (
    <Box flex={1} bg="#0F172A">
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.container}
      >
        {/* Logo 区域 */}
        <Center mb={6}>
          <Box
            bg="rgba(212, 175, 55, 0.1)"
            borderWidth={1}
            borderColor="rgba(212, 175, 55, 0.2)"
            rounded="2xl"
            p={4}
            mb={4}
          >
            <Image
              source={require("../assets/logo.jpg")}
              style={{ width: 80, height: 80 }}
              resizeMode="contain"
            />
          </Box>
          <Text fontSize="2xl" fontWeight="bold" color={GOLD_PRIMARY}>
            价值前沿
          </Text>
          <Text fontSize="sm" color="rgba(212, 175, 55, 0.7)" mt={1}>
            VALUE FRONTIER
          </Text>
          <Text fontSize="xs" color="gray.500" mt={2}>
            Version 1.0.0
          </Text>
        </Center>

        {/* 介绍文字 */}
        <Box
          bg="rgba(30, 41, 59, 0.6)"
          borderWidth={1}
          borderColor="rgba(255, 255, 255, 0.08)"
          rounded="2xl"
          p={4}
          mb={6}
        >
          <Text fontSize="sm" color="gray.300" lineHeight="xl" textAlign="center">
            价值前沿是一款专注于A股市场的智能投资决策平台，
            通过实时追踪市场事件、分析板块热点，
            帮助投资者发现市场机会，做出更明智的投资决策。
          </Text>
        </Box>

        {/* 核心功能 */}
        <Text fontSize="md" fontWeight="bold" color="white" mb={3}>
          核心功能
        </Text>

        <FeatureItem
          icon="flash"
          title="事件中心"
          description="实时追踪市场重大事件，分析事件影响力和相关股票表现"
        />
        <FeatureItem
          icon="flame"
          title="市场热点"
          description="智能分析板块热度，发现市场主线和投资机会"
        />
        <FeatureItem
          icon="analytics"
          title="数据分析"
          description="提供专业的行情数据和技术指标分析工具"
        />
        <FeatureItem
          icon="notifications"
          title="智能提醒"
          description="关键事件和异动股票的实时推送通知"
        />

        {/* 联系信息 */}
        <Box mt={6}>
          <Text fontSize="md" fontWeight="bold" color="white" mb={3}>
            联系我们
          </Text>
          <Box
            bg="rgba(30, 41, 59, 0.6)"
            borderWidth={1}
            borderColor="rgba(255, 255, 255, 0.08)"
            rounded="2xl"
            p={4}
          >
            <HStack alignItems="center" space={2} mb={2}>
              <Icon as={Ionicons} name="globe-outline" size="sm" color="gray.400" />
              <Text fontSize="sm" color="gray.300">www.valuefrontier.cn</Text>
            </HStack>
            <HStack alignItems="center" space={2}>
              <Icon as={Ionicons} name="mail-outline" size="sm" color="gray.400" />
              <Text fontSize="sm" color="gray.300">support@valuefrontier.cn</Text>
            </HStack>
          </Box>
        </Box>

        {/* 版权信息 */}
        <Center mt={8} mb={4}>
          <Text fontSize="xs" color="gray.600">
            Copyright 2024 Value Frontier
          </Text>
          <Text fontSize="xs" color="gray.600">
            All rights reserved.
          </Text>
        </Center>
      </ScrollView>
    </Box>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
});