import { ScrollView } from "@/components/ScrollView";
import { BallAnime } from "@/layouts/BallAnime";
import { PageLayout } from "@/layouts/PageLayout";
import chain33Bg from "@/assets/img/chain33.png";
import StyledButton from "@/components/StyledButton";
import { IProps } from "@/common/Iprops.interface";
import { Suspense, useMemo } from "react";
import { AppContianer } from "@/layouts/AppContianer";
import { GradientLay } from "@/layouts/GradientLay";
import Gao from '@/assets/img/gao.png'
import Jian from '@/assets/img/jian.png'
import Kuo from '@/assets/img/kuo.png'
import Weng from '@/assets/img/weng.png'
import An from '@/assets/img/an.png'
import { useNavigate } from "react-router";
import { LazyImg } from "@/components/LazyImg";
interface HeroItemType extends IProps{
    heroTitle: string;
    subtitle:string;
    content:string;
    order?:number;
    img?:any
}
const HeroItem =(props: HeroItemType)=>{
  const {heroTitle,subtitle,content,order,img} = props;
  const itemPosition = useMemo(()=>{
    if(order&&order%2===0){
      return false;
    }else{
      return true
    }
  },[order])
  return(
    <div className={`flex min-h-[750px] h-[85vh] w-[148px] py-16 text-white justify-center 
      ${itemPosition?'items-start':' items-end'}
   `}>
      <div>
        <div className="hero font-sans font-extrabold text-9xl">
          <img src={img} />
        </div>
        <div className="content-title-cn border-b-2 text-white w-[130px] my-3">
          {subtitle}
        </div>
        <div className=' normal-text text-white'>
          {content}
        </div>
      </div>
    </div>   
  ) 
}

export default function Chain33() {
  const navigate = useNavigate()
  const imgOnload = (e:any)=>{
    console.log(e);
    
  }
  return (
    <ScrollView>
      <div className="vertival-content">
        <PageLayout>
          <div className="w-full h-full flex justify-center items-baseline overflow-hidden">
            <div className="img-holder  mx-auto  w-[1440px] relative  ">
          
              <div className="absolute z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[15%] justify-center text-white">
                <div>
                  <div className="p-[42px] border-white border-[4px] rounded ">
                    <div className="super-hero-title py-5 tracking-widest">
                      Chain33
                    </div>
                    <div className="title-1-cn text-white font-normal  pt-5 tracking-wide text-center">
                      复杂美区块链开发者平台
                    </div>
                  </div>
                  <div className='pt-16 flex justify-center items-center gap-x-3'>
                    <StyledButton text='开源社区'></StyledButton>
                    <StyledButton text='资源下载'></StyledButton>
                    <StyledButton text='立即上手' color="black"  onClick={()=>navigate('/docs/2')}></StyledButton>
                  </div>
                </div>
              </div>
              <LazyImg
                img={chain33Bg}
                className='object-scale-down object-bottom z-[9]'
              ></LazyImg>
        
            </div>
          </div>
        </PageLayout>
        <PageLayout className=" bg-[#084DFF] flex items-center justify-center">
            <AppContianer className=''>
            <div className="flex justify-between items-center gap-x-5 min-h-[750px]">
                <HeroItem heroTitle="高" img={Gao} order={1} subtitle="高效" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
                <HeroItem heroTitle="安" img={An} order={2} subtitle="安全" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
                <HeroItem heroTitle="简" img={Jian} order={3} subtitle="简单" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
                <HeroItem heroTitle="稳" img={Weng} order={4} subtitle="稳定" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
                <HeroItem heroTitle="扩" img={Kuo} order={5} subtitle="高扩展性" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
            </div>
            </AppContianer>
        </PageLayout>

      </div>
    </ScrollView>
  );
}
