'use client'

import {
  Box,
  Container,
  Heading,
  Text,
  VStack,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  useColorModeValue,
} from '@chakra-ui/react'

const faqs = [
  {
    question: 'Da li je AKTIV program siguran za čuvanje mojih podataka?',
    answer: 'Da, AKTIV koristi napredne sigurnosne protokole uključujući 256-bit SSL enkripciju, automatske backup-ove i monitoring sistema 24/7. Vaši podaci su čuvani u datacentrima koji ispunjavaju najviše sigurnosne standarde.'
  },
  {
    question: 'Mogu li da koristim AKTIV na više lokacija istovremeno?',
    answer: 'Apsolutno! AKTIV je cloud-based rešenje koje omogućava vašem timu da pristupa programu sa bilo koje lokacije. Potreban vam je samo internet i web browser.'
  },
  {
    question: 'Da li nudite podršku i obuku za korišćenje programa?',
    answer: 'Da, nudimo kompletnu podršku putem email-a, telefona i live chat-a. Takođe organizujemo besplatne webinare i imamo detaljnu dokumentaciju sa video tutorijalima.'
  },
  {
    question: 'Kakva je procedura migracije sa drugog programa?',
    answer: 'Naš tim vam pomaže u kompletnoj migraciji podataka iz postojećeg sistema. Proces je automatizovan i obično se završava u roku od 24-48 sati, bez prekida vašeg poslovanja.'
  },
  {
    question: 'Da li mogu da prilagodim program mojim specifičnim potrebama?',
    answer: 'Da, AKTIV nudi prilagođavanje prema vašim potrebama. Možete kreirati prilagođene kategorije, izveštaje i podesiti workflow prema vašoj organizaciji.'
  },
  {
    question: 'Šta se dešava ako otkazujem pretplatu?',
    answer: 'Možete otkazati pretplatu u bilo kom trenutku. Vaši podaci će biti dostupni za preuzimanje 90 dana nakon otkazivanja. Nudimo i 30-dnevnu garanciju povraćaja novca.'
  }
]

export default function FAQ() {
  return (
    <Box id="faq" py={20}>
      <Container maxW="4xl">
        <VStack spacing={8} mb={12} textAlign="center">
          <Heading
            fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}
            fontWeight={700}
            color={useColorModeValue('gray.700', 'white')}
            lineHeight="shorter"
          >
            Često postavljena{' '}
            <Text as="span" color="brand.500">
              pitanja
            </Text>
          </Heading>
          <Text
            fontSize={{ base: 'lg', md: 'xl' }}
            color={useColorModeValue('gray.600', 'gray.400')}
            maxW="2xl"
            lineHeight="tall"
          >
            Odgovore na najčešća pitanja pronađite ovde. Ako ne pronađete odgovor,
            kontaktirajte nas direktno.
          </Text>
        </VStack>

        <Accordion allowToggle>
          {faqs.map((faq, index) => (
            <AccordionItem key={index} border="none" mb={4}>
              <AccordionButton
                bg={useColorModeValue('white', 'gray.800')}
                border="1px"
                borderColor={useColorModeValue('gray.200', 'gray.700')}
                rounded="xl"
                p={6}
                _hover={{
                  borderColor: useColorModeValue('brand.300', 'brand.500'),
                  bg: useColorModeValue('brand.25', 'gray.750')
                }}
                _expanded={{
                  borderColor: 'brand.500',
                  bg: useColorModeValue('brand.50', 'gray.750')
                }}
              >
                <Box flex="1" textAlign="left">
                  <Text
                    fontWeight={600}
                    fontSize="lg"
                    color={useColorModeValue('gray.700', 'white')}
                  >
                    {faq.question}
                  </Text>
                </Box>
                <AccordionIcon color="brand.500" />
              </AccordionButton>
              <AccordionPanel
                pb={6}
                pt={4}
                px={6}
                bg={useColorModeValue('brand.25', 'gray.750')}
                border="1px"
                borderColor="brand.500"
                borderTop="none"
                roundedBottom="xl"
              >
                <Text
                  color={useColorModeValue('gray.600', 'gray.300')}
                  lineHeight="tall"
                >
                  {faq.answer}
                </Text>
              </AccordionPanel>
            </AccordionItem>
          ))}
        </Accordion>
      </Container>
    </Box>
  )
}