text: import React from 'react'
  import PropTypes from 'prop-types'
  import { graphql } from 'gatsby'
  import Layout from '../components/Layout'
  import Content, { HTMLContent } from '../components/Content'
  import PreviewCompatibleImage from '../components/PreviewCompatibleImage'
  
  export const AboutPageTemplate = ({ title, content, contentComponent, main }) => {
    const PageContent = contentComponent || Content
  
    return (
      <section className="section section--gradient" style={{backgroundColor:`rgb(247, 248, 252)`}}>
        <div className="container">
          <div className="columns">
            <div className="column is-10 is-offset-1">
              <div className="section" style={{padding:`3rem .75rem`}}>
                <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                  {title}
                </h2>
                <PageContent className="content" content={content}/>
                <div className="columns">
                  <div className="column is-5" style={{width:`80%`, minWidth:`305px`}}>
                  <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                  {main.heading}
                </h2>
                    <p style={{fontSize:`1.25rem`, textAlign:`left`}}>{main.description}</p>
                  </div>
                </div>
                <div className="tile is-ancestor">
                  <div className="tile is-vertical">
                    <div className="tile">
                      <div className="tile is-parent is-vertical">
                        <article className="tile is-child">
                          <PreviewCompatibleImage imageInfo={main.image1} />
                        </article>
                      </div>
                      <div className="tile is-parent">
                        <article className="tile is-child">
                          <PreviewCompatibleImage imageInfo={main.image2} />
                        </article>
                      </div>
                    </div>
                    <div className="tile is-parent">
                      <article className="tile is-child">
                        <PreviewCompatibleImage imageInfo={main.image3} />
                      </article>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>
        </div>
      </section>
    )
  }
  
  AboutPageTemplate.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string,
    contentComponent: PropTypes.func,
    main: PropTypes.string,
  }
  
  const AboutPage = ({ data }) => {
    const { markdownRemark: post } = data
  
    return (
      <Layout>
        <AboutPageTemplate
          contentComponent={HTMLContent}
          title={post.frontmatter.title}
          content={post.html}
          main={post.frontmatter.main}
        />
      </Layout>
    )
  }
  
  AboutPage.propTypes = {
    data: PropTypes.object.isRequired,
  }
  
  export default AboutPage
  
  export const aboutPageQuery = graphql`
    query AboutPage($id: String!) {
      markdownRemark(id: { eq: $id }) {
        html
        frontmatter {
          title
          main {
            heading
            description
            image1 {
              alt
              image {
                childImageSharp {
                  fluid(maxWidth: 526, quality: 92) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
            image2 {
              alt
              image {
                childImageSharp {
                  fluid(maxWidth: 526, quality: 92) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
            image3 {
              alt
              image {
                childImageSharp {
                  fluid(maxWidth: 1075, quality: 72) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }   
    }
  }
  `
  