import React from "react";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard";
import logo from "assets/img/logo_transparent_trim.png";
import classNames from "classnames";
import Button from "components/common/Button";
import Footer from "components/common/Footer";
import Header from "components/common/Header";
import Layout from "components/common/Layout";
import Parallax from "components/common/Parallax";
import Upload from "components/common/Upload";
import { Element } from "react-scroll";
import Contact from "./Contact";
import Features from "./Features";
import styles from "./Landing.styles.js";
const useStyles = makeStyles(styles);

export default function Landing(props) {
	const classes = useStyles();

	return (
		<Layout>
			<div id="section-home">
				<Header
					brand={
						<img
							src={logo}
							alt="EDAV"
							width="150"
							height="auto"
						></img>
					}
					fixed
					color="primary"
				/>
				<Parallax id="home-parallax">
					<div className={classes.container}>
						<Grid
							container
							direction="row"
							justify="center"
							alignItems="center"
						>
							<Grid item sm={6} xs={12}>
								<div className={classes.brand}>
									<h1 className={classes.brandTitle}>
										Render EDA Design Files Online
									</h1>
									<h3 className={classes.subtitle}>
										Upload design LEF/DEF files to view in
										your browser.
									</h3>
								</div>
							</Grid>
							<Grid item sm={6} xs={12}>
								<div className={classes.brand}>
									<Upload />
									<div className={classes.exampleDesign}>
										<Button simple href="/example">
											<DeveloperBoardIcon fontSize="large" />{" "}
											Try Example Design
										</Button>
									</div>
								</div>
							</Grid>
						</Grid>
					</div>
				</Parallax>

				<div className={classNames(classes.main, classes.mainRaised)}>
					<Element name="section-features">
						<Features />
					</Element>
					<Element name="section-contact">
						<Contact />
					</Element>
				</div>
				<Footer />
			</div>
		</Layout>
	);
}