'use client'

import {
  Box,
  Container,
  Stack,
  Text,
  Flex,
  HStack,
  Link,
  VStack,
  Heading,
} from '@chakra-ui/react'
import { FaFacebook, FaInstagram, FaYoutube } from 'react-icons/fa'

export default function Footer() {
  return (
    <Box bg="#033947" color="white" py={16}>
      <Container maxW="7xl">
        <VStack spacing={12}>
          <Stack
            direction={{ base: 'column', lg: 'row' }}
            spacing={8}
            align={{ base: 'center', lg: 'start' }}
            justify="space-between"
            w="full"
          >
            <VStack spacing={4} align={{ base: 'center', lg: 'start' }}>
              <Heading
                size="lg"
                color="white"
                letterSpacing="wider"
              >
                AKTIV
              </Heading>
              <Text fontSize="lg" textAlign={{ base: 'center', lg: 'left' }} maxW="md">
                Pouzdan partner knjigovodjama i preduzećima.
                Vaš online knjigovodstveni program za efikasno poslovanje.
              </Text>
            </VStack>

            <VStack spacing={3} align={{ base: 'center', lg: 'start' }}>
              <Text fontSize="lg" fontWeight="semibold" color="white">
                Kontaktirajte nas
              </Text>
              <VStack spacing={2} align={{ base: 'center', lg: 'start' }}>
                <Text fontSize="sm" color="gray.300" textAlign={{ base: 'center', lg: 'left' }}>
                  📍 Bulevar Nemanjića 85, TC Zona 2, lokal 85
                </Text>
                <Link
                  href="tel:+381606262844"
                  fontSize="sm"
                  color="gray.300"
                  _hover={{ color: 'whiteAlpha.800' }}
                >
                  📞 +381 60 62 62 844
                </Link>
                <Text fontSize="sm" color="gray.300">
                  📧 info@aktiv.rs
                </Text>
                <Link
                  href="https://www.aktiv.rs"
                  fontSize="sm"
                  color="gray.300"
                  _hover={{ color: 'whiteAlpha.800' }}
                  isExternal
                >
                  🌐 www.aktiv.rs
                </Link>
              </VStack>
            </VStack>

            <VStack spacing={8}>
              <VStack spacing={4}>
                <Text fontSize="lg" fontWeight="semibold" color="white">
                  Pratite nas
                </Text>
                <HStack spacing={4}>
                  <Link href="https://www.facebook.com/aktiv.rs" _hover={{ color: 'whiteAlpha.800' }} isExternal>
                    <FaFacebook size="24px" />
                  </Link>
                  <Link href="https://www.instagram.com/aktiv.rs/" _hover={{ color: 'whiteAlpha.800' }} isExternal>
                    <FaInstagram size="24px" />
                  </Link>
                  <Link href="https://www.youtube.com/@aktiv6845" _hover={{ color: 'whiteAlpha.800' }} isExternal>
                    <FaYoutube size="24px" />
                  </Link>
                </HStack>
              </VStack>

              <VStack spacing={3} align={{ base: 'center', lg: 'start' }}>
                <Text fontSize="lg" fontWeight="semibold" color="white">
                  Tehnička podrška
                </Text>
                <VStack spacing={2} align={{ base: 'center', lg: 'start' }}>
                  <Link
                    href="https://anydesk.com/download"
                    fontSize="sm"
                    _hover={{ color: 'whiteAlpha.800' }}
                    isExternal
                  >
                    AnyDesk download
                  </Link>
                  <Link
                    href="https://www.teamviewer.com/download"
                    fontSize="sm"
                    _hover={{ color: 'whiteAlpha.800' }}
                    isExternal
                  >
                    TeamViewer download
                  </Link>
                  <Link
                    href="mailto:podrska@aktiv.rs"
                    fontSize="sm"
                    _hover={{ color: 'whiteAlpha.800' }}
                  >
                    Email: podrska@aktiv.rs
                  </Link>
                  <Link
                    href="https://moj.aktiv.rs/support/"
                    fontSize="sm"
                    _hover={{ color: 'whiteAlpha.800' }}
                    isExternal
                  >
                    Video i pisana uputstva
                  </Link>
                </VStack>
              </VStack>
            </VStack>
          </Stack>

          <Box w="full" h="1px" bg="whiteAlpha.300" />

          <Flex
            direction={{ base: 'column', md: 'row' }}
            justify="space-between"
            align="center"
            w="full"
            gap={4}
          >
            <Text fontSize="sm" color="gray.400">
              © {new Date().getFullYear()} AKTIV. Sva prava zadržana.
            </Text>
            <HStack spacing={6}>
              <Link href="/#contact" fontSize="sm" _hover={{ color: 'whiteAlpha.800' }}>
                Kontakt
              </Link>
              <Link href="https://cheers.rs" fontSize="sm" _hover={{ color: 'whiteAlpha.800' }} isExternal>
                CheersBar.rs
              </Link>
            </HStack>
          </Flex>
        </VStack>
      </Container>
    </Box>
  )
}