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

const EnderecosLaboratorios = () => {
  return (
    <Center px={['4', '8', '12']}>
      <Stack
        direction={['column', null, 'row']}
        spacing='0'
        py='20'
        w='100%'
        maxW='container.xl'
      >
        <VStack align='stretch' p='6' w='100%' spacing='6'>
          <Heading fontSize='4xl'>Unidade Icoaraci</Heading>
          <Box>
            <iframe
              src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.784658011867!2d-48.483864384734794!3d-1.3042468360151485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a4641cf8d9a247%3A0x43e1ce24e7e29!2sLaborat%C3%B3rio%20Nassar!5e0!3m2!1spt-BR!2sbr!4v1623849662704!5m2!1spt-BR!2sbr'
              width='100%'
              height='450'
              style={{ border: '0' }}
              allowFullScreen=''
              loading='lazy'
            ></iframe>
          </Box>
        </VStack>

        <VStack align='stretch' p='6' w='100%' spacing='6'>
          <Heading fontSize='4xl'>Unidade Ananindeua</Heading>
          <Box>
            <iframe
              src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.70917097352!2d-48.4091092553156!3d-1.351033599999993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a461b8f9bbbc4d%3A0x1ef8b79a16748326!2sLaborat%C3%B3rio%20Nassar!5e0!3m2!1spt-BR!2sbr!4v1623849392348!5m2!1spt-BR!2sbr'
              width='100%'
              height='450'
              style={{ border: '0' }}
              allowFullScreen=''
              loading='lazy'
            ></iframe>
          </Box>
        </VStack>
      </Stack>
    </Center>
  )
}

export default EnderecosLaboratorios