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

const Cover2 = () => {
  return (
    <Box position='relative'>
      <Box
        display={['block', null, 'none']}
        mx='8'
        borderRadius='xl'
        overflow='hidden'
      >
        <AspectRatio ratio={96 / 80}>
          <img
            src='/images/capa-1.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='4'
          >
            <AnimateInView delay={0.2}>
              <Heading fontSize={['3xl', null, '4xl', '5xl']}>
                Aqui tem experiência e qualidade
              </Heading>
            </AnimateInView>
            <AnimateInView delay={0.3}>
              <Text>
                Estamos há 20 anos no mercado, assumindo o compromisso de ajudar
                as pessoas em todos os momentos da vida, trazendo diversas
                especialidades médicas com preços acessíveis.
              </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-1.jpg' alt='' />
        </AspectRatio>
      </Box>
    </Box>
  )
}

export default Cover2