'use client'

import {
  Box,
  Container,
  Flex,
  HStack,
  Image,
  Link,
  Button,
  useColorModeValue,
  VStack,
  Stack,
  Heading,
  Text,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from '@chakra-ui/react'
import NextLink from 'next/link'
import Footer from '@/components/Footer'
import Header from '@/components/Header'
import SEO from '@/components/SEO'

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.',
    highlighted: false
  },
  {
    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.',
    highlighted: false
  },
  {
    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.',
    highlighted: true
  },
  {
    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.',
    highlighted: false
  },
  {
    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.',
    highlighted: false
  },
  {
    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.',
    highlighted: false
  }
]

export default function FAQPage() {
  const bgColor = useColorModeValue('white', 'gray.900')
  const accentColor = '#043F51'

  return (
    <>
      <SEO
        title="Često postavljana pitanja - AKTIV Program knjigovodstvo racunovodsvo"
        description="Odgovore na najčešća pitanja pronađite ovde. Ako ne pronađete odgovor, kontaktirajte nas direktno."
      />
      <Header />

      {/* FAQ Content */}
      <Box bg={useColorModeValue('gray.50', 'gray.900')} 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 postavljana{' '}
              <Text as="span" color={accentColor}>
                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}
                bg={faq.highlighted ? useColorModeValue(`${accentColor}15`, `${accentColor}30`) : 'transparent'}
                rounded="xl"
                p={faq.highlighted ? 2 : 0}
              >
                {({ isExpanded }) => (
                  <>
                    <AccordionButton
                      bg={useColorModeValue('white', 'gray.800')}
                      border="2px"
                      borderColor={
                        faq.highlighted ? accentColor :
                        isExpanded ? accentColor :
                        useColorModeValue('gray.200', 'gray.700')
                      }
                      roundedTop="xl"
                      roundedBottom={isExpanded ? 'none' : 'xl'}
                      p={6}
                      _hover={{
                        borderColor: accentColor,
                        bg: useColorModeValue('gray.50', 'gray.750')
                      }}
                      shadow={faq.highlighted ? 'lg' : 'none'}
                    >
                      <Box flex="1" textAlign="left">
                        <Text
                          fontWeight={faq.highlighted ? 700 : 600}
                          fontSize="lg"
                          color={faq.highlighted ? accentColor : useColorModeValue('gray.700', 'white')}
                        >
                          {faq.question}
                        </Text>
                      </Box>
                      <AccordionIcon color={accentColor} />
                    </AccordionButton>
                    <AccordionPanel
                      pb={6}
                      pt={4}
                      px={6}
                      bg={useColorModeValue('white', 'gray.800')}
                      border="2px"
                      borderColor={accentColor}
                      borderTop="none"
                      roundedBottom="xl"
                    >
                      <Text
                        color={useColorModeValue('gray.600', 'gray.300')}
                        lineHeight="tall"
                      >
                        {faq.answer}
                      </Text>
                    </AccordionPanel>
                  </>
                )}
              </AccordionItem>
            ))}
          </Accordion>
        </Container>
      </Box>

      <Footer />
    </>
  )
}