import { h, render, Component } from "preact";
import {
  Container,
  Card,
  CardActions,
  CardContent,
  Typography,
  Button,
} from "@material-ui/core";
import CV from "../static/cv.pdf";
import PortfolioVideo from "../static/video/Portfolio.mp4";

class Greeting extends Component {
  render() {
    return (
      <div>
        <video
          autoPlay
          muted
          loop
          style={{
            position: "absolute",
            width: "100%",
            left: "50%",
            right: "50%",
            top: "50%",
            height: "100%",
            objectFit: "cover",
            transform: "translate(-50%,-50%)",
            zIndex: "-1",
          }}
          //width="100%"
          //height="315"
        >
          <source src={PortfolioVideo} type="video/mp4" />
        </video>
        <Container maxWidth="sm">
          <p />
          <Card>
            <CardContent>
              <Typography variant="h1">Welcome</Typography>
              <Typography variant="body1">
                Hi, My name is Warwick and I'm a Fullstack Web Developer with an
                academeic background in Computing for Games and
                Entrepreneurship.
              </Typography>
              <Typography variant="subtitle1">Availability</Typography>
              <Typography variant="body2">
                I'm currently looking for work if you think my skills may be
                relevant to you. My CV and previous projects can be found below.
              </Typography>
            </CardContent>
            <CardActions>
              <Button href={CV} color="secondary">
                My Corriculum Vitae
              </Button>
            </CardActions>
          </Card>
        </Container>
      </div>
    );
  }
}

export default Greeting;
