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 = ({ showSubnet }) => {
  const firstBoxRef = useRef(null);
  const secondBoxRef = useRef(null);
  const thirdBoxRef = useRef(null);
  const mainBox = useRef(null);

  useEffect(() => {
    const animateBox = (boxRef) => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: boxRef.current,
          start: "top center+=50",
          end: "bottom bottom+=100",
          scrub: 1,
          markers: false,
        },
      });
      tl.fromTo(
        boxRef.current,
        {
          position: "sticky",
          top: "-116px",
        },
        {
          transform: "translateX(0)",
          duration: 0.5,
        }
      );

      return () => {
        // Clean up
        tl.kill();
      };
    };
    animateBox(firstBoxRef);
    animateBox(secondBoxRef);
    animateBox(thirdBoxRef);

    // const tl2 = gsap.timeline({
    //   scrollTrigger: {
    //     trigger: mainBox.current,
    //     start: "top top",
    //     end: "bottom bottom",
    //     scrub: 1,
    //     markers: false,
    //   },
    // });
    // tl2.fromTo(
    //   mainBox.current,
    //   {
    //     position: "sticky",
    //     top: 60,
    //     left: 0,
    //     duration: 0.5,
    //   },
    //   {
    //     position: "relative",
    //     duration: 0.5,
    //   }
    // );
  }, []);

  return (
    <Box ref={mainBox} backgroundColor={"#000"}>
      <Box
        // height={"100vh"}
        backgroundColor={"#000"}
        ref={firstBoxRef}
      >
        <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={"auto"}
        padding={"0 5rem"}
        paddingBottom={"2rem"}
        ref={secondBoxRef}
      >
        <Fade in={true}>
          <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>
        </Fade>
      </Box>
      <Box
        backgroundColor={"#000"}
        height={"auto"}
        padding={"0 5rem"}
        paddingBottom={"2rem"}
        ref={thirdBoxRef}
      >
        <Fade in={true}>
          <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'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>
        </Fade>
      </Box>
    </Box>
  );
};

// <Box
//   backgroundColor={"#000"}
//   height={"auto"}
//   padding={"0 5rem"}
//   paddingBottom={"2rem"}
//   // position={stickyPosition ? "sticky" : "static"}
//   // top={stickyPosition ? "98px" : "auto"}
// >
//   <Fade in={true}>
//     <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'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>
//   </Fade>
// </Box>;