import React from "react"
import "./FooterStyles.css"
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'
import Box from '@material-ui/core/Box'
import Link from '@material-ui/core/Link'

export default function Footer ()  { 
    return (
      <footer className="footer">
        <Container maxWidth="xl" >
        <Box 
        px={{ xs:3, sm: 10 }}
        py={{ xs:5, sm: 10 }}
        bgcolor="whitesmoke" 
        color="black">
        <Container maxWidth="xl" >
         <Grid container spacing={5}>
          <Grid item xs={12} sm={4}>
            <Box borderBottom={1}>Sponsor</Box>
            <Box>
              <Link href="https://www.swissuniversities.ch/" color="inherit">Home - swissuniversities</Link>
            </Box>
            <Box>
              <Link href="https://www.swissuniversities.ch/en/topics/digitalisation/p-5-scientific-information" color="inherit">P5 - scientific-information</Link>
            </Box>
          </Grid>
          <Grid item xs={12} sm={4}>
            <Box borderBottom={1}>OACCT Creators</Box>
            <Box>
              <Link href="https://www.epfl.ch/en/" color="inherit">Ecole polytechnique fédérale de Lausanne (EPFL)</Link>
            </Box>
            <Box>
              <Link href="https://www.unige.ch/" color="inherit">Université de Genève</Link>
            </Box>
          </Grid>
          <Grid item xs={12} sm={4}>
            <Box borderBottom={1}>Contact</Box>
            <Box>
             
              <Link href="mailto:publishsupport@epfl.ch?subject=OACCT contact request" color="inherit">contact</Link>
            </Box>
          </Grid>
         </Grid>
         <Box textAlign="center" pt={{xs: 5, sm: 10}} pb={{xs: 5, sm: 0}}>

           Open Access Compliance Check Tool &reg; {new Date().getFullYear()}

         </Box>
      </Container>
      </Box>
      </Container>
      </footer>
    )
  }