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

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { Banner, CustomLink } from "@/components"
import BusinessService from "@/components/support/business-service"
import CommunityResources from "@/components/community-resources"
import t from "@/constants/wording"
import ProfessionalConsultation from "@/components/support/professional-consultation"
import { SUPPORT_COMMUNITY_RESOURCES } from "@/constants/support"

const SupportPage: React.FC<
  PageProps<FetchSupportDataQuery> & { location: ILocation }
> = ({ data, location }) => {
  // todo: Yixing - add seo data
  const {
    strapiSupport: { homeBanner },
  } = data
  return (
    <Layout>
      <Seo
        title={t("support")}
        description={t("Achieve your business goals with the help of PingCAP")}
        keywords={t("keywords")}
      />
      <Banner
        image={homeBanner}
        title={t("support page banner title")}
        subtitle={t("support page banner subtitle")}
      >
        <CustomLink
          className="button is-white is-medium"
          linkTo={"/contact/"}
        >
          {t("contact us")}
        </CustomLink>
      </Banner>
      <BusinessService />
      <ProfessionalConsultation location={location} />
      <CommunityResources
        name={SUPPORT_COMMUNITY_RESOURCES.name}
        data={SUPPORT_COMMUNITY_RESOURCES.data}
      />
    </Layout>
  )
}

export const query = graphql`
  query FetchSupportDataQuery {
    strapiSupport {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
  }
`

export default SupportPage