import React from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import Head from 'next/head';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import withRoot from 'docs/src/modules/components/withRoot';
import HomeSteps from 'docs/src/modules/components/HomeSteps';
import HomeBackers from 'docs/src/modules/components/HomeBackers';
import HomeFooter from 'docs/src/modules/components/HomeFooter';
import Link from 'docs/src/modules/components/Link';

const styles = theme => ({
  root: {
    flex: '1 0 100%',
  },
  hero: {
    minHeight: '80vh',
    flex: '0 0 auto',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.type === 'light' ? theme.palette.primary.dark : theme.palette.primary.main,
  },
  text: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    letterSpacing: '.7rem',
    textIndent: '.7rem',
    fontWeight: theme.typography.fontWeightLight,
    [theme.breakpoints.only('xs')]: {
      fontSize: 28,
    },
    whiteSpace: 'nowrap',
  },
  headline: {
    paddingLeft: theme.spacing.unit * 4,
    paddingRight: theme.spacing.unit * 4,
    marginTop: theme.spacing.unit,
    maxWidth: 500,
    textAlign: 'center',
  },
  content: {
    paddingBottom: theme.spacing.unit * 8,
    paddingTop: theme.spacing.unit * 8,
    [theme.breakpoints.up('sm')]: {
      paddingTop: theme.spacing.unit * 12,
    },
  },
  button: {
    marginTop: theme.spacing.unit * 3,
  },
  logo: {
    margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 4}px`,
    width: '100%',
    height: '35vw',
    maxHeight: 200,
  },
  steps: {
    maxWidth: theme.spacing.unit * 130,
    margin: 'auto',
  },
  step: {
    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
  },
  stepIcon: {
    marginBottom: theme.spacing.unit,
  },
  markdownElement: {},
});

class HomePage extends React.Component {
  componentDidMount() {
    if (window.location.hash !== '') {
      window.location.replace(`https://v0.material-ui.com/${window.location.hash}`);
    }
  }

  render() {
    const classes = this.props.classes;

    return (
      <div className={classes.root}>
        <Head>
          <title>Material-UI</title>
        </Head>
        <div className={classes.hero}>
          <div className={classes.content}>
            <img
              src="/static/images/material-ui-logo.svg"
              alt="Material-UI Logo"
              className={classes.logo}
            />
            <div className={classes.text}>
              <Typography
                variant="display2"
                align="center"
                component="h1"
                color="inherit"
                gutterBottom
                className={classes.title}
              >
                {'MATERIAL-UI'}
              </Typography>
              <Typography
                variant="headline"
                component="h2"
                color="inherit"
                gutterBottom
                className={classes.headline}
              >
                {"React components that implement Google's Material Design."}
              </Typography>
              <Button
                component={buttonProps => (
                  <Link
                    variant="button"
                    prefetch
                    href="/getting-started/installation"
                    {...buttonProps}
                  />
                )}
                className={classes.button}
                variant="outlined"
                color="primary"
              >
                {'Get Started'}
              </Button>
            </div>
          </div>
        </div>
        <HomeSteps />
        <HomeBackers />
        <HomeFooter />
      </div>
    );
  }
}

HomePage.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default compose(
  withRoot,
  withStyles(styles),
)(HomePage);

@@ -2399,24 +2399,465 @@
 sses.root%7D%3E%0A
+        %3Cscript%0A          type=%22application/ld+json%22%0A          // eslint-disable-next-line react/no-danger%0A          dangerouslySetInnerHTML=%7B%7B%0A            __html: %60%0A%7B%0A  %22@context%22: %22http://schema.org%22,%0A  %22@type%22: %22Organization%22,%0A  %22name%22: %22Material-UI%22,%0A  %22url%22: %22https://material-ui.com%22,%0A  %22logo%22: %22https://material-ui.com/static/brand.png%22,%0A  %22sameAs%22: %5B%0A    %22https://twitter.com/materialUI%22%0A  %5D%0A%7D%0A            %60,%0A          %7D%7D%0A        /%3E%0A
         %3CHea

Add structured data (#11798)