import { Button, Container, Grid, Typography } from "@mui/material"
import Image from "next/image"
import MuiNextLink from "./MuiNextLink"

const SectionAbout = () => {
  return (
    <Container component="section" maxWidth="md" sx={{ mb: 15 }}>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <Image
            src="/analysis.svg"
            alt="An image containing plots in front of a screen showing all of the world!"
            layout="responsive"
            width={800}
            height={600}
          />
        </Grid>
        <Grid item xs={12} sm={6} container flexDirection="column" justifyContent="center" alignItems="center">
          <Typography component="h2" variant="h4" textAlign="center" gutterBottom>
            Maintain your Swarm simple and fast!
          </Typography>
          <Typography textAlign="justify" sx={{ mb: 15 }}>
            Create the Swarm of your dream using our platform! Use whatever you want, however you want simple, fast and system agnostic. Now, your application can exist in many different locations through the whole world for free!
          </Typography>
          <MuiNextLink href="/about" underline="none">
            <Button variant="outlined" size="large">
              Learn more about the project here!
            </Button>
          </MuiNextLink>
        </Grid>
      </Grid>
    </Container>
  )
}

export default SectionAbout