import * as React from "react"
import { graphql } from "gatsby"
import Layout from "@/components/layout"
import Seo from "@/components/seo"
import Introduction from "@/components/contact/Introduction"
import ContactInformation from "@/components/contact/contact-information"
import Offices from "@/components/contact/offices"
import FollowUs from "@/components/contact/follow-us"
//import Consultation from "@/components/contact/consultation"
import Information from "@/components/contact/information"
import t from "@/constants/wording"
import Form from "@/components/contact/form"

const ContactPage: React.FC<
  PageProps<FetchContactDataQuery> & { location: ILocation }
> = ({ data, location }) => {
  const {
    strapiContactUs: {
      banner,
      contactInformation,
      officeLocations,
      advisoryLink,
    },
  } = data

  return (
    <Layout>
      <Seo
        title={t("Contact.PingCAP")}
        description={t("PingCAP is the team behind the HTAP database TiDB")}
        keywords={t("keywords")}
      />
      <Introduction image={banner} />
      <Form location={location} />
      <ContactInformation information={contactInformation} />
      <Offices officeLocations={officeLocations} />
      <FollowUs />
      {/*<Consultation link={advisoryLink} />*/}
      <Information />
    </Layout>
  )
}

export const query = graphql`
  query FetchContactDataQuery {
    strapiContactUs {
      banner {
        alt
        id
        media {
          height
          width
          url
        }
      }
      contactInformation {
        id
        key
        contactInformationValues {
          id
          value
        }
      }
      officeLocations {
        addressDetail
        countryCity
        id
      }
      advisoryLink
    }
  }
`

export default ContactPage