import React from 'react'
import { Col, Container, Grid, Row, Text, Card, Input, Textarea , Button, Spacer } from '@nextui-org/react'
import {BiMap, BiPhone, BiMailSend} from 'react-icons/bi'
import HomeLayout from '../../Layouts/HomeLayout'

const Contact = () => {
  return (
    <>
    <Container css={{ width: '800px' }} >
        <Spacer y={3} />
        <Text color='white' h1 css={{ textAlign: 'center' }} > Get In Touch </Text>
        <Spacer y={1} />
        <Grid.Container gap={2} >
            <Grid md={4} sm={4} >
                <Row>
                    <BiMap  color='#667f7e' fontSize={40} style={{ padding: '0 5px' }} />
                    <Col css={{ textAlign: 'left', borderLeft: '1px solid #fff', p: '0 10px' }}>
                        <Text color='#667f7e' b size={14} css={{ display: 'block' }}> Address </Text>
                        <Text color='white' size={15} b> 1901 Thornridge Cir. Shiloh, Hawaii 81063 </Text>
                    </Col>
                </Row>
            </Grid>
            <Grid md={4} sm={4} >
                <Row>
                    <BiPhone color='#667f7e' fontSize={40} style={{ padding: '0 5px' }} />
                    <Col css={{ textAlign: 'left', borderLeft: '1px solid #fff', p: '0 10px' }}>
                        <Text color='#667f7e' b size={14} css={{ display: 'block' }}> Phone </Text>
                        <Text color='white' size={15} b> +33 7 00 55 57 60 </Text>
                    </Col>
                </Row>
            </Grid>
            <Grid md={4} sm={4} >
                <Row>
                    <BiMailSend  color='#667f7e' fontSize={40} style={{ padding: '0 5px' }} />
                    <Col css={{ textAlign: 'left', borderLeft: '1px solid #fff', p: '0 10px' }}>
                        <Text color='#667f7e' b size={14} css={{ display: 'block' }}> Email </Text>
                        <Text color='white' size={15} b> risebot@support.com </Text>
                    </Col>
                </Row>
            </Grid>
        </Grid.Container>
        <Spacer y={1} />
        <Card css={{ $$cardColor: '#1e2835', p: '1rem', borderColor: '#FFFFFF14' }} variant='bordered' >
            <Card.Header css={{ borderBottom:'1px solid #fff' }} >
                <Text color='white' size={22}  b> Leave A Message </Text>
            </Card.Header>
            <Card.Body css={{ p: '5rem 5rem 2rem 5rem' }}>
                <div style={{ borderBottom: '1px solid #fff', paddingBottom: '5px' }}>
                <Text color='white' size={20} css={{ display: 'block' }}  b> Your Details </Text>
                <Text color='white' size={16} css={{ display: 'block' }} b> Let us know how to get back to you.</Text>
                </div>
                <Spacer y={1} />
                <Grid.Container css={{ p: '0' }} gap={2} >
                    <Grid md={6} css={{ color: '#fff', flexDirection: 'column' }}>
                        <label> First Name * </label>
                        <Input clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        <label style={{ fontSize: '12px' }} > Enter your first name here </label>
                    </Grid>
                    <Grid md={6} css={{ color: '#fff', flexDirection: 'column' }}>
                        <label> Last Name * </label>
                        <Input clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        <label style={{ fontSize: '12px' }} > Enter your last name here </label>
                    </Grid>
                    <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                        <label> Email Address * </label>
                        <Input clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        <label style={{ fontSize: '12px' }} > Example: user@website.com </label>
                    </Grid>
                </Grid.Container>
                <Spacer y={2} />
                <div style={{ borderBottom: '1px solid #fff', paddingBottom: '5px' }}>
                <Text color='white' size={20} css={{ display: 'block' }}  b> How Can We Help? </Text>
                <Text color='white' size={16} css={{ display: 'block' }} b> Feel free to ask a question or simply leave a comment </Text>
                </div>
                <Spacer y={1} />
                <Grid.Container css={{ p: '0' }} gap={2} >
                    <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                        <label> Subject * </label>
                        <Input clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        <label style={{ fontSize: '12px' }} > How can we help you? </label>
                    </Grid>
                    <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                        <label> Comments / Questions * </label>
                        <Textarea borderWeight='0' bordered required css={{ background: '#fff', borderRadius: '0' }} rows='5' fullWidth />
                    </Grid>
                </Grid.Container>
                <Spacer y={2} />
                <Button shadow size='lg' auto css={{ m: 'auto', textAlign: 'center' }}> SEND MESSAGE </Button>
            </Card.Body>
        </Card>
    </Container>
    <Spacer y={5} />
    </>
  )
}

Contact.layout = page => <HomeLayout children={page} title="Contact" />

export default Contact