import { ScrollView } from "@/components/ScrollView";
import { AppContianer } from "@/layouts/AppContianer";
import { BallAnime } from "@/layouts/BallAnime";
import { PageLayout } from "@/layouts/PageLayout";
import AboutImg from "@/assets/img/about.png";
import * as React from "react";
import { Contact } from "./Contact";
import { Partners } from "./Partners";
import { Memorabilia } from "./Memorabilia";
import { JoinUs } from "./JoinUs";
import { aboutBalls } from "@/config/ballSetting";
import { aboutBg, baasBg } from "@/config/bgSetting";

const Description = () => {
  return (
    <div className="w-full">
      <div className="sub-title-cn mb-[63px]  pl-[80px]">链上复杂美 上链不复杂</div>
      <div className="paragraph  content-1-cn flex-col gap-y-4  pl-[80px] min-w-[600px] max-w-[85%]">
        <div className="pb-[14px]">
          公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
        </div>
        <div className="pb-[14px]">
          总公司总部位于杭州，并在南京、广州、海南、宁波、重庆设有分部。目前，公司员工100人，其中80%左右为技术人员，吸引了一批甲骨文、阿里、华为程序员。总公司与多家世界500强开展区块链项目合作，在票据、供应链金融、积分、仓单有区块链应用落地。
        </div>
        <div>
          2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证等一系列应用。
        </div>
      </div>
      <div className="flex py-10 content-sub2-title-cn  gap-x-[4.5rem]  pl-[80px] ">
        <div>
          <span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
            优质
          </span>
          的服务
        </div>
        <div>
          <span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
            领先
          </span>
          的技术
        </div>
        <div>
          <span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
            专业
          </span>
          的定位
        </div>
      </div>
    </div>
  );
};

export default function About(props: any) {
  const demo = {
    animation: "move",
    config: [
      {
        size: "12rem",
        position: ["7rem", "40%"],
        rotation: "210",
        zIndex: "9999",
        color: "blue",
      },

      {
        size: "14rem",
        align: "right",
        position: ["-80px", "8%"],
        zIndex: "-1001",
        color: "white",
      },
    ],
    config2: [
      {
        size: "15rem",
        position: ["-5rem", "50%"],
        rotation: "210",
        zIndex: "9999",
        color: "white",
      },

      {
        size: "25rem",
        align: "right",
        position: ["-80px", "15%"],
        zIndex: "1001",
        color: "blue",
      },
    ],
  };
  return (
    <ScrollView>
      <div className="vertival-content ">
        <PageLayout
          ballConfig={aboutBalls[0].setting}
          gradientConfig={aboutBg[0].config}
        >
          <AppContianer className="h-full items-start labtop:px-[120px]">
            <div className="flex  w-full h-full items-center">
                <img src={AboutImg} />
              <div className=" ">
                <Description></Description>
              </div>
            </div>
          </AppContianer>
        </PageLayout>

         <PageLayout  ballConfig={aboutBalls[1].setting}
          gradientConfig={aboutBg[1].config}>
          <Memorabilia />
        </PageLayout> 

        <PageLayout  ballConfig={aboutBalls[2].setting}
          gradientConfig={aboutBg[2].config}>
          <AppContianer>
            <JoinUs />
          </AppContianer>
        </PageLayout>

        <PageLayout  ballConfig={aboutBalls[3].setting}
          gradientConfig={aboutBg[3].config}>
          <Contact />
        </PageLayout>

        <PageLayout  ballConfig={aboutBalls[3].setting}
          gradientConfig={aboutBg[4].config}>
          <Partners />
        </PageLayout>
      </div>
    </ScrollView>
  );
}
