'use client'

import {
  Container,
  Stack,
  Box,
  Heading,
  Text,
  Button,
  VStack,
  SimpleGrid,
  useColorModeValue,
  Flex,
  Badge,
} from '@chakra-ui/react'
import { FiPlay, FiDownload, FiStar, FiPhone } from 'react-icons/fi'

export default function Hero() {
  const bgGradient = useColorModeValue(
    'linear(to-br, brand.50, white, brand.100)',
    'linear(to-br, gray.900, gray.800, brand.900)'
  )

  return (
    <Box
      minH={{ base: "80vh", md: "75vh" }}
      bgGradient={bgGradient}
      pt={{ base: 12, md: 20 }}
      pb={{ base: 12, md: 16 }}
      position="relative"
      overflow="hidden"
    >
      {/* Background geometric elements */}
      <Box
        position="absolute"
        top="10%"
        right="5%"
        w="300px"
        h="300px"
        bg="brand.100"
        opacity={0.3}
        rounded="full"
        filter="blur(100px)"
        zIndex={0}
      />
      <Box
        position="absolute"
        bottom="20%"
        left="5%"
        w="200px"
        h="200px"
        bg="brand.200"
        opacity={0.2}
        rounded="full"
        filter="blur(80px)"
        zIndex={0}
      />
      <Container maxW="7xl" position="relative" zIndex={1}>
        <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={8} alignItems="center">
          <VStack align="start" spacing={6}>
            <Badge
              colorScheme="brand"
              variant="subtle"
              px={3}
              py={1}
              rounded="full"
              fontSize="sm"
            >
              #1 Knjigovodstveni program u Srbiji
            </Badge>

            <Heading
              fontSize={{ base: '4xl', md: '5xl', lg: '6xl' }}
              lineHeight={1.1}
              fontWeight={700}
              color={useColorModeValue('gray.700', 'white')}
            >
              Automatizovan-Koristan-Tačan{' '}
              <Text as="span" color="brand.500">
                Interaktivan Vizionarski
              </Text>
            </Heading>

            <Text
              fontSize={{ base: 'lg', md: 'xl' }}
              color={useColorModeValue('gray.600', 'gray.300')}
              lineHeight="tall"
              maxW="xl"
            >
              Pouzdan partner u Vašem poslovnom usponu. Online rešenje koje
              automatizuje sve računovodstvene procese i povećava efikasOn the nost poslovanja.
            </Text>

            <VStack align="start" spacing={2} fontSize="md" color={useColorModeValue('gray.600', 'gray.400')}>
              <Text>✓ Automatizovan - sve se radi automatski</Text>
              <Text>✓ Koristan - praktičan za svakodnevno korišćenje</Text>
              <Text>✓ Tačan - precizne kalkulacije i izvještaji</Text>
              <Text>✓ Interaktivan - jednostavan za korišćenje</Text>
              <Text>✓ Vizionarski - priprema vas za budućnost</Text>
            </VStack>

            <Stack
              direction={{ base: 'column', sm: 'row' }}
              spacing={4}
              w="full"
            >
              <Button
                as="a"
                href="https://moj.aktiv.rs/register"
                target="_blank"
                rel="noopener noreferrer"
                size="lg"
                colorScheme="brand"
                leftIcon={<FiPlay />}
                px={8}
                py={6}
                fontSize="md"
                fontWeight={600}
                rounded="xl"
                boxShadow="lg"
                _hover={{
                  transform: 'translateY(-2px)',
                  boxShadow: 'xl'
                }}
              >
                Počni besplatno
              </Button>
            </Stack>

            <Flex align="center" gap={4} pt={4}>
              <Flex align="center">
                {[...Array(5)].map((_, i) => (
                  <FiStar key={i} color="#ECC94B" fill="#ECC94B" />
                ))}
              </Flex>
              <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>
                <Text as="span" fontWeight={600}>4.8/5</Text> na osnovu 1,200+ korisnika
              </Text>
            </Flex>
          </VStack>

          <Box position="relative">
            <Box
              bg={useColorModeValue('white', 'gray.800')}
              p={8}
              rounded="3xl"
              boxShadow="2xl"
              border="1px"
              borderColor={useColorModeValue('gray.200', 'gray.700')}
              position="relative"
              overflow="hidden"
            >
              <Box
                position="absolute"
                top={0}
                left={0}
                right={0}
                h={2}
                bgGradient="linear(to-r, brand.400, brand.600)"
              />

              <VStack spacing={6} align="center">
                <Box
                  w={20}
                  h={20}
                  bg="brand.500"
                  rounded="2xl"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  color="white"
                  fontSize="2xl"
                  fontWeight="bold"
                >
                  A
                </Box>

                <VStack spacing={4} textAlign="center">
                  <Heading size="lg" color={useColorModeValue('gray.700', 'white')}>
                    AKTIV Program
                  </Heading>
                  <Text color={useColorModeValue('gray.600', 'gray.400')} fontSize="sm" px={2}>
                    Pozovite nas da ZAJEDNO prođemo kroz program
                  </Text>
                </VStack>

                <VStack spacing={3}>
                  <Flex
                    as="a"
                    href="tel:+38160626844"
                    align="center"
                    gap={2}
                    color="brand.500"
                    fontWeight={600}
                    fontSize="lg"
                    _hover={{ color: 'brand.600', textDecoration: 'underline' }}
                    cursor="pointer"
                  >
                    <FiPhone size="16px" />
                    060 / 62-62-844
                  </Flex>
                  <Flex
                    as="a"
                    href="tel:+38160626877"
                    align="center"
                    gap={2}
                    color="brand.500"
                    fontWeight={600}
                    fontSize="lg"
                    _hover={{ color: 'brand.600', textDecoration: 'underline' }}
                    cursor="pointer"
                  >
                    <FiPhone size="16px" />
                    060 / 62-62-877
                  </Flex>
                </VStack>

                <Box
                  as="a"
                  href="https://moj.aktiv.rs/register"
                  target="_blank"
                  rel="noopener noreferrer"
                  w="full"
                  p={4}
                  bg={useColorModeValue('brand.50', 'brand.900')}
                  rounded="xl"
                  border="1px"
                  borderColor="brand.200"
                  cursor="pointer"
                  _hover={{
                    bg: useColorModeValue('brand.100', 'brand.800'),
                    transform: 'translateY(-2px)',
                    boxShadow: 'md'
                  }}
                  transition="all 0.2s ease"
                >
                  <Text fontSize="sm" color={useColorModeValue('brand.700', 'brand.300')} fontWeight={600} textAlign="center">
                    Promo paket BESPLATNO 30 dana
                  </Text>
                </Box>
              </VStack>
            </Box>

            <Box
              position="absolute"
              top={-4}
              right={-4}
              w={24}
              h={24}
              bg="brand.100"
              rounded="full"
              opacity={0.6}
              zIndex={-1}
            />
            <Box
              position="absolute"
              bottom={-6}
              left={-6}
              w={32}
              h={32}
              bg="brand.50"
              rounded="full"
              opacity={0.4}
              zIndex={-1}
            />
          </Box>
        </SimpleGrid>
      </Container>
    </Box>
  )
}