/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
import cube from "../../assets/images/cube.png";

const MobileSubnet2 = ({ font }) => {
  return (
    <Box
      backgroundColor={"#000"}
      padding={"1.5rem"}
      display={"grid"}
      alignContent={"center"}
    >
      {/* Subnet1 */}
      <Box>
        <Box
          display={"flex"}
          alignItems={"center"}
          justifyContent={"space-between"}
        >
          <Text
            as={"h2"}
            paddingTop={"2rem"}
            fontWeight={500}
            fontSize={"20px"}
            textTransform={"capitalize"}
            color={"#fff"}
            sx={{
              "@media (max-width: 1024px)": {},
              "@media (max-width: 375px)": {
                fontSize: "22px",
              },
            }}
          >
            With unmatched privacy and scalability
          </Text>
          {/* <Image
            src={cube}
            width={"140px"}
            transform="translateY(-10%)"
            animation="floatAnimation 2s infinite alternate"
            sx={{
              "@keyframes floatAnimation": {
                "0%": {
                  transform: "translateY(0)",
                },
                "100%": {
                  transform: "translateY(-20px)",
                },
              },
            }}
          /> */}
        </Box>
        <Box>
          <Box>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={500}
              fontSize={"16px"}
              textTransform={"capitalize"}
              color={"#fff"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 375px)": {
                  fontSize: "18px",
                },
              }}
            >
              01. Decentralisation
            </Text>
            <Text fontSize={"14px"} color={"#E1E1E1"}>
              Rubix Decentralised Identity(DID) issued at L1 is the foundation
              for building digital ownership enhancing applications.
            </Text>
          </Box>

          <Box>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={500}
              fontSize={"16px"}
              textTransform={"capitalize"}
              color={"#fff"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 375px)": {
                  fontSize: "18px",
                },
              }}
            >
              02. Ultra Scalability
            </Text>
            <Text fontSize={"14px"} color={"#E1E1E1"}>
              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>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={500}
              fontSize={"16px"}
              textTransform={"capitalize"}
              color={"#fff"}
              sx={{
                "@media (max-width: 1024px)": {},
                "@media (max-width: 375px)": {
                  fontSize: "18px",
                },
              }}
            >
              03. Data Security and Privacy
            </Text>
            <Text fontSize={"14px"} color={"#E1E1E1"}>
              Rubix Decentralised Identity(DID) issued at L1 is the foundation
              for building digital ownership enhancing applications
            </Text>
          </Box>

          {/* <Box paddingBottom={"2rem"}>
            <Text
              as={"h2"}
              paddingTop={"2rem"}
              fontWeight={700}
              fontSize={"20px"}
              textTransform={"capitalize"}
              color={"#fff"}
            >
              All In One Composable Stack
            </Text>
            <UnorderedList color={"#E1E1E1"}>
              <ListItem>No GAS fees</ListItem>
              <ListItem>Incremental and modular infrastructure ask</ListItem>
              <ListItem>
                No expensive re training of development <br />
                resources
              </ListItem>
            </UnorderedList>
          </Box> */}
        </Box>
      </Box>
    </Box>
  );
};

export default MobileSubnet2;