import { Center, Heading, Stack, Text, VStack } from '@chakra-ui/react'
import AnimateInView from './AnimateInView'

const Institucional2 = () => {
  return (
    <Center px={['4', '8', '12']}>
      <Stack
        direction={['column', null, 'row']}
        maxW='container.xl'
        py='20'
        spacing='6'
      >
        <AnimateInView w='100%' delay={0.1}>
          <VStack
            borderLeftColor='green.500'
            borderLeftStyle='dotted'
            borderLeftWidth='3px'
            p='6'
            align='stretch'
            w='100%'
          >
            <Heading fontSize={['2xl']}>Nossa Missão</Heading>
            <Text>
              Ser uma ferramenta confiável de apoio ao diagnóstico médico,
              oferecendo serviços de qualidade e cumprindo os aspectos legais
              aplicáveis.
            </Text>
          </VStack>
        </AnimateInView>
        <AnimateInView w='100%' delay={0.2}>
          <VStack
            borderLeftColor='green.500'
            borderLeftStyle='dotted'
            borderLeftWidth='3px'
            p='6'
            align='stretch'
            w='100%'
          >
            <Heading fontSize={['2xl']}>Nossos Valores</Heading>
            <Text>
              Ética, transparência, confidencialidade, comprometimento, foco em
              resultados e melhoria continua.
            </Text>
          </VStack>
        </AnimateInView>
      </Stack>
    </Center>
  )
}

export default Institucional2