import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"

import Seo from "@/components/seo"
import { Layout } from "@/components"
import JoinUsFeatures from "@/components/join-us/join-us-features"
import { THE_QUALITIES_WE_NEED, WHY_CHOOSE_US } from "@/constants/join-us"
import JoinUsBanner from "@/components/join-us/join-us-banner"
import JoinUsSwiper from "@/components/join-us/join-us-swiper"
import FounderAndStaffStory from "@/components/join-us/founder-and-staff-story"
import ViewPositions from "@/components/join-us/view-positions"
import ViewMoreJobs from "@/components/join-us/view-more-jobs"
import t from "@/constants/wording"

const JoinUsPage: React.FC = () => {
  const data = useStaticQuery<JoinUsQuery>(graphql`
    query StrapiJoinUsQuery {
      strapiJoinUs {
        banner {
          media {
            url
          }
        }
        founderStory {
          body
          image {
            alt
            media {
              url
            }
          }
          id
          title
        }
        lifeAtPingCAP {
          description
          id
          image {
            media {
              url
            }
          }
          title
        }
        staffStory {
          body
          image {
            alt
            media {
              url
            }
          }
          title
        }
      }
    }
  `)

  const { banner, lifeAtPingCAP, founderStory, staffStory } = data.strapiJoinUs

  return (
    <Layout>
      <Seo
        title={t("Join Us")}
        description={t("PingCAP is a young, open and free team")}
        keywords={t("keywords")}
      />
      <JoinUsBanner image={banner} />
      <JoinUsFeatures {...WHY_CHOOSE_US} />
      <JoinUsSwiper data={lifeAtPingCAP} />
      <FounderAndStaffStory
        founderStory={founderStory}
        staffStory={staffStory}
      />
      <JoinUsFeatures {...THE_QUALITIES_WE_NEED} />
      <ViewPositions />
      <ViewMoreJobs />
    </Layout>
  )
}

export default JoinUsPage