text: /** @jsx jsx */
  import React from "react"
  import {jsx, Image, Flex} from "theme-ui"
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  import MemeFetchService from "../services/meme-fetch-service"
  
  class NotFoundPage extends React.Component {
  
    constructor() {
      super()
      this.state = {
        memeURL: ""
      }
      this.getProgrammerMeme()
    }
  
    getProgrammerMeme = () => {
      const memeFetchService = new MemeFetchService()
      memeFetchService
      .memefetch()
      .then(response => {
        const memeURL = response.data.memes[0]["url"]
        this.setState({memeURL})
      })
      .catch(error => {
        console.log('Err!', error)
      })
    }
  
  render() {
    const {memeURL} = this.state
    return (
    <Layout>
      <meta http-equiv="refresh" content="10;url=/" />
      <SEO title="404: Not found" />
      <Flex
      sx={{
        justifyContent:"center",
        alignItems:"center",
        flexDirection: "column",
      }}>
      <h1 sx={{
              fontFamily: "body",
              fontSize: ["1.3rem", "1.5rem", "2rem", "2rem", "2.5rem"],
              color: "white",
              textAlign: "center",
              letterSpacing: "0.05em",
            }}>404: You got lost in Mesopotamia</h1>
      <p
      sx={{
        fontFamily: "body",
        color: "white",
        textAlign: "center",
        width: "60%",
        fontSize: ["0.8rem", "1.2rem", "1.5rem", "1.5rem", "1.8rem"],
        lineHeight: "1.5",
      }}
      >
        Here's a programmer meme to cheer you up while we get you back to Ziggurat!</p>
      <Image sx={{
        width: ["80%", "60%", "40%", "45%", "40%", "25%"]
        }} src={memeURL}></Image>
      </Flex>
    </Layout>
  )
    }
  }
  
  export default NotFoundPage
  