text: import React from "react"
  import PropTypes from "prop-types"
  import { graphql } from "gatsby"
  
  import GlobalStateProvider from "../context/provider"
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  import Hero from "../components/sections/hero"
  
  import About from "../components/sections/about"
  import Interests from "../components/sections/interests"
  import Projects from "../components/sections/projects"
  import Contact from "../components/sections/contact"
  import { seoTitleSuffix } from "../../config"
  
  import { ParallaxProvider } from "react-scroll-parallax"
  
  const IndexPage = ({ data }) => {
    const { frontmatter } = data.index.edges[0].node
    const { seoTitle, useSeoTitleSuffix, useSplashScreen } = frontmatter
  
    const globalState = {
      // if useSplashScreen=false, we skip the intro by setting isIntroDone=true
      isIntroDone: useSplashScreen ? false : true,
      // darkMode is initially disabled, a hook inside the Layout component
      // will check the user's preferences and switch to dark mode if needed
      darkMode: false,
    }
  
    return (
      <GlobalStateProvider initialState={globalState}>
        <ParallaxProvider>
          <Layout content={data.navlinks.edges} lang="kor">
            <SEO
              title={
                useSeoTitleSuffix
                  ? `${seoTitle} - ${seoTitleSuffix}`
                  : `${seoTitle}`
              }
            />
            <Hero content={data.hero.edges} />
            {/* Articles is populated via Medium RSS Feed fetch */}
            {/* <Articles /> */}
            <About content={data.about.edges} />
            <Interests content={data.interests.edges} />
            <Projects
              content={data.projects.edges}
              detail={data.projectsdetail.edges}
            />
            <Contact content={data.contact.edges} />
          </Layout>
        </ParallaxProvider>
      </GlobalStateProvider>
    )
  }
  
  IndexPage.propTypes = {
    data: PropTypes.object.isRequired,
  }
  
  export default IndexPage
  
  export const pageQuery = graphql`
    {
      navlinks: allMdx(
        filter: { fileAbsolutePath: { regex: "/index/navlinks/kor/" } }
      ) {
        edges {
          node {
            exports {
              navLinks {
                menu {
                  name
                  url
                }
                button {
                  name
                  url
                }
                lang {
                  name
                  url
                }
              }
            }
          }
        }
      }
      index: allMdx(filter: { fileAbsolutePath: { regex: "/index/index/" } }) {
        edges {
          node {
            frontmatter {
              seoTitle
              useSeoTitleSuffix
              useSplashScreen
            }
          }
        }
      }
      hero: allMdx(filter: { fileAbsolutePath: { regex: "/index/hero/kor/" } }) {
        edges {
          node {
            body
            frontmatter {
              greetings
              title
              subtitlePrefix
              subtitle
              bg {
                childImageSharp {
                  fluid(maxWidth: 320, quality: 90) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
              me {
                childImageSharp {
                  fluid(maxWidth: 160, quality: 90) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
              icon {
                childImageSharp {
                  fluid(maxWidth: 60, quality: 90) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
      about: allMdx(
        filter: { fileAbsolutePath: { regex: "/index/about/kor/" } }
      ) {
        edges {
          node {
            body
            frontmatter {
              title
              image {
                childImageSharp {
                  fluid(maxWidth: 400, quality: 90) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
      interests: allMdx(
        filter: { fileAbsolutePath: { regex: "/index/interests/kor/" } }
      ) {
        edges {
          node {
            exports {
              shownItems
              interests {
                number
                icons {
                  childImageSharp {
                    fixed(width: 35, height: 35, quality: 90) {
                      ...GatsbyImageSharpFixed
                    }
                  }
                }
                title
                description
                descriptionKOR
              }
            }
            frontmatter {
              title
            }
          }
        }
      }
      projects: allMdx(
        filter: {
          fileAbsolutePath: { regex: "/index/projects/kor/" }
          frontmatter: { visible: { eq: true } }
        }
        sort: { fields: [frontmatter___position], order: ASC }
      ) {
        edges {
          node {
            body
            frontmatter {
              title
              category
              emoji
              notion
              external
              github
              screenshot {
                childImageSharp {
                  fluid(maxWidth: 400, quality: 90) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
              tags
              position
              buttonVisible
              buttonUrl
              buttonText
            }
          }
        }
      }
      projectsdetail: allMdx(
        filter: { fileAbsolutePath: { regex: "/index/modal/projects/kor/" } }
        sort: { fields: [frontmatter___position], order: ASC }
      ) {
        edges {
          node {
            body
            frontmatter {
              date
              title
              type
              external
              github
              gif
              front
              back
              deploy
              position
            }
          }
        }
      }
      contact: allMdx(
        filter: { fileAbsolutePath: { regex: "/index/contact/kor/" } }
      ) {
        edges {
          node {
            body
            frontmatter {
              title
              name
              email
              profileImage {
                childImageSharp {
                  fluid(maxWidth: 400, quality: 90) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        }
      }
    }
  `
  