import { AspectRatio, Box } from '@chakra-ui/react'

const Cover7 = () => {
  return (
    <Box position='relative'>
      <Box
        display={['block', null, 'none']}
        mx={['6', null, '8']}
        borderRadius='xl'
        overflow='hidden'
      >
        <AspectRatio ratio={96 / 80}>
          <img
            src='/images/capa-7.png'
            alt=''
            style={{ objectPosition: 'right center' }}
          />
        </AspectRatio>
      </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'
            left='0'
            right='50%'
            zIndex='1'
            justify='center'
            align='flex-start'
            spacing='2'
            color={['gray.900', null, 'white']}
          >
            <AnimateInView delay={0.2}>
              <Heading
                fontSize={['3xl', null, '5xl', '6xl']}
                color={['gray.900', null, 'white']}
              >
                Janeiro Branco
              </Heading>
            </AnimateInView>
            <AnimateInView delay={0.3}>
              <Text
                fontSize={['2xl', null, '3xl']}
                color={['gray.900', null, 'white']}
                maxW={['lg', null, 'md']}
                fontWeight='bold'
              >
                Saúde mental é importante. Cuide-se!
              </Text>
            </AnimateInView>
            <AnimateInView delay={0.4} pt='4'>
              <Link
                href='https://api.whatsapp.com/send?phone=5591985429031%E2%81%A3'
                target='_blank'
                rel='noopener noreferrer'
                passHref
              >
                <a>
                  <Button colorScheme='green' borderRadius='full' size='lg'>
                    Fazer Agendamento
                  </Button>
                </a>
              </Link>
            </AnimateInView>
          </VStack>
        </Box>
      </Center> */}
      <Box display={['none', null, 'block']}>
        <AspectRatio ratio={192 / 80}>
          <img src='/images/capa-7.png' alt='' />
        </AspectRatio>
      </Box>
    </Box>
  )
}

export default Cover7