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

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { Banner, CustomLink, ProductIntroduce } from "@/components"
import t from "@/constants/wording"
import TiDBIcon from "@/images/tidb-icon.svg"
import EcologicalTools from "@/components/product/ecological-tools"
import FreeExperience from "@/components/free-experience"
import ProductAdvantages from "@/components/product/product-advantages"
import ChoiceProduct from "@/components/product/choice-product"
import MoreResource from "@/components/home/more-resource"
import { PRODUCT_FILE_DOWNLOAD_URL } from "@/constants/product"

const ProductPage: React.FC<
  PageProps<FetchProductDataQuery> & { location: ILocation }
> = ({ data, location }) => {
  const {
    strapiProductPage: { homeBanner },
  } = data

  const bannerTitle = () => (
    <div className="is-flex is-justify-content-center is-align-items-center product-banner-title">
      <img className="pr-5" src={TiDBIcon} alt="TiDB logo" />
      {t("product page banner title")}
    </div>
  )

  return (
    <Layout>
      <Seo
        title={t("Product.PingCAP")}
        description={t(
          "TiDB is a fusion database product positioned for online transaction processing/online analysis and processing. It realizes one-key horizontal scaling, strong consistency of multiple copies of data security, distributed transactions, real-time OLAP and other important features"
        )}
        keywords={t("keywords")}
      />
      <div id="product-banner">
        <Banner
          title={bannerTitle()}
          subtitle={t("product page banner subtitle")}
          image={homeBanner}
        >
          <div style={{ padding: "0 0 2rem 0" }}>
            <CustomLink
              className="button is-white is-medium"
              linkTo={"/product#SelectProduct"}
            >
              {t("free trial")}
            </CustomLink>
          </div>
          <div>
            <CustomLink linkTo={PRODUCT_FILE_DOWNLOAD_URL} className="a-dark">
              <i className="iconfont icon-picture_as_pdf_black_24dp pr-1" />
              {t("Download product introduction")}
            </CustomLink>
          </div>
        </Banner>
      </div>
      <ProductAdvantages />
      <ChoiceProduct location={location} />
      <ProductIntroduce />
      <EcologicalTools />
      <MoreResource />
      <FreeExperience />
    </Layout>
  )
}

export const query = graphql`
  query FetchProductDataQuery {
    strapiProductPage {
      homeBanner {
        media {
          url
          width
          height
        }
      }
    }
  }
`

export default ProductPage