import React from 'react'
import { Box, TextField, Typography, FormControl, Button, Grid } from '@mui/material'
import Image from 'next/image'

const styles = {
    box: {
        backgroundColor: 'var(--purewhite)',
        color: 'var(--black-1)',
        borderRadius: '12px',
        padding: '44px 48px',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-start'
    },
    image: {
        maxWidth: '33.33333%',
        borderRadius: '12px',
        marginRight: '80px'
    }
}

const image: string = '/large.png'

const Contact = () => {
  return (
    <div className="section dark">
        <Box sx={styles.box}>
            <img src={image} alt='large Squash logo' style={styles.image} />
            <FormControl sx={{width: '100%'}}>
                <Typography variant='h5' sx={{marginBottom:'50px'}}>Make lemonade!</Typography>
                <Grid container spacing={2} sx={{marginBottom: '50px'}}>
                    <Grid item xs={6}>
                        <TextField placeholder='Name' variant='standard'/>
                    </Grid>
                    <Grid item xs={6}>
                        <TextField placeholder='Email' variant='standard'/>
                    </Grid>
                </Grid>
                <TextField placeholder='Project description' variant='standard' sx={{marginBottom: '50px'}}/>
                <Button variant='contained' sx={{maxWidth:'120px'}}>Submit</Button>
            </FormControl>
        </Box>
    </div>
  )
}

export default Contact