text: import React from 'react';
  import styled from 'styled-components';
  import { StaticQuery, graphql } from 'gatsby';
  import Img from 'gatsby-image';
  
  import { Container } from '@components/global';
  import ExternalLink from '@common/ExternalLink';
  
  const Header = () => (
    <StaticQuery
      query={graphql`
        query {
          art_build: file(
            sourceInstanceName: { eq: "art" }
            name: { eq: "build" }
          ) {
            childImageSharp {
              fluid(maxWidth: 1400) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
          team_work: file(
            sourceInstanceName: { eq: "art" }
            name: { eq: "team_work" }
          ) {
            childImageSharp {
              fluid(maxWidth: 1400) {
                ...GatsbyImageSharpFluid_withWebp_tracedSVG
              }
            }
          }
        }
      `}
      render={data => (
        <HeaderWrapper>
          <Container>
            <Grid>
              <Art>
                <Img fluid={data.team_work.childImageSharp.fluid} />
              </Art>
              <Text>
                <h1>
                  Infosõlm
                  <br />
                </h1>
                <br />
                <p>
                  {/* <StyledExternalLink href="https://github.com/ajayns/gatsby-absurd">
                    Spotify Link &nbsp;&#x2794;
                  </StyledExternalLink> */}
                  <StyledExternalLink href="https://www.facebook.com/infosolm">
                    Podcast, mis harutab välispoliitika sõlmest lahti
                  </StyledExternalLink><br/><br/>
                  <StyledExternalLink href="https://open.spotify.com/show/2f6vHvLgsfk7dePTGafHyN?si=wX0DxX2eTWioGPIlJ8DjRQ">
                    Kuula Spotifys &#8702;      
                  </StyledExternalLink><br/>
                  <StyledExternalLink href="https://podcasts.apple.com/ee/podcast/infos%C3%B5lm/id1537817297">
                    Kuula Apple Podcastis &#8702;
                  </StyledExternalLink>
                </p>
              </Text>
            </Grid>
          </Container>
        </HeaderWrapper>
      )}
    />
  );
  
  const HeaderWrapper = styled.header`
    background-color: ${props => props.theme.color.primary};
    padding-top: 96px;
  
    @media (max-width: ${props => props.theme.screen.md}) {
      padding-top: 128px;
    }
  `;
  
  const Art = styled.figure`
    width: 100%;
    margin: 0;
  
    > div {
      width: 120%;
      margin-bottom: -4.5%;
  
      @media (max-width: ${props => props.theme.screen.md}) {
        width: 100%;
      }
    }
  `;
  
  const Grid = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 64px;
  
    @media (max-width: ${props => props.theme.screen.md}) {
      grid-template-columns: 1fr;
      grid-gap: 80px;
  
      > ${Art} {
        order: 2;
      }
    }
  `;
  
  const Text = styled.div`
    justify-self: center;
  
    @media (max-width: ${props => props.theme.screen.md}) {
      justify-self: start;
    }
  `;
  
  const StyledExternalLink = styled(ExternalLink)`
    color: inherit;
    text-decoration: none;
  
    &:hover {
      color: ${props => props.theme.color.black.regular};
    }
  `;
  
  export default Header;
  