Footer component for Acres USA

Footer.js

import React from "react"
import Logo from "../images/acres-logo.png"
import { Container, Row, Col } from "react-bootstrap"
import {
  FaFacebookSquare,
  FaTwitter,
  FaInstagram,
  FaYoutube,
  FaLinkedin,
} from "react-icons/fa"
import { Link, graphql, StaticQuery } from "gatsby"

const MENU_QUERY = graphql`
  fragment MenuFields on WPGraphQL_MenuItem {
    id
    url
    label
  }

  query GET_MENU_ITEMS {
    wpgraphql {
      col_1: menuItems(where: { location: FOOTER_COL_1 }) {
        edges {
          node {
            ...MenuFields
          }
        }
      }
      col_2: menuItems(where: { location: FOOTER_COL_2 }) {
        edges {
          node {
            ...MenuFields
          }
        }
      }
      sub_footer: menuItems(where: { location: FOOTER_COL_2 }) {
        edges {
          node {
            ...MenuFields
          }
        }
      }
      generalSettings {
        description
      }
    }
  }
`

const renderMenuItem = menuItem => {
  return (
    <li>
      <Link to={menuItem.node.url}>{menuItem.node.label}</Link>
    </li>
  )
}

const FooterWrapper = () => (
  <StaticQuery
    query={MENU_QUERY}
    render={data => {
      return (
        <footer>
          <Container>
            <Row>
              <Col md={5} className="about">
                <img src={Logo} alt="Acres USA Logo" />
                <p>{data.wpgraphql.generalSettings.description}</p>
                <div className="social-icons">
                  <a href="http://www.facebook.com/AcresUSA">
                    <FaFacebookSquare />
                  </a>
                  <a href="http://www.twitter.com/AcresUSA">
                    <FaTwitter />
                  </a>
                  <a href="https://www.instagram.com/acresusa/">
                    <FaInstagram />
                  </a>
                  <a href="https://www.youtube.com/user/AcresUSAvideos">
                    <FaYoutube />
                  </a>
                  <a href="https://www.linkedin.com/company/acres-u-s-a-/">
                    <FaLinkedin />
                  </a>
                </div>
              </Col>
              <Col xs={1} className="d-none d-md-block"></Col>
              <Col md={2}>
                <h4>About</h4>
                <ul>
                  {data.wpgraphql.col_1.edges.map(menuItem =>
                    renderMenuItem(menuItem)
                  )}
                </ul>
              </Col>
              <Col md={2}>
                <h4>Customer Support</h4>
                <ul>
                  {data.wpgraphql.col_2.edges.map(menuItem =>
                    renderMenuItem(menuItem)
                  )}
                </ul>
              </Col>
              <Col md={2}>
                <h4>Contact Us</h4>
                <ul>
                  <li>
                    Toll-Free (U.S. & Canada):
                    <br />
                    <a href="tel:1-800-355-5313">1-800-355-5313</a>
                  </li>
                  <li>
                    Phone
                    <br />
                    <a href="tel:1-970-392-4464">970-392-4464</a>
                  </li>
                  <li>
                    Email
                    <br />
                    <a href="mailto:[email protected]">[email protected]</a>
                  </li>
                  <li>
                    Mail
                    <br />
                    P.O. Box 1690
                    <br />
                    Greeley, CO 80632
                  </li>
                  <li>
                    Offices
                    <br />
                    <a href="https://goo.gl/maps/QrHfF2B1GHiNnhWa7">
                      501 8th Ave.
                      <br />
                      Greeley, CO 80631
                    </a>
                  </li>
                </ul>
              </Col>
            </Row>
          </Container>

          <div className="footer-sub">
            <p>
              &copy; {new Date().getFullYear()} Swift Communications. All rights
              reserved. | <Link to="/privacy-policy">Privacy Policy</Link> |{" "}
              <Link to="/site-use-terms-conditions">
                Site Use Terms & Conditions
              </Link>
            </p>
          </div>
        </footer>
      )
    }}
  />
)

export default FooterWrapper