import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
import "./style.css";
interface AdvantagesType extends IProps {}
const AdvantagesList = () => {
  return (
    <div className="flex flex-col gap-y-[60px] mt-[48px]">
      <div className="relative">
        <span className="item-number">1</span>
        <div className="item-title">高效</div>
        <div className="item-content">
          平行侧链之间交易可以并行执行，交易效率大大提升。
        </div>
      </div>
      <div className="relative ">
        <span className="item-number">2</span>
        <div className="item-title">稳定</div>
        <div className="item-content">
          支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证
          <br /> 整个区块链网络的稳定。
        </div>
      </div>
      <div className="relative ">
        <span className="item-number">3</span>
        <div className="item-title">安全</div>
        <div className="item-content">
          采用代理重加密加秘钥分片的方案，实现数据可分享型存储，保障数据隐私。
          <br />
          支持国标标准SM2、SM3、SM4。
        </div>
      </div>
      <div className="relative ">
        <span className="item-number">4</span>
        <div className="item-title">低成本</div>
        <div className="item-content">
          提供便捷部署的BAAS服务，实现可视化安装，
          <br />
          智能合约IDE工具，节约成本。
        </div>
      </div>
    </div>
  );
};

export const Advantages = (props: AdvantagesType) => {
  return (
    <AppContianer className="flex items-center  h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
      <div className="centred -translate-y-[30px]">
        <div className="flex w-full h-full items-start gap-x-[100px] labtop:h-[710px]  ">
          <div className="left   w-[40vw] h-full relative ">
            <div className="sub-title-cn pb-[30px]">
            <div className="py-[10px] flex items-center gap-x-[24px]">
              <div className="w-[80px] h-[2px] bg-theme-dark rounded"></div>
                <div>平台优势</div>
              </div>
            </div>
            <div className="title-1-en">
              Platform
              <div>Advantages</div>
            </div>

            <div className="normal-content pt-5">
              打造低成本、高性能、更可靠的区块链技术平台
            </div>
            <div className="flex relative justify-end pt-[30px]"></div>
          </div>
          <div className="right min-w-[820px] w-[55vw] labtop:self-end">
            <AdvantagesList />
          </div>
        </div>
      </div>
    </AppContianer>
  );
};
