import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import LearnCard from "../Card/LearnCard";
import chainx from "../../assets/images/LearnCard2.png";
import ensurity from "../../assets/images/LearnCard4.png";
import exr from "../../assets/images/LearnCard5.png";
import finalo from "../../assets/images/LearnCard1.png";
import jupiter from "../../assets/images/LearnCard3.png";

// import { Badge } from "@chakra-ui/react";

const content = [
  {
    id: 1,
    src: `${chainx}`,
    alt: "ChainX",
    text: `Building a Web3 infrastructure to support nonprofit communities, starting with YMCA`,
  },
  {
    id: 2,
    src: ensurity,
    alt: "Ensurity",
    text: `Building solutions for an easier transition from Web2 to Web3 for global enterprises with a focus on public sector companies.`,
  },
  {
    id: 3,
    src: exr,
    alt: "EXR",
    text: `A metaverse, XR, and Web3 entity offering solutions that infuse gamification and tokenomics.`,
  },
  {
    id: 4,
    src: finalo,
    alt: "Finalo Education",
    text: `Delivers KYC/DID solutions for banks, and financial institutions, a highly secure algorithm for quantum security and a password-less authentication process for secure scaling`,
  },
  {
    id: 5,
    src: jupiter,
    alt: "Jupiter",
    text: `Mobile-based wallet that generates and stores private keys on a mobile device`,
  },
];

const Content = {
  heading: `Enabling developers across a variety`,
  span: `of applications`,
};

const LearnDev = () => {
  return (
    <Box
      // height={"100vh"}
      background={"#000"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
    >
      <Container maxW="container.xl">
        <Text
          as={"h2"}
          paddingTop={"2rem"}
          paddingBottom={"2rem"}
          paddingLeft={"4rem"}
          fontWeight={700}
          fontSize={"40px"}
          textAlign={"left"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
            "@media (max-width: 435px)": {
              fontSize: "35px",
            },
            "@media (max-width: 375px)": {
              fontSize: "28px",
            },
          }}
        >
          {Content.heading} <br />
          {Content.span}
        </Text>
      </Container>
      <Box
        paddingLeft={"7rem"}
        paddingBottom={"2rem"}
        // height={"50vh"}
        sx={{
          "@media (max-width: 435px)": {
            paddingLeft: "3rem",
          },
        }}
      >
        <Box
          display={"flex"}
          alignItems={"center"}
          gap={"25px"}
          overflowX={"auto"}
          overflowY={"auto"}
          sx={{
            "&::-webkit-scrollbar": {
              width: "0px",
            },
          }}
        >
          {content.map((item) => (
            <LearnCard
              key={item.id}
              src={item.src}
              alt={item.alt}
              text={item.text}
            />
          ))}
        </Box>
      </Box>
    </Box>
  );
};

export default LearnDev;