import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import { Container, Typography, Grid } from '@material-ui/core';
import Section from '@components/Section';
import speedIcon from './speed.svg';
import responsiveIcon from './responsive.svg';
import securityIcon from './security.svg';
import intuitiveIcon from './intuitive.svg';

function MyPriorities() {
  const classes = useStyles();
  return (
    <Section>
      <Container className={classes.container}>
        <Typography align="center" variant="h2" gutterBottom>
          My priorities
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6} md={3}>
            <img
              className={classes.icon}
              src={responsiveIcon}
              alt="Responsiveness"
            />
            <Typography variant="h4">Responsiveness</Typography>
            <Typography>
              I create websites that look good on all devices.
            </Typography>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <img
              className={classes.icon}
              src={intuitiveIcon}
              alt="Intuitiveness"
            />
            <Typography variant="h4">Intuitiveness</Typography>
            <Typography>An easy-to-use & user-friendly interface.</Typography>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <img className={classes.icon} src={speedIcon} alt="Szybkość" />
            <Typography variant="h4">Performance</Typography>
            <Typography>Fast load times & lag free interaction.</Typography>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <img className={classes.icon} src={securityIcon} alt="Security" />
            <Typography variant="h4">Security</Typography>
            <Typography>
              I use tried-and-tested tools and techniques that help me keep the
              website safe.
            </Typography>
          </Grid>
        </Grid>
      </Container>
    </Section>
  );
}

const useStyles = makeStyles(theme => ({
  icon: {
    width: 128,
    height: 128,
    [theme.breakpoints.down('md')]: {
      width: 96,
      height: 96,
    },
  },
  container: {
    textAlign: 'center',
  },
}));

export default MyPriorities;