import React from "react";
import { Divider, Button } from "antd";
import { getLocale } from "../../utils";
import styles from "./index.less";
import GreenLine from "../../components/GreenLine";
import CusBreadcrumb from "../../components/CusBreadcrumb";
import PageHeaderInfo from "../../components/PageHeaderInfo";
import CarouselPicture from "../../components/CarouselPicture";

import img1 from "../../assets/img_jishuzhichi@3x.png";
import img2 from "../../assets/img_jishu_zhaopian1@3x.png";
import img3 from "../../assets/img_jishu_fuwu@3x.png";
import img4 from "../../assets/img_jishu_xiangmu@3x.png";
import img5 from "../../assets/img_jishu_jishu@3x.png";
import img6 from "../../assets/img_jishu_guanli@3x.png";

const IndexPage = (props) => {
  const { history } = props;
  const locale = getLocale();

  const jstdImgList = [
    {
      imgUrl: img3,
      title: locale.fw,
      info: locale.fwInfo,
    },
    {
      imgUrl: img4,
      title: locale.xm,
      info: locale.xmInfo,
    },
    {
      imgUrl: img5,
      title: locale.js,
      info: locale.jsInfo,
    },
    {
      imgUrl: img6,
      title: locale.gl,
      info: locale.glInfo,
    },
  ];
  const imgList = [
    {
      imgUrl: img2,
      name: "xxxxCE证书",
      year: "2023",
    },
    {
      imgUrl: img2,
      name: "xxxxCE证书",
    },
    {
      imgUrl: img2,
      name: "xxxxCE证书",
    },
  ];
  return (
    <div className={styles.root}>
      <div style={{ position: "relative" }}>
        <img className={"fullImg"} src={img1} />
        <PageHeaderInfo
          title={locale.footerMenu3}
          info={locale.jszcInfo}
          imgText={"Technical support"}
        >
          <CusBreadcrumb
            breadcrumbMenus={[
              {
                key: "/technical-support",
                text: locale.footerMenu3,
              },
            ]}
          />
        </PageHeaderInfo>
      </div>
      <div className={styles.jstdBox}>
        <div className={"text-center"}>
          <div className={"common-title2"}>{locale.jstdInfo1}</div>
          <div className={"common-info"}>{locale.jstdInfo2}</div>
        </div>
        <div className={styles.list}>
          {jstdImgList?.map((item, index) => (
            <div className={styles.item} key={`jstd-item-${index}`}>
              <img src={item.imgUrl} />
              <div className={styles.title}>{item.title}</div>
              <div className={styles.info}>{item.info}</div>
            </div>
          ))}
        </div>
      </div>
      <div className={styles.jszcBox}>
        <div className={styles.jszcText}>
          <div className={styles.title}>{locale.shjjszc1}</div>
          <div className={styles.secondTitle}>{locale.shjjszc2}</div>
          <GreenLine />
          <div className={styles.info}>
            <div>{locale.shjjszc31}</div>
            <div>
              <span>{locale.shjjszc32}</span>
              <span className={styles.phone}>400 650 2386</span>
              <span>{locale.shjjszc33}</span>
            </div>
            <div>{locale.shjjszc34}</div>
            <div>{locale.shjjszc35}</div>
          </div>
        </div>
      </div>
      <div className={styles.imgBox}>
        <div className={"common-title2"}>{locale.bfzp}</div>
        <div className={styles.list}>
          {imgList?.map((item, index) => (
            <img key={`bfjszc-picture-item-${index}`} src={item.imgUrl} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default IndexPage;