import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
import { Component1 } from "./Component1";
import { Component2 } from "./Component2";
import { Component3 } from "./Component3";
import { Component4 } from "./Component4";
// import { SubnetPage2 } from "./SubnetPage2";
import cube from "../../assets/images/cube.png";
import stack from "../../assets/images/stackNew.webp";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// Initialize ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

const SubnetContent = {
  heading: `decentralised Auto Syncing subnets`,
};

export const NewSubnetComp = () => {
  const firstBoxRef = useRef(null);
  const secondBoxRef = useRef(null);
  const thirdBoxRef = useRef(null);
  const mainBox = useRef(null);

  useEffect(() => {
    // gsap.set(firstBoxRef.current, { opacity: 1 });
    let tl = gsap
      .timeline({
        scrollTrigger: {
          trigger: mainBox.current,
          start: "top top",
          scrub: 1,
          pin: true,
          end: "bottom bottom",
          markers: true,
        },
      })
      .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
      .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
      .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
      .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });

    // .fromTo(
    //   firstBoxRef.current,
    //   { opacity: 1, duration: 3, transform: "translateX(0vw)" },
    //   { opacity: 0, duration: 3, transform: "translateX(100vw)" }
    // )
    // .fromTo(
    //   secondBoxRef.current,
    //   { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
    //   { opacity: 1, duration: 1, transform: "translateX(0vw)" }
    // )
    // .fromTo(
    //   secondBoxRef.current,
    //   { opacity: 1, duration: 3, transform: "translateX(0vw)" },
    //   { opacity: 0, duration: 3, transform: "translateX(100vw)" }
    // )
    // .fromTo(
    //   thirdBoxRef.current,
    //   { opacity: 0, duration: 1, transform: "translateX(-100vw)" },
    //   { opacity: 1, duration: 1, transform: "translateX(0vw)" }
    // );

    return () => {
      tl.kill();
    };
  }, []);

  return (
    <div
      style={{
        backgroundColor: "#000",
        overflow: "hidden",
      }}
    >
      <Box
        ref={mainBox}
        height={"300vh"}
        position={"relative"}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
      >
        <Box
          ref={firstBoxRef}
          position={"absolute"}
          top={"0"}
          left={"0"}
          height={"100vh"}
          width={"100%"}
          backgroundColor={"#000"}
        >
          <Container
            maxW="container.xl"
            textAlign={"center"}
            // display={"grid"}
            placeContent={"center"}
          >
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"40px"}
              textTransform={"capitalize"}
              color={"#fff"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 600px)": {
                  fontSize: "28px",
                },
              }}
            >
              {SubnetContent.heading}
            </Text>
            <Box
              display={"grid"}
              gridTemplateColumns={"repeat(2, 1fr)"}
              gridTemplateRows={"repeat(2, 1fr)"}
              gap={"17rem 4rem"}
              marginTop={"150px"}
              position={"relative"}
              padding={"0 4rem"}
              paddingBottom={"50px"}
            >
              <Image
                src={cube}
                width={"410px"}
                position={"absolute"}
                left={"0"}
                right={"0"}
                marginLeft={"auto"}
                marginRight={"auto"}
                cursor={"pointer"}
                transform="translateY(-10%)"
                animation="floatAnimation 2s infinite alternate"
                // onClick={handleImageClick}
                sx={{
                  "@keyframes floatAnimation": {
                    "0%": {
                      transform: "translateY(0)",
                    },
                    "100%": {
                      transform: "translateY(-20px)",
                    },
                  },
                }}
              />

              <Box
                gridColumn={"1/2"}
                textAlign={"left"}
                position={"relative"}
                width={"383px"}
              >
                <Component1 />
              </Box>

              <Box
                gridColumn={"1/2"}
                gridRow={"2"}
                textAlign={"left"}
                position={"relative"}
                width={"383px"}
              >
                <Component2 />
              </Box>

              <Box
                gridColumn={"2/2"}
                gridRow={"2"}
                textAlign={"left"}
                position={"relative"}
                width={"383px"}
              >
                <Component3 />
              </Box>

              <Box
                gridColumn={"2/2"}
                textAlign={"left"}
                position={"relative"}
                width={"383px"}
              >
                <Component4 />
              </Box>
            </Box>
          </Container>
        </Box>

        <Box
          backgroundColor={"#000"}
          height={"100vh"}
          padding={"0 5rem"}
          paddingBottom={"2rem"}
          ref={secondBoxRef}
          position={"absolute"}
          top={"0"}
          left={"0"}
        >
          <Text
            as={"h2"}
            paddingTop={"2rem"}
            fontWeight={700}
            fontSize={"40px"}
            textTransform={"capitalize"}
            color={"#fff"}
            marginBottom={"5rem"}
            textAlign={"center"}
            sx={{
              "@media (max-width: 1024px)": {},
              "@media (max-width: 600px)": {
                fontSize: "28px",
              },
            }}
          >
            With Unmatched Privacy and Scalability
          </Text>
          <Container maxW="container.xl" textAlign={"center"}>
            <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
              <Box>
                <Image
                  src={cube}
                  width={"480px"}
                  //   position={"absolute"}
                  left={"0"}
                  right={"0"}
                  marginLeft={"auto"}
                  marginRight={"auto"}
                  cursor={"pointer"}
                  transform="translateY(-10%)"
                  animation="floatAnimation 2s infinite alternate"
                  // onClick={click}
                  sx={{
                    "@keyframes floatAnimation": {
                      "0%": {
                        transform: "translateY(0)",
                      },
                      "100%": {
                        transform: "translateY(-20px)",
                      },
                    },
                  }}
                />
              </Box>
              <Box width={"50%"}>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"24px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    01. Decentralisation
                  </Text>
                  <Text fontSize={"18px"}>
                    Rubix Decentralised Identity( DID) issued at L1 is the
                    foundation for building digital ownership enhancing
                    applications.
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"24px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    02. Ultra Scalability
                  </Text>
                  <Text fontSize={"18px"}>
                    Unlike monolithic chains which become centralized and
                    introduce latency to achieve high throughput, in the Rubix
                    object chain architecture, where mobile nodes have real time
                    full state data, the network TPS will increase with increase
                    in numbers of nodes.
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"24px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    03. Data Security and Privacy
                  </Text>
                  <Text fontSize={"18px"}>
                    Rubix Decentralised Identity(DID) issued at L1 is the
                    foundation for building digital ownership enhancing
                    applications
                  </Text>
                </Box>
              </Box>
            </Box>
          </Container>
        </Box>

        <Box
          backgroundColor={"#000"}
          height={"100vh"}
          padding={"2rem"}
          // paddingBottom={"2rem"}
          ref={thirdBoxRef}
          position={"absolute"}
          top={"0"}
          left={"0"}
          // width={"100vw"}
        >
          <Text
            as={"h2"}
            paddingTop={"2rem"}
            fontWeight={700}
            fontSize={"40px"}
            textTransform={"capitalize"}
            color={"#fff"}
            marginBottom={"5rem"}
            textAlign={"center"}
            sx={{
              "@media (max-width: 1024px)": {},
              "@media (max-width: 600px)": {
                fontSize: "28px",
              },
            }}
          >
            All In One Composable Stack
          </Text>
          <Container maxW="container.xl" textAlign={"center"}>
            <Box display={"flex"} alignItems={"start"} gap={"3rem"}>
              <Box width={"100%"}>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Single Comprehensive Stack:
                  </Text>
                  <Text fontSize={"16px"}>
                    Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
                    tokens ( FTs and NFTs) all in one place.
                  </Text>
                </Box>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    High Partition Tolerence:
                  </Text>
                  <Text fontSize={"16px"}>
                    Issues in one shard wont affect other shards performance
                  </Text>
                </Box>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"right"}
                  marginBottom={"2rem"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Fully Deterministic:
                  </Text>
                  <Text fontSize={"16px"}>
                    App can bring own Block space ( BYOB )
                  </Text>
                </Box>
              </Box>
              <Box>
                <Image
                  src={stack}
                  width={"700px"}
                  //   position={"absolute"}
                  left={"0"}
                  right={"0"}
                  marginLeft={"auto"}
                  marginRight={"auto"}
                  cursor={"pointer"}
                  transform="translateY(-10%)"
                  animation="floatAnimation 2s infinite alternate"
                  // onClick={click}
                  sx={{
                    "@keyframes floatAnimation": {
                      "0%": {
                        transform: "translateY(0)",
                      },
                      "100%": {
                        transform: "translateY(-20px)",
                      },
                    },
                  }}
                />
              </Box>
              <Box width={"100%"}>
                <Box
                  color={"#E1E1E1"}
                  textAlign={"left"}
                  marginBottom={"2rem"}
                  minHeight={"80px"}
                >
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Unique Token/Object Based Architecture
                  </Text>
                  <Text fontSize={"16px"}>
                    : Build unlimited FTs and NFTs all at L1!!
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Green By The Design
                  </Text>
                  <Text fontSize={"16px"}>
                    : 100000 Rubix Transaction consume &lt; 10 kWh &lt; 100000
                    Visa transaction
                  </Text>
                </Box>
                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
                  <Text
                    as={"h2"}
                    fontSize={"20px"}
                    color={"#fff"}
                    marginBottom={"10px"}
                  >
                    Fixed Hard Capped Supply Of RBT At 51.4 Million
                  </Text>
                  {/* <Text fontSize={"18px"}>
                  </Text> */}
                </Box>
              </Box>
            </Box>
          </Container>
        </Box>
      </Box>
    </div>
  );
};