import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";

interface AdvantagesType extends IProps{

}
const AdvantagesList = ()=>{
    const data =[
        {
            title:'高效',
            text:'平行侧链之间交易可以并行执行，交易效率大大提升。'
        },
        {
            title:'稳定',
            text:'支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证整个区块链网络的稳定。'
        },
        {
            title:'安全',
            text:'采用代理重加密加秘钥分片的方案，实现数据可分享型存储，保障数据隐私。支持国标标准SM2、SM3、SM4。'
        },
        {
            title:'低成本',
            text:'提供便捷部署的BAAS服务，实现可视化安装，智能合约IDE工具，节约成本。'
        }
    ]
    return(
        <div className='flex flex-col gap-y-[60px] mt-[48px]'>
            {
                data.map((i,index)=>(
                    <div key={index} className='relative '>
                        <span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>{index+1}</span>
                        <div className='title-2-cn border-black border-b-[3px] w-[90px]'>{i.title}</div>
                        <div className='pt-2 content-1-cn'>{i.text}</div>
                    </div>
                ))
            }
        </div>
    )
}

export const Advantages = (props: AdvantagesType)=>{


    return(
        <AppContianer className='h-full'>
            <div className="flex h-full items-start pt-[48px] gap-x-[100px] ">
                <div className="left">
                    <div className="title-2-cn">
                        <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
                        <div className=" w-28 h-1 bg-theme-dark rounded"></div>
                        <div>平台优势</div>
                        </div>
                    
                        </div>
                        <div className="title-1-en py-5">
                            Platform
                            <div>
                            Advantages
                            </div> 
                        </div>

                        <div className='content-1-cn pt-5'>打造低成本、高性能、更可靠的区块链技术平台</div>
                        <div className='flex relative justify-end pt-[8rem]'>
                    
                    </div>
                </div>
                <div className="right">
                 <AdvantagesList />
                </div>
            </div>
        </AppContianer>
    )

}