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 { 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'
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-[65vh] py-16 text-white justify-center 
      ${itemPosition?' items-start':' items-end'}
   `}>
      <div>
        <div className="hero font-sans font-extrabold text-9xl">
          <img src={img} className='labtop:w-44 w-20' />
        </div>
        <div className="subtitle border-b-2 text-lg font-medium  w-4/12 my-3">
          {subtitle}
        </div>
        <div className='labtop:text-sm w-[230px] text-xs'>
          {content}
        </div>
      </div>
    </div>
  ) 
}

export default function Chain33() {
  return (
    <ScrollView>
      <div className="vertival-content">
        <PageLayout>
          <div className="w-full h-full flex justify-center items-baseline overflow-hidden">
            <div className="img-holder w-10/12 xl:w-8/12 relative ">
              <div className="absolute w-full h-full flex items-center -translate-x-[5%] -translate-y-[15%] justify-center text-white">
                <div>
                  <div className="p-5  border-white border-[4px] rounded xl:border-[8px]">
                    <div className="text-7xl xl:text-9xl tracking-widest font-bold">
                      Chain33
                    </div>
                    <div className="text-white text-lg xl:text-2xl 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"></StyledButton>
                  </div>
                </div>
              </div>

              <img
                src={chain33Bg}
                className="object-scale-down   object-bottom"
              />
            </div>
          </div>
        </PageLayout>
        <PageLayout className=" bg-[#084DFF] flex items-center justify-center">
            <AppContianer>

            <div className="flex justify-between items-center pt-20 gap-x-5">
                <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>
  );
}
