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

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { Banner, CustomLink, LearnMoreSection } from "@/components"
import { LEARN_MORE_SECTION } from "@/constants/solution"
import FeaturedPartner from "@/components/solution/featured-partner"
import ChoiceSolution from "@/components/solution/chosen-solution"
import Categories from "@/components/solution/categories"
import t from "@/constants/wording"
import ContactUs from "@/components/solution/contact-us"

const SolutionPage: React.FC<{ data: FetchSolutionDataQuery, location: ILocation }> = ({ data, location }) => {
  // todo: Yixing - add seo data
  const {
    strapiSolutionPage: { homeBanner },
  } = data
  return (
    <Layout>
      <Seo
        title={t("Solution")}
        description={t(
          "Provide innovative solutions for the digital transformation of global industry customers based on leading technology platforms"
        )}
        keywords={t("keywords")}
      />
      <Banner
        title={t("solution page banner title")}
        subtitle={t("solution page banner subtitle")}
        image={homeBanner}
      >
        <CustomLink
          className="button is-white is-medium"
          linkTo={"/contact/"}
        >
          {t("contact us")}
        </CustomLink>
      </Banner>
      <ChoiceSolution />
      <Categories />
      <FeaturedPartner />
      <LearnMoreSection data={LEARN_MORE_SECTION} />
      <ContactUs location={location} />
    </Layout>
  )
}

export const query = graphql`
  query FetchSolutionDataQuery {
    strapiSolutionPage {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
  }
`

export default SolutionPage