/* eslint-disable no-unused-vars */
import { Box, Container, Image, Text } from "@chakra-ui/react";
import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
import getStarted from "../../assets/images/getStarted.png";
import getStarted2 from "../../assets/images/getStarted2.png";
import getStarted3 from "../../assets/images/getStarted3.png";

const GetStarted = () => {
  return (
    <Box backgroundColor={"#000"}>
      <Container
        maxW={"container.xl"}
        padding={"0 5rem"}
        sx={{
          "@media (max-width: 1024px)": {
            padding: "3rem",
          },
          "@media (max-width: 435px)": {},
        }}
      >
        <Text
          as={"h2"}
          paddingTop={"3rem"}
          paddingBottom={"2rem"}
          fontWeight={700}
          fontSize={"40px"}
          textAlign={"left"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
            "@media (max-width: 435px)": {
              fontSize: "35px",
            },
            "@media (max-width: 375px)": {
              fontSize: "28px",
              textAlign: "center",
            },
          }}
        >
          Get Started With Rubix
        </Text>
        <Text
          fontFamily={"Poppins"}
          fontWeight={"400"}
          fontSize={"20px"}
          width={"70%"}
          color={"#CFCFCF"}
          sx={{
            "@media (max-width: 435px)": {
              width: "100%",
            },
            "@media (max-width: 375px)": {
              fontSize: "16px",
              textAlign: "center",
            },
          }}
        >
          Rubix allows developers to build on a fast, secure, and scalable chain
          that has a unique approach to data sharing, objects.
        </Text>

        <Box padding={"4rem 0"}>
          <Tabs
            defaultIndex={0}
            orientation="vertical"
            // display={"flex"}
            flexDirection={"row-reverse"}
            // justifyContent={"space-between"}
            width={"100%"}
            border={"none"}
            sx={{
              "@media (max-width: 435px)": {
                orientation: "horizontal",
                flexDirection: "column",
                gap: "2rem",
              },
              "@media (max-width: 375px)": {},
            }}
          >
            <TabPanels
              display={"flex"}
              justifyContent={"center"}
              sx={{
                "@media (max-width: 435px)": {
                  minH: "290px",
                },
                "@media (max-width: 375px)": {},
              }}
            >
              <TabPanel>
                <Image
                  fit="cover"
                  src={getStarted}
                  sx={{
                    "@media (max-width: 435px)": {
                      width: "250px",
                    },
                    "@media (max-width: 375px)": {},
                  }}
                />
              </TabPanel>
              <TabPanel>
                <Image
                  fit="cover"
                  src={getStarted2}
                  sx={{
                    "@media (max-width: 435px)": {
                      width: "250px",
                    },
                    "@media (max-width: 375px)": {},
                  }}
                />
              </TabPanel>
              <TabPanel>
                <Image
                  fit="cover"
                  src={getStarted}
                  sx={{
                    "@media (max-width: 435px)": {
                      width: "250px",
                    },
                    "@media (max-width: 375px)": {},
                  }}
                />
              </TabPanel>
              <TabPanel>
                <Image
                  fit="cover"
                  src={getStarted3}
                  width={"300px"}
                  sx={{
                    "@media (max-width: 435px)": {
                      width: "250px",
                    },
                    "@media (max-width: 375px)": {},
                  }}
                />
              </TabPanel>
            </TabPanels>
            <TabList
              // flexDirection={"column"}
              width={"100%"}
              border={"none"}
              gap={"3rem"}
              sx={{
                "@media (max-width: 1024px)": {
                  textAlign: "left",
                },
                "@media (max-width: 375px)": {},
              }}
            >
              <Tab
                color="#fff"
                justifyContent={"left"}
                fontSize={"20px"}
                fontFamily={"Poppins"}
                textAlign={"left"}
                sx={{
                  "@media (max-width: 1024px)": {
                    fontSize: "15px",
                  },
                  "@media (max-width: 435px)": {
                    textAlign: "center",
                    justifyContent: "center",
                  },
                }}
              >
                - Start by reading our whitepaper
              </Tab>
              <Tab
                color="#fff"
                justifyContent={"left"}
                fontSize={"20px"}
                fontFamily={"Poppins"}
                textAlign={"left"}
                sx={{
                  "@media (max-width: 1024px)": {
                    fontSize: "15px",
                  },
                  "@media (max-width: 435px)": {
                    textAlign: "center",
                    justifyContent: "center",
                  },
                }}
              >
                - Install a Rubix node on your laptop
              </Tab>
              <Tab
                color="#fff"
                justifyContent={"left"}
                fontSize={"20px"}
                fontFamily={"Poppins"}
                textAlign={"left"}
                sx={{
                  "@media (max-width: 1024px)": {
                    fontSize: "15px",
                  },
                  "@media (max-width: 435px)": {
                    textAlign: "center",
                    justifyContent: "center",
                  },
                }}
              >
                - Migrate your current use case or process to Rubix
              </Tab>
              <Tab
                color="#fff"
                justifyContent={"left"}
                fontSize={"20px"}
                fontFamily={"Poppins"}
                textAlign={"left"}
                sx={{
                  "@media (max-width: 1024px)": {
                    fontSize: "15px",
                  },
                  "@media (max-width: 435px)": {
                    textAlign: "center",
                    justifyContent: "center",
                  },
                }}
              >
                - Design your first dApp
              </Tab>
            </TabList>
          </Tabs>
        </Box>
      </Container>
    </Box>
  );
};

export default GetStarted;