import { ScrollView } from "@/components/ScrollView";
import { PageLayout } from "@/layouts/PageLayout";
import StyledButton from "@/components/StyledButton";
import { AppContianer } from "@/layouts/AppContianer";
import { Features } from "./Features";
import { Advantages } from "./Advantages";
import Baas33img from "@/assets/img/baas33.png";
import { baasBalls } from "@/config/ballSetting";

import { HeroBaas } from "./HeroBaas";

import { baasBg } from "@/config/bgSetting";
import { Service } from "./Service";
import { useContext, useEffect } from "react";
import { AppContext } from "@/store/AppProvider";
import { useNavigate } from "react-router";
import { LazyImg } from "@/components/LazyImg";
export interface IAppProps {}

export default function Baas33() {
  const navigate = useNavigate();
  const b = ["#sdfiw2", "#fud8fu", "#sdif822"];
  const appstart = import.meta.env.VITE_BAAS_ONECLIKE;

  return (
    <ScrollView>
      <div className="vertival-content">
        <PageLayout ballConfig={baasBalls[0].setting} className="flex items-center relative  h-full w-full min-h-[750px] labtop:min-h-[960px] ">
            <div className='h-full w-full relative min-h-[750px]'>
            <div className="centered ">
                <div className='px-[120px] pt-[70px]'>
                  <div className="title-1-cn">复杂美区块链开放服务平台</div>
                  <div className="flex gap-x-[20px] mt-[20px] ">
                    <StyledButton
                      text="开发者文档"
                      color="black"
                      onClick={() => navigate("/docs/1")}
                    ></StyledButton>
                    <StyledButton
                      text="一键搭建"
                      color="red"
                      onClick={() => window.open(appstart, "_blank")}
                    ></StyledButton>
                  </div>
                </div>
       
                <LazyImg
                  img={Baas33img}
                  animate="baas33"
                  className="w-[110%] mt-[65px]"
                ></LazyImg>
                <div className="flex -translate-y-[60px] justify-center gap-x-[111px] labtop:gap-x-[179px] sub-title-cn">
                  <div>高效</div>
                  <div>稳定</div>
                  <div>低成本</div>
                  <div>安装便捷</div>
                </div>
             
            </div>
            </div>
        </PageLayout>
        <PageLayout
          ballConfig={baasBalls[1].setting}
          gradientConfig={baasBg[1].config}
        >
          <Features></Features>
        </PageLayout>

        <PageLayout
          ballConfig={baasBalls[2].setting}
          gradientConfig={baasBg[2].config}
        >
          <Advantages />
        </PageLayout>

        <PageLayout
          ballConfig={baasBalls[3].setting}
          gradientConfig={baasBg[3].config}
        >
          <Service />
        </PageLayout>
      </div>
    </ScrollView>
  );
}
