text: import React from "react";
  import { css } from "@emotion/core";
  import styled from "@emotion/styled";
  import Link from "components/Link";
  import Subscribe from "components/Subscribe";
  import { bpMaxSM } from "@/lib/breakpoints";
  import { useStaticQuery, graphql } from "gatsby";
  
  const Container = styled.footer`
    display: grid;
    justify-content: space-between;
    align-items: start;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: "left content right";
    height: 26rem;
    padding-top: 2rem;
    background: rgb(4, 67, 172);
    background: linear-gradient(
      90deg,
      rgba(4, 67, 172, 1) 0%,
      rgba(39, 87, 182, 1) 53%,
      rgba(52, 100, 204, 1) 100%
    );
    color: white;
    ${bpMaxSM} {
      grid-template-columns: 1fr;
      grid-template-areas: "content";
      padding: 0 1rem;
    }
  `;
  
  const FooterContent = styled.div`
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: "form empty social";
    ${bpMaxSM} {
      grid-template-columns: 1fr;
      grid-tempalte-rows: 120px 1fr;
      grid-template-areas:
        "social"
        "form";
      grid-grap: 2rem;
    }
  `;
  
  const Social = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    grid-area: social;
    ${bpMaxSM} {
      margin-bottom: 1rem;
      margin-top: 1rem;
    }
  `;
  
  const Form = styled.div`
    grid-area: form;
    max-width: 350px;
    ${bpMaxSM} {
      max-width: 100%;
    }
  `;
  
  export const Twitter = ({ color = `rgba(255,255,255,0.7)`, url }) => (
    <Link
      to={url}
      css={css`
        color: ${color};
        margin-left: 20px;
        :hover {
          color: rgba(255, 255, 255, 1);
        }
      `}
      aria-label="Visit my Twitter"
      title="Visit my Twitter"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="20"
        viewBox="0 0 24 20"
      >
        <path
          fill="currentColor"
          fillRule="evenodd"
          d="M24,2.96470588 C23.1,3.40941176 22.2,3.55764706 21.15,3.70588235 C22.2,3.11294118 22.95,2.22352941 23.25,1.03764706 C22.35,1.63058824 21.3,1.92705882 20.1,2.22352941 C19.2,1.33411765 17.85,0.741176471 16.5,0.741176471 C13.95,0.741176471 11.7,2.96470588 11.7,5.63294118 C11.7,6.07764706 11.7,6.37411765 11.85,6.67058824 C7.8,6.52235294 4.05,4.59529412 1.65,1.63058824 C1.2,2.37176471 1.05,3.11294118 1.05,4.15058824 C1.05,5.78117647 1.95,7.26352941 3.3,8.15294118 C2.55,8.15294118 1.8,7.85647059 1.05,7.56 C1.05,7.56 1.05,7.56 1.05,7.56 C1.05,9.93176471 2.7,11.8588235 4.95,12.3035294 C4.5,12.4517647 4.05,12.4517647 3.6,12.4517647 C3.3,12.4517647 3,12.4517647 2.7,12.3035294 C3.3,14.2305882 5.1,15.7129412 7.35,15.7129412 C5.7,17.0470588 3.6,17.7882353 1.2,17.7882353 C0.75,17.7882353 0.45,17.7882353 0,17.7882353 C2.25,19.1223529 4.8,20.0117647 7.5,20.0117647 C16.5,20.0117647 21.45,12.6 21.45,6.22588235 C21.45,6.07764706 21.45,5.78117647 21.45,5.63294118 C22.5,4.89176471 23.4,4.00235294 24,2.96470588 Z"
        />
      </svg>
    </Link>
  );
  
  export const LinkedIn = ({ color = `rgba(255,255,255,0.7)`, url }) => (
    <Link
      to={url}
      css={css`
        margin-left: 20px;
        color: ${color};
        :hover {
          color: rgba(255, 255, 255, 1);
        }
      `}
      aria-label="Visit my LinkedIn"
      title="Visit my LinkedIn"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="23"
        height="23"
        viewBox="0 0 23 23"
      >
        <path
          fill="currentColor"
          d="M21.6,0 L0.988235294,0 C0.423529412,0 0,0.418546713 0,0.976608997 L0,21.4853979 C0,21.9039446 0.423529412,22.3224913 0.988235294,22.3224913 L21.7411765,22.3224913 C22.3058824,22.3224913 22.7294118,21.9039446 22.7294118,21.3458824 L22.7294118,0.976608997 C22.5882353,0.418546713 22.1647059,0 21.6,0 Z M6.63529412,18.9741176 L3.38823529,18.9741176 L3.38823529,8.37093426 L6.77647059,8.37093426 L6.77647059,18.9741176 L6.63529412,18.9741176 Z M5.08235294,6.97577855 C3.95294118,6.97577855 3.10588235,5.99916955 3.10588235,5.02256055 C3.10588235,3.90643599 3.95294118,3.06934256 5.08235294,3.06934256 C6.21176471,3.06934256 7.05882353,3.90643599 7.05882353,5.02256055 C6.91764706,5.99916955 6.07058824,6.97577855 5.08235294,6.97577855 Z M19.2,18.9741176 L15.8117647,18.9741176 L15.8117647,13.8120415 C15.8117647,12.5564014 15.8117647,11.0217301 14.1176471,11.0217301 C12.4235294,11.0217301 12.1411765,12.4168858 12.1411765,13.8120415 L12.1411765,19.1136332 L8.75294118,19.1136332 L8.75294118,8.37093426 L12,8.37093426 L12,9.76608997 C12.4235294,8.92899654 13.5529412,8.09190311 15.1058824,8.09190311 C18.4941176,8.09190311 19.0588235,10.3241522 19.0588235,13.1144637 L19.0588235,18.9741176 L19.2,18.9741176 Z"
        />
      </svg>
    </Link>
  );
  
  export const GitHub = ({ color = `rgba(255,255,255,0.7)`, url }) => (
    <Link
      to={url}
      css={css`
        margin-left: 20px;
        color: ${color};
        :hover {
          color: rgba(255, 255, 255, 1);
        }
      `}
      aria-label="Visit my GitHub"
      title="Visit my GitHub"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="23"
        height="23"
        viewBox="0 0 23 23"
      >
        <path
          fill="currentColor"
          fillRule="evenodd"
          d="M11.2941176,0.279031142 C5.08235294,0.279031142 0,5.3015917 0,11.4402768 C0,16.3233218 3.24705882,20.5087889 7.76470588,22.0434602 C8.32941176,22.1829758 8.47058824,21.7644291 8.47058824,21.4853979 C8.47058824,21.2063668 8.47058824,20.5087889 8.47058824,19.5321799 C5.36470588,20.2297578 4.65882353,18.1370242 4.65882353,18.1370242 C4.09411765,16.8813841 3.38823529,16.4628374 3.38823529,16.4628374 C2.4,15.7652595 3.52941176,15.7652595 3.52941176,15.7652595 C4.65882353,15.9047751 5.22352941,16.8813841 5.22352941,16.8813841 C6.21176471,18.6950865 7.90588235,18.1370242 8.47058824,17.8579931 C8.61176471,17.1604152 8.89411765,16.6023529 9.17647059,16.3233218 C6.63529412,16.0442907 4.09411765,15.0676817 4.09411765,10.742699 C4.09411765,9.48705882 4.51764706,8.51044983 5.22352941,7.81287197 C5.08235294,7.53384083 4.65882353,6.41771626 5.36470588,4.88304498 C5.36470588,4.88304498 6.35294118,4.60401384 8.47058824,5.99916955 C9.31764706,5.72013841 10.3058824,5.58062284 11.2941176,5.58062284 C12.2823529,5.58062284 13.2705882,5.72013841 14.1176471,5.99916955 C16.2352941,4.60401384 17.2235294,4.88304498 17.2235294,4.88304498 C17.7882353,6.41771626 17.5058824,7.53384083 17.3647059,7.81287197 C18.0705882,8.6499654 18.4941176,9.62657439 18.4941176,10.742699 C18.4941176,15.0676817 15.8117647,15.9047751 13.2705882,16.1838062 C13.6941176,16.7418685 14.1176471,17.4394464 14.1176471,18.4160554 C14.1176471,19.9507266 14.1176471,21.0668512 14.1176471,21.4853979 C14.1176471,21.7644291 14.2588235,22.1829758 14.9647059,22.0434602 C19.4823529,20.5087889 22.7294118,16.3233218 22.7294118,11.4402768 C22.5882353,5.3015917 17.5058824,0.279031142 11.2941176,0.279031142 Z"
        />
      </svg>
    </Link>
  );
  
  const Footer = () => {
    const {
      site: {
        siteMetadata: { twitter, linkedin, github },
      },
    } = useStaticQuery(graphql`
      {
        site {
          siteMetadata {
            twitter
            github
            linkedin
          }
        }
      }
    `);
    return (
      <Container>
        <FooterContent>
          <Form>
            <Subscribe />
          </Form>
          <Social>
            <Twitter url={twitter} />
            <GitHub url={github} />
            <LinkedIn url={linkedin} />
            <Link
              to="https://dev.to/matiasfha"
              css={css`
                margin-left: 20px;
                color: rgba(255, 255, 255, 0.7);
                :hover {
                  color: rgba(255, 255, 255, 1);
                }
              `}
              aria-label="Visit my GitHub"
              title="Visit my GitHub"
            >
              <img
                src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg"
                alt="Matías Hernández Arellano's DEV Profile"
                height="30"
                width="30"
              />
            </Link>
          </Social>
        </FooterContent>
      </Container>
    );
  };
  
  export default Footer;
  