/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import {
  Box,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Container,
  Heading,
  Image,
  SimpleGrid,
  Text,
} from "@chakra-ui/react";
import banner from "../../assets/images/Statsbanner.png";
import tel from "../../assets/images/tel.png";
import red from "../../assets/images/red.png";
import git from "../../assets/images/git.png";
import twitch from "../../assets/images/twitch.png";
import twit from "../../assets/images/twit.png";
import face from "../../assets/images/face.png";
import lin from "../../assets/images/lin.png";
import { Link } from "react-router-dom";

const items = [
  {
    id: 1,
    head: `Innovator Dialogue`,
    logo1: tel,
    logo2: red,
    social1: `Telegram`,
    social2: `Reddit`,
  },
  {
    id: 2,
    head: `Developer Resources`,
    logo1: git,
    logo2: twitch,
    social1: `GitHub`,
    social2: `Discord`,
  },
  {
    id: 3,
    head: `Social Media`,
    logo1: twit,
    logo2: face,
    logo3: lin,
    social1: `Twitter`,
    social2: `Facebook`,
    social3: `LinkedIn`,
  },
];

const Connect = () => {
  return (
    <Box
      //   height={"80vh"}
      //   backgroundImage={`url(${banner})`}
      //   backgroundSize={"cover"}
      //   backgroundRepeat={"no-repeat"}
      backgroundColor={"#000"}
      padding={"5rem"}
      sx={{
        "@media (max-width: 1024px)": {
          height: "auto",
        },
        "@media (max-width: 600px)": {
          fontSize: "28px",
        },
      }}
    >
      <Container maxW="container.xl">
        <Text
          className="rubix-text-title"
          fontFamily={"Mona Sans"}
          fontWeight={"700"}
          //   fontSize={"40px"}
          color={"#fff"}
          textAlign={"center"}
        >
          Connect with Rubix community
        </Text>
      </Container>

      <Container
        maxW="container.xl"
        justifyContent={"center"}
        marginTop={"4rem"}
        textAlign={"center"}
      >
        <SimpleGrid
          spacing={4}
          templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
        >
          {items.map((item) => (
            <>
              <Box
                padding={"1px"}
                borderRadius={"10px"}
                key={item.id}
                _hover={{
                  backgroundImage:
                    "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A))",
                }}
              >
                <Card
                  background={"#000"}
                  borderRadius={"10px"}
                  minH={"270px"}
                  border={"1px solid #454545"}
                >
                  <CardHeader
                    display={"flex"}
                    justifyContent={"center"}
                    paddingBottom={"0px"}
                    marginTop={"2rem"}
                  >
                    {/* <Image src={item.img} /> */}
                    <Heading
                      size="md"
                      className="rubix-text-large"
                      fontWeight={"500"}
                    >
                      {item.head}
                    </Heading>
                  </CardHeader>
                  <CardBody
                    padding={"0px"}
                    display={"flex"}
                    alignItems={"center"}
                    justifyContent={"center"}
                    gap={"2.5rem"}
                  >
                    <Link display={"grid"} placeContent={"center"}>
                      <Box>
                        <Image src={item.logo1} margin={"0 auto 20px auto"} />
                      </Box>
                      <Text className="rubix-text-small" fontWeight={"400"}>
                        {item.social1}
                      </Text>
                    </Link>
                    <Link display={"grid"} placeContent={"center"}>
                      <Image src={item.logo2} margin={"0 auto 20px auto"} />
                      <Text className="rubix-text-small" fontWeight={"400"}>
                        {item.social2}
                      </Text>
                    </Link>
                    <Link display={"grid"} placeContent={"center"}>
                      <Image src={item.logo3} margin={"0 auto 20px auto"} />
                      <Text className="rubix-text-small" fontWeight={"400"}>
                        {item.social3}
                      </Text>
                    </Link>
                    {/* <>{console.log(item.logo1)}</> */}
                  </CardBody>
                </Card>
              </Box>
            </>
          ))}
        </SimpleGrid>
        <Button
          //   className="rubix-text-medium"
          position={"relative"}
          backgroundColor={"transparent"}
          cursor={"pointer"}
          transition="0.3s ease-in-out"
          color={"#fff"}
          height={"60px"}
          fontFamily={"Poppins"}
          fontWeight={"400"}
          border={"1px solid white"}
          borderRadius={"10px"}
          fontSize={"20px"}
          zIndex={"1"}
          overflow={"hidden"}
          marginTop={"4rem"}
          textAlign={"center"}
          padding={"0 2rem"}
          sx={{
            "::before": {
              content: '""',
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              width: "65px",
              height: "65px",
              borderRadius: "50%",
              transition: "0.35s linear",
              zIndex: -1,
              bgGradient:
                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
              opacity: "0",
            },
            "&:hover::before": {
              width: "100%",
              height: "120%",
              borderRadius: "0px",
              opacity: "1",
            },
          }}
          _hover={{
            color: "#000",
            border: "none",
            zIndex: 1,
          }}
        >
          Explore our community
        </Button>
      </Container>
    </Box>
  );
};

export default Connect;