text: import React from 'react'
  import PropTypes from 'prop-types'
  import { graphql } from 'gatsby'
  import Layout from '../components/Layout'
  import Features from '../components/Features'
  
  export const SpeakersPageTemplate = ({
    heading,
    description,
    intro
  }) => (
    <div className="content">
      <section className="section section--gradient">
        <div className="container">
          <div className="section">
            <div className="columns">
              <div className="column is-7 is-offset-1">
                <h3 className="has-text-weight-semibold is-size-2">{heading}</h3>
                <p>{description}</p>
              </div>
            </div>
            <div className="columns">
              <div className="column is-10 is-offset-1">
                <Features gridItems={intro.blurbs} />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
  
  SpeakersPageTemplate.propTypes = {
    title: PropTypes.string,
    heading: PropTypes.string,
    description: PropTypes.string,
    intro: PropTypes.shape({
      blurbs: PropTypes.array,
    }),
    main: PropTypes.shape({
      heading: PropTypes.string,
      description: PropTypes.string,
      image1: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
      image2: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
      image3: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    })
  }
  
  const SpeakersPage = ({ data }) => {
    const { frontmatter } = data.markdownRemark
  
    return (
      <Layout>
        <SpeakersPageTemplate
          title={frontmatter.title}
          heading={frontmatter.heading}
          description={frontmatter.description}
          intro={frontmatter.intro}
        />
      </Layout>
    )
  }
  
  SpeakersPage.propTypes = {
    data: PropTypes.shape({
      markdownRemark: PropTypes.shape({
        frontmatter: PropTypes.object,
      }),
    }),
  }
  
  export default SpeakersPage
  
  export const speakersPageQuery = graphql`
    query SpeakersPage($id: String!) {
      markdownRemark(id: { eq: $id }) {
        frontmatter {
          title
          heading
          description
          intro {
            blurbs {
              image {
                childImageSharp {
                  fluid(maxWidth: 240, quality: 64) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
              text
            }
            heading
            description
          }
        }
      }
    }
  `
  