import React from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import aboutImage from './about.png';
import connor from './me.jpg';
import avatar from './avatar.jpg';
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import SearchIcon from '@material-ui/icons/Search';
import { makeStyles } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import Avatar from '@material-ui/core/Avatar';

import FooterComponent from "./FooterComponent";
const google = window.google = window.google ? window.google : {}

class About extends React.Component {


    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <div id="landing">
                    <Grid container spacing={3}>
                        <Grid item xs={6} id="landingTextHolder">
                            <div id="landingText">
                                <h3>About the Team</h3>
                                <p>Brief descriptions of our incredible team.</p>
                            </div>
                        </Grid>
                        <Grid item xs={6}>
                            <div id="landingImageAbout"><img src={aboutImage} alt="landingImage"/></div>
                        </Grid>
                    </Grid>
                </div>
                <div id = "aboutSection">
                    <Grid container spacing={4} className={"siteAuthor"}>
                        <Grid item xs={3} id="">
                        </Grid>
                        <Grid item xs={2} id="">
                            <Avatar className={"avatar"} alt="Connor" src={connor} />
                        </Grid>
                        <Grid item xs={4} id="">
                            <h3 className={"name"}>Connor</h3>
                            <p>Connor is from Helena, MT currently studying Computer Science at Montana State University. </p>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                    <Grid container spacing={4} className={"siteAuthor"}>
                        <Grid item xs={3} id="">
                        </Grid>
                        <Grid item xs={2} id="">
                            <Avatar className={"avatar"} alt="Manuel" src={avatar} />
                        </Grid>
                        <Grid item xs={4} id="">
                            <h3 className={"name"}>Manuel</h3>
                            <p>Manuel is studying abroad for the semester at Montana State University, originally from Puebla, MX. </p>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                    <Grid container spacing={4} className={"siteAuthor"}>
                        <Grid item xs={3} id="">
                        </Grid>
                        <Grid item xs={2} id="">
                            <Avatar className={"avatar"} alt="Chris" src={avatar} />
                        </Grid>
                        <Grid item xs={4} id="">
                            <h3 className={"name"}>Chris</h3>
                            <p>Chris is a senior studying Computer Science at Montana State University, originally from Truckee, CA.</p>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                    <Grid container spacing={4} className={"siteAuthor"}>
                        <Grid item xs={3} id="">
                        </Grid>
                        <Grid item xs={2} id="">
                            <Avatar className={"avatar"} alt="Jacob" src={avatar} />
                        </Grid>
                        <Grid item xs={4} id="">
                            <h3 className={"name"}>Jacob</h3>
                            <p>Jacob is currently studying Computer Science at Montana State University. He also has a degree in Chemical Engineering.</p>
                        </Grid>
                        <Grid item xs={3}>
                        </Grid>
                    </Grid>
                </div>
                <FooterComponent/>
            </div>
        );
    }
}

export default About;