import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";

const memeUrl = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
const repoUrl = "https://gitlab.com/dunemask/Qualiteer";

export default function About() {
  return (
    <div className="about">
      <Container maxWidth="sm">
        <Typography variant="h6" gutterBottom component="div">
          <Box fontWeight="bold" display="inline">
            Why?
          </Box>
        </Typography>
        <Typography variant="body1">
          Qualiteer was designed to solve the issue of "on call". A state of
          being in which QA tests will fail, stiring everyone into a frenzy of
          what is broken in production! 🤯 Qualiteer gives users power to
          resolve and reattempt failing tests, run a particular suite of tests,
          and mute pesky alerts reminding you the navbar's color changed... 🤦‍♂️
        </Typography>
        <br />
        <Typography
          variant="subtitle1"
          style={{ wordWrap: "break-word", whiteSpace: "normal" }}
        >
          <Box fontWeight="bold" display="inline">
            {"Repository: "}
          </Box>
          <Link href={repoUrl}>{repoUrl}</Link>
        </Typography>
        <br />
        <div
          style={{ justifyContent: "center", width: "100%", display: "flex" }}
        >
          <Link href={memeUrl} variant="h6" underline="none">
            Qualiteer
          </Link>
        </div>
      </Container>
    </div>
  );
}
