import { Box, Button, Center, Heading, Text, VStack } from '@chakra-ui/react'
import AnimateInView from './AnimateInView'
import { Link as ScrollLink } from 'react-scroll'

const BannerFooter = () => {
  return (
    <Box
      position='relative'
      color='white'
      bgImage='/images/banner-footer.jpg'
      bgSize='cover'
      bgPosition='right center'
      py={['12', null, '0']}
    >
      <Box display={['none', null, 'block']}>
        <img src='/images/banner-footer.jpg' alt='' />
      </Box>
      <Center
        position={['initial', null, 'absolute']}
        top='0'
        bottom='0'
        left='0'
        right='0'
        p={['6', '8', '12']}
      >
        <Box
          maxW='container.xl'
          w='100%'
          position={['initial', null, 'relative']}
        >
          <VStack
            position={['initial', null, 'absolute']}
            top='0'
            bottom='0'
            right='0'
            left='50%'
            zIndex='1'
            justify='center'
            align='flex-start'
            spacing='4'
          >
            <AnimateInView delay={0.2}>
              <Heading fontSize={['3xl', '3xl', '4xl']}>
                Acreditamos em um você mais saudável
              </Heading>
            </AnimateInView>
            <AnimateInView delay={0.3}>
              <Text>
                Acreditamos quem devemos manter uma vida mais saudável, nossas
                atitudes atuais terão impactos profunfos em nossa saúde futura.
              </Text>
            </AnimateInView>
            <AnimateInView delay={0.4} pt='4'>
              <ScrollLink to='contatos' smooth={true} key='contatos'>
                <Button colorScheme='blackAlpha' borderRadius='full' size='lg'>
                  Fazer Agendamento
                </Button>
              </ScrollLink>
            </AnimateInView>
          </VStack>
        </Box>
      </Center>
    </Box>
  )
}

export default BannerFooter