import { Box, Flex, Heading, Text } from '@chakra-ui/react'
import ReactMarkdown from 'react-markdown'

import Form from '../components/Form'
import SEO from '../components/SEO'

const Contact: React.FC = () => {
  return (
    <>
      <SEO title="Contact" />
      <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
        <Flex wrap="wrap">
          <Box w={['100%', '100%', '50%']} pr="3rem">
            <Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
              ¡Trabajemos juntes!
            </Heading>
          </Box>
          <Box
            w={['100%', '100%', '50%']}
            pt={['2rem', '2rem', '6rem']}
            px={['1rem', '1rem', '2rem']}
          >
            <Text
              as={ReactMarkdown}
              fontWeight="300"
              lineHeight="1.9"
              pb="2rem"
              sx={{ p: { display: 'block', pb: '2rem' } }}
            >
              Mandanos un mensaje y encaremos ese proyecto que tenés en mente :D
            </Text>
            <Form />
          </Box>
        </Flex>
      </Box>
    </>
  )
}

export default Contact

export async function getStaticProps() {
  return { props: {} }
}
