text: import React from 'react'
  import Helmet from 'react-helmet'
  import PropTypes from 'prop-types'
  import { graphql } from 'gatsby'
  
  import Layout from '../components/Layout'
  import Content, { HTMLContent } from '../components/Content'
  
  export const ContactPageTemplate = ({ title, content, contentComponent }) => {
    const PageContent = contentComponent || Content
    return (
      <section className="section section--gradient">
        <div className="container">
          <div className="columns">
            <div className="column is-10 is-offset-1">
              <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                {title}
              </h2>
              <PageContent className="content" content={content} />
            </div>
          </div>
        </div>
      </section>
    )
  }
  
  ContactPageTemplate.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.node,
    contentComponent: PropTypes.func,
  }
  
  const ContactPage = ({ data }) => {
    const { markdownRemark: post } = data
    const siteTitle = data.site.siteMetadata.title
  
    return (
      <Layout>
        <Helmet title={`${post.frontmatter.title} | ${siteTitle}`}>
          <meta property="og:title" content={`${post.frontmatter.title}`} />
        </Helmet>
  
        <ContactPageTemplate
          contentComponent={HTMLContent}
          title={post.frontmatter.title}
          content={post.html}
        />
      </Layout>
    )
  }
  
  ContactPage.propTypes = {
    data: PropTypes.object.isRequired,
  }
  
  export default ContactPage
  
  export const contactPageQuery = graphql`
    query ContactPage($id: String!) {
      site {
        siteMetadata {
          title
        }
      }
      markdownRemark(id: { eq: $id }) {
        html
        frontmatter {
          title
        }
      }
    }
  `
  