import React from "react";
import {
  Box,
  Button,
  Container,
  Flex,
  Heading,
  Image,
  Stack,
  Text,
  Link,
} from "@chakra-ui/react";
import { Icon } from "@chakra-ui/icon";
import { TypeAnimation } from 'react-type-animation';
import { FaGithub, FaLinkedin } from 'react-icons/fa';
import { motion } from "framer-motion";

const Hero = () => {
  // 由于useColorModeValue在当前版本可能不可用，我们使用简单的方式定义颜色
  const textColor = "blue.600";
  const headingColor = "gray.800";
  const descriptionColor = "gray.600";
  const hoverBg = "gray.200";

  return (
    <Container maxW={"7xl"} id="hero">
      <Stack
        align={"center"}
        py={{ base: 20, md: 28 }}
        direction={{ base: "column", md: "row" }}
        gap={{ base: 8, md: 10 }}
      >
        <Stack flex={1} gap={{ base: 5, md: 10 }}>
          <Heading
            lineHeight={1.1}
            fontWeight={600}
            fontSize={{ base: "3xl", sm: "4xl", lg: "6xl" }}
          >
            <Text
              as={"span"}
              position={"relative"}
              color={textColor}
            >
              你好，我是
            </Text>
            <br />
            <Text as={"span"} color={headingColor}>
              Java后台与大数据专家
            </Text>
          </Heading>
          <Box>
            <TypeAnimation
              sequence={[
                '专注于分布式系统开发',
                1000,
                '精通Spring Boot & Cloud',
                1000,
                'Hadoop & Spark 数据处理',
                1000,
                'Kafka & Flink 流处理',
                1000
              ]}
              wrapper="span"
              speed={50}
              style={{ fontSize: '2em', display: 'inline-block', color: descriptionColor }}
              repeat={Infinity}
            />
          </Box>
          <Text color={descriptionColor}>
            我是一名资深Java后台开发工程师和大数据专家，拥有多年企业级应用开发和大规模数据处理系统设计经验。
            我擅长解决高并发、高可用的系统架构问题，以及复杂数据分析和流处理解决方案。
          </Text>
          <Stack
            gap={{ base: 4, sm: 6 }}
            direction={{ base: "column", sm: "row" }}
          >
            <Button
              onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
              rounded={"full"}
              size={"lg"}
              fontWeight={"normal"}
              px={6}
              colorScheme={"blue"}
            >
              联系我
            </Button>
            <Button
              onClick={() => document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' })}
              rounded={"full"}
              size={"lg"}
              fontWeight={"normal"}
              px={6}
              colorScheme="gray"
            >
              <Box mr={2}><Icon as={FaGithub as any} /></Box>
              查看项目
            </Button>
          </Stack>
          <Stack direction={"row"} gap={6}>
            <Link href="https://github.com/yourusername" target="_blank">
              <Button
                variant="ghost"
                borderRadius="full"
                size="lg"
                _hover={{ bg: hoverBg }}
              >
                <Icon as={FaGithub as any} boxSize="28px" />
              </Button>
            </Link>
            <Link href="https://linkedin.com/in/yourusername" target="_blank">
              <Button
                variant="ghost"
                borderRadius="full"
                size="lg"
                _hover={{ bg: hoverBg }}
              >
                <Icon as={FaLinkedin as any} boxSize="28px" />
              </Button>
            </Link>
          </Stack>
        </Stack>
        <Flex
          flex={1}
          justify={"center"}
          align={"center"}
          position={"relative"}
          w={"full"}
        >
          <Box
            position={"relative"}
            height={"400px"}
            rounded={"2xl"}
            boxShadow={"2xl"}
            width={"full"}
            overflow={"hidden"}
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
            >
              <Image
                alt={"Hero Image"}
                fit={"cover"}
                align={"center"}
                w={"100%"}
                h={"100%"}
                src={"https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=2070"}
              />
            </motion.div>
          </Box>
        </Flex>
      </Stack>
    </Container>
  );
};

export default Hero; 