'use client'

import {
  Box,
  Container,
  SimpleGrid,
  Stack,
  Text,
  Heading,
  useColorModeValue,
  VStack,
  Icon,
} from '@chakra-ui/react'
import { FiTrendingUp, FiUsers, FiShield, FiClock } from 'react-icons/fi'

const Feature = ({ title, text, icon }: any) => {
  return (
    <Box
      bg={useColorModeValue('white', 'gray.800')}
      rounded="2xl"
      p={8}
      shadow="xl"
      border="1px"
      borderColor={useColorModeValue('gray.100', 'gray.700')}
      position="relative"
      overflow="hidden"
      _hover={{
        transform: 'translateY(-4px)',
        shadow: '2xl',
        borderColor: useColorModeValue('brand.200', 'brand.600')
      }}
      transition="all 0.3s ease"
    >
      <Box
        position="absolute"
        top={0}
        left={0}
        w="full"
        h={1}
        bgGradient="linear(to-r, brand.400, brand.600)"
      />

      <VStack align="start" spacing={6}>
        <Box
          p={3}
          bg={useColorModeValue('brand.50', 'brand.900')}
          rounded="xl"
          display="inline-block"
        >
          <Icon as={icon} w={8} h={8} color="brand.500" />
        </Box>

        <VStack align="start" spacing={3}>
          <Heading
            size="lg"
            color={useColorModeValue('gray.700', 'white')}
            lineHeight="shorter"
          >
            {title}
          </Heading>
          <Text
            color={useColorModeValue('gray.600', 'gray.400')}
            lineHeight="tall"
            fontSize="md"
          >
            {text}
          </Text>
        </VStack>
      </VStack>
    </Box>
  )
}

export default function Features() {
  return (
    <Box id="features" py={20}>
      <Container maxW="6xl">
        <VStack spacing={8} mb={16} textAlign="center">
          <Heading
            fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}
            fontWeight={700}
            color={useColorModeValue('gray.700', 'white')}
            lineHeight="shorter"
          >
            Zašto je AKTIV{' '}
            <Text as="span" color="brand.500">
              najbolji izbor?
            </Text>
          </Heading>
          <Text
            fontSize={{ base: 'lg', md: 'xl' }}
            color={useColorModeValue('gray.600', 'gray.400')}
            maxW="4xl"
            lineHeight="tall"
          >
            Naši IT stručnjaci u saradnji sa uglednim knjigovođama kreirali su revolucionarno
            rešenje koje kombinuje najnovije tehnologije sa praktičnim potrebama modernog poslovanja.
          </Text>
        </VStack>

        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8} mb={16}>
          <Feature
            icon={FiTrendingUp}
            title="Povećajte efikasnost za 300%"
            text="Automatizacija radnih procesa, pametna raspodela zadataka i trenutna razmena informacija čine vaše poslovanje 3 puta efikasnijim."
          />
          <Feature
            icon={FiUsers}
            title="Timski rad bez granica"
            text="Omogućite vašem timu da radi istovremeno iz bilo koje lokacije. Jedan program, neograničen broj korisnika, potpuna kontrola."
          />
          <Feature
            icon={FiShield}
            title="Sigurnost na enterprise nivou"
            text="Napredni sistem enkripcije, automatske rezervne kopije i monitoring sistema 24/7 garantuju potpunu sigurnost vaših podataka."
          />
          <Feature
            icon={FiClock}
            title="Uštedite 15+ sati nedeljno"
            text="Automatski izveštaji, pametno prepoznavanje dokumenata i AI asistent reduciraju rutinske zadatke za preko 80%."
          />
        </SimpleGrid>

        <Box
          bg={useColorModeValue('brand.50', 'gray.800')}
          rounded="3xl"
          p={12}
          textAlign="center"
          border="1px"
          borderColor={useColorModeValue('brand.100', 'gray.700')}
        >
          <VStack spacing={6}>
            <Heading
              fontSize={{ base: '2xl', md: '3xl' }}
              color={useColorModeValue('gray.700', 'white')}
            >
              Pridružite se liderima tržišta
            </Heading>
            <Text
              fontSize="lg"
              color={useColorModeValue('gray.600', 'gray.300')}
              maxW="2xl"
            >
              Preko 2,847 kompanija već koristi AKTIV za upravljanje svojom finansijskom dokumentacijom
            </Text>
            <SimpleGrid columns={{ base: 2, md: 4 }} spacing={8} pt={4}>
              <VStack>
                <Text fontSize="3xl" fontWeight="bold" color="brand.500">2,847</Text>
                <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>Aktivnih kompanija</Text>
              </VStack>
              <VStack>
                <Text fontSize="3xl" fontWeight="bold" color="brand.500">15M+</Text>
                <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>Procesiranih dokumenata</Text>
              </VStack>
              <VStack>
                <Text fontSize="3xl" fontWeight="bold" color="brand.500">99.9%</Text>
                <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>Uptime garancija</Text>
              </VStack>
              <VStack>
                <Text fontSize="3xl" fontWeight="bold" color="brand.500">4.8/5</Text>
                <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>Prosečna ocena</Text>
              </VStack>
            </SimpleGrid>
          </VStack>
        </Box>
      </Container>
    </Box>
  )
}