text: /**
   * Layout component that queries for data
   * with Gatsby's StaticQuery component
   *
   * See: https://www.gatsbyjs.org/docs/static-query/
   */
  import React from "react"
  import PropTypes from "prop-types"
  import {StaticQuery, graphql, Link} from "gatsby"
  
  import Header from "./header"
  import "../../static/styles/main.scss"
  import logo from "../../static/images/logo_.svg"
  import iconInstagram from "../../static/images/icon-instagram.svg"
  import iconFacebook from "../../static/images/icon-facebook.svg"
  
  const Layout = ({children}) => (
      <StaticQuery query={graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `} render={data => (
          <>
              <Header siteTitle={data.site.siteMetadata.title}/>
              <main>{children}</main>
              <footer>
                  <div className={"container"}>
                      <div className={"row"}>
                          <div className={"col-5"}>
                              <div className={"widget__item"}>
                                  <div className={"logo"}>
                                      <Link to="/" title={"HiStaff"}>
                                          <img alt={"Logo"} src={logo}/>
                                      </Link>
                                  </div>
  
                                  <div className={"about"}>
                                      <p>문다는 사용자의 성향 분석을 통해 최적화된 지역기반 문화센터 강좌를 추천해주는 모바일 플랫폼 입니다.</p>
                                  </div>
                              </div>
                          </div>
  
                          <div className={"col-2"}>
                              {/* <div className={"widget__item"}>
                                  <ul className={"links"}>
                                      <h4>HiStaff</h4>
                                      <ul>
                                          <li><Link to="/integrations/slack" title={"Integrations"}>Integrations</Link></li>
                                          <li><Link to="/about" title={"About Us"}>About</Link></li>
                                          <li><a href={"https://histaff.io/blog"}>Blog</a></li>
                                          <li><a className={"links__special"} href={"https://feedback.histaff.io/"} target={"_blank"} title={"We look forward to receiving your great feedback"}>Feedback</a></li>
                                      </ul>
                                  </ul>
                              </div> */}
                          </div>
  
                          <div className={"col-2"}>
                              {/* <div className={"widget__item"}>
                                  <div className={"links"}>
                                      <h4>Support</h4>
                                      <ul>
                                          <li><Link to="/contact" title={"Contact Us"}>Contact</Link></li>
                                          <li><Link to="/privacy" title={"Privacy Policy"}>Privacy</Link></li>
                                          <li><Link to="/terms" title={"Terms Of Use"}>Terms Of Use</Link></li>
                                      </ul>
                                  </div>
                              </div> */}
                          </div>
  
                          <div className={"col-3"}>
                              <div className={"widget__item"}>
                                  <div className={"social"}>
                                      <a href="https://www.instagram.com/official_moonda/" target={"_blank"} title={"Instagram"}><img class={"icon"} src={iconInstagram}/></a>
                                      <a href="https://m.facebook.com/official.moonda/" target={"_blank"} title={"Facebook"}><img class={"icon"} src={iconFacebook}/></a>
                                  </div>
                              </div>
                          </div>
                      </div>
  
                      <div className={"copyright"}>
                          <p>Copyright {new Date().getFullYear()}, {` `} <a href="https://www.moonda.kr" title={"Moonda"}>Moonda</a>. All rights reserved.</p>
                      </div>
                  </div>
              </footer>
          </>
      )}/>
  )
  
  Layout.propTypes = {
      children: PropTypes.node.isRequired,
  }
  
  export default Layout
  