'use client'

import {
  Box,
  Container,
  Heading,
  Text,
  VStack,
  Stack,
  useColorModeValue,
  Avatar,
} from '@chakra-ui/react'

export default function Team() {
  return (
    <Box py={20}>
      <Container maxW="6xl">
        <VStack spacing={8} mb={16}>
          <Heading
            fontSize={{ base: '2xl', sm: '4xl' }}
            fontWeight="bold"
            color={useColorModeValue('gray.700', 'white')}
            textAlign="center"
          >
            Aktiv Tim
          </Heading>
          <Text
            fontSize="xl"
            color={useColorModeValue('gray.600', 'gray.400')}
            textAlign="center"
            maxW="4xl"
            lineHeight="tall"
          >
            Učinak direktno zavisi od učinka svakog člana našeg tima. Održavajući atmosferu poverenja,
            u svakom trenutku smo toga svesni zato i dajemo sve od sebe jer znamo da je za postizanje
            naših ciljeva najbitnije da radimo kao jedan.
          </Text>
        </VStack>

        <Stack
          spacing={8}
          direction={{ base: 'column', lg: 'row' }}
          justify="center"
          align="center"
        >
          <Box
            bg={useColorModeValue('white', 'gray.800')}
            rounded="xl"
            p={8}
            shadow="lg"
            maxW="md"
            border="1px"
            borderColor={useColorModeValue('gray.200', 'gray.700')}
          >
            <VStack spacing={4}>
              <Avatar size="xl" bg="brand.500" />
              <Text
                color={useColorModeValue('gray.600', 'gray.400')}
                fontSize="lg"
                textAlign="center"
                fontStyle="italic"
                lineHeight="tall"
              >
                "Svoju struku sam birala iz ljubavi i zato mi je kvalitet posla kojim se bavim uvek na prvom mestu.
                Odgovornost je svih knjigovođa da budu velika podrška i ekonomska stabilnost mnogim klijentima.
                Zato, svakim danom se trudim da uvedem inovacije u program za računovodstvo. Odabrala sam AKTIV iz prostog razloga
                jer je najbrži i najsigurniji, a što je najvažnije lak za korišćenje!"
              </Text>
            </VStack>
          </Box>

          <Box
            bg={useColorModeValue('white', 'gray.800')}
            rounded="xl"
            p={8}
            shadow="lg"
            maxW="md"
            border="1px"
            borderColor={useColorModeValue('gray.200', 'gray.700')}
          >
            <VStack spacing={4}>
              <Avatar size="xl" bg="accent.500" />
              <Text
                color={useColorModeValue('gray.600', 'gray.400')}
                fontSize="lg"
                textAlign="center"
                fontStyle="italic"
                lineHeight="tall"
              >
                "Falio mi je poslovni saradnik za otvoreni razgovor o problemima sa kojima se suočavam u toku dugogodišnjeg rada
                i naišao sam na pažljivo slušanje i poverenje. Izašli su mi u susret i uzeli u obzir sve moje potrebe,
                a AKTIV mi je postao desna ruka. Uvek dostupan sa pažljivo sređenim podacima."
              </Text>
            </VStack>
          </Box>
        </Stack>
      </Container>
    </Box>
  )
}