import {
  AspectRatio,
  Box,
  Button,
  Center,
  Heading,
  Text,
  VStack,
} from '@chakra-ui/react'
import Link from 'next/link'
import AnimateInView from '../AnimateInView'

const Cover5 = () => {
  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-plano.jpg'
            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, 'gray.900']}
              >
                Está sem
                <br />
                plano de saúde?
              </Heading>
            </AnimateInView>
            <AnimateInView delay={0.3}>
              <Text
                fontSize='lg'
                color={['gray.900', null, 'gray.900']}
                maxW={['lg', null, 'md']}
              >
                Combos especiais para você ficar com a saúde em dia!
              </Text>
            </AnimateInView>
            <AnimateInView delay={0.4}>
              <Text
                fontSize='lg'
                color={['gray.900', null, 'gray.900']}
                maxW={['lg', null, 'md']}
                fontWeight='bold'
              >
                Combo Mulher | Combo Pediátrico | Combo Homem
              </Text>
            </AnimateInView>
            <AnimateInView delay={0.5} 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'>
                    Clique e saiba mais
                  </Button>
                </a>
              </Link>
            </AnimateInView>
          </VStack>
        </Box>
      </Center>
      <Box display={['none', null, 'block']}>
        <AspectRatio ratio={192 / 80}>
          <img src='/images/capa-plano.jpg' alt='' />
        </AspectRatio>
      </Box>
    </Box>
  )
}

export default Cover5