text: /* eslint no-unused-expressions:0 */
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import { StaticQuery, graphql, Link } from 'gatsby';
  import styled, { ThemeProvider, injectGlobal } from 'styled-components';
  import { SEO } from 'components';
  import theme from '../../config/Theme';
  import { media } from '../utils/media';
  
  injectGlobal`
    ::selection {
      color: ${theme.colors.bg};
      background: ${theme.colors.primary};
    }
    body {
      background: ${theme.colors.bg};
      color: ${theme.default};
      @media ${media.phone} {
        font-size: 14px;
      }
    }
    a {
      color: ${theme.colors.grey.dark};
      text-decoration: none;
      transition: all ${theme.transitions.normal};
    }
    a:hover {
      color: ${theme.colors.primary};
    }
    h1, h2, h3, h4 {
      color: ${theme.colors.grey.dark};
    }
    blockquote {
      font-style: italic;
      position: relative;
    }
  
    blockquote:before {
      content: "";
      position: absolute;
      background: ${theme.colors.primary};
      height: 100%;
      width: 6px;
      margin-left: -1.6rem;
    }
    label {
      margin-bottom: .5rem;
      color: ${theme.colors.grey.dark};
    }
    input, textarea {
      border-radius: .5rem;
      border: none;
      background: rgba(0, 0, 0, 0.05);
      padding: .25rem 1rem;
      &:focus {
        outline: none;
      }
    }
  `;
  
  const Footer = styled.footer`
    text-align: center;
    padding: 3rem 0;
    .by {
      font-size: .9rem;
    }
    .right {
      font-size: .7rem;
    }
  `;
  
  const Layout = ({ children }) => (
    <StaticQuery
      query={graphql`
        query LayoutQuery {
          site {
            buildTime(formatString: "DD.MM.YYYY")
          }
        }
      `}
      render={data => (
        <ThemeProvider theme={theme}>
          <React.Fragment>
            <SEO />
            {children}
            <Footer>
              <span className="by">&copy; {new Date().getFullYear()} by <Link to="/contact">Warren McQuinn</Link></span>
              <br />
              <span className="right">All rights reserved.</span>
              {/* <span>Last build: {data.site.buildTime}</span> */}
            </Footer>
          </React.Fragment>
        </ThemeProvider>
      )}
    />
  );
  
  export default Layout;
  
  Layout.propTypes = {
    children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).isRequired,
  };
  