import React, {
  useState,
  useContext,
  Suspense,
  useEffect,
  useLayoutEffect,
} from "react";
import {
  Fade,
  Flex,
  Heading,
  Box,
  Center,
  chakra,
  Stack,
  useMediaQuery,
  Grid,
  Text,
  GridItem,
  SimpleGrid,
  Button,
  Image as ChakraImage,
} from "@chakra-ui/react";
import dynamic from "next/dynamic";
import Link from "next/dist/client/link";
import useUser from "../src/core/hooks/useUser";
import useModals from "../src/core/hooks/useModals";
import useRouter from "../src/core/hooks/useRouter";
import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants";
import UIContext from "../src/core/providers/UIProvider/context";
import TrustedBadge from "../src/components/TrustedBadge";
import Slider from "react-slick";
import { v4 as uuidv4 } from "uuid";
import RouteButton from "../src/components/RouteButton";
import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants";
import mixpanel from "mixpanel-browser";
import {
  MIXPANEL_PROPS,
  MIXPANEL_EVENTS,
} from "../src/core/providers/AnalyticsProvider/constants";

const SplitWithImage = dynamic(
  () => import("../src/components/SplitWithImage"),
  {
    ssr: false,
  }
);
const FaStoreAlt = dynamic(() =>
  import("react-icons/fa").then((mod) => mod.FaStoreAlt)
);
const FaDiscord = dynamic(() =>
  import("react-icons/fa").then((mod) => mod.FaDiscord)
);

const GiRiver = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiRiver)
);

const GiCrossedChains = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiCrossedChains)
);

const GiChainedHeart = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiChainedHeart)
);

const MdOutlineVerifiedUser = dynamic(() =>
  import("react-icons/md").then((mod) => mod.MdOutlineVerifiedUser)
);

const GiRadarCrossSection = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiRadarCrossSection)
);

const GiMedallist = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiMedallist)
);

const GiRobotGolem = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiRobotGolem)
);

const CgUserlane = dynamic(() =>
  import("react-icons/cg").then((mod) => mod.CgUserlane)
);

const GiChaingun = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiChaingun)
);

const GiQuickSlash = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiQuickSlash)
);

const GiConcentrationOrb = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiConcentrationOrb)
);

const GiTakeMyMoney = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiTakeMyMoney)
);

const FaGithubSquare = dynamic(() =>
  import("react-icons/fa").then((mod) => mod.FaGithubSquare)
);
const GiMeshBall = dynamic(() =>
  import("react-icons/gi").then((mod) => mod.GiMeshBall)
);

const VscOrganization = dynamic(() =>
  import("react-icons/vsc").then((mod) => mod.VscOrganization)
);

const HEADING_PROPS = {
  fontWeight: "700",
  fontSize: ["4xl", "5xl", "5xl", "5xl", "6xl", "7xl"],
};

const assets = {
  background720: `${AWS_ASSETS_PATH}/background720.png`,
  background1920: `${AWS_ASSETS_PATH}/background720.png`,
  background2880: `${AWS_ASSETS_PATH}/background720.png`,
  background3840: `${AWS_ASSETS_PATH}/background720.png`,
  minedTransactions: `${AWS_ASSETS_PATH}/Ethereum+mined+transactions.png`,
  pendingTransactions: `${AWS_ASSETS_PATH}/Ethereum+pending+transactions.png`,
  priceInformation: `${AWS_ASSETS_PATH}/Price+information.png`,
  socialMediaPosts: `${AWS_ASSETS_PATH}/Social+media+posts.png`,
  cryptoTraders: `${AWS_ASSETS_PATH}/crypto+traders.png`,
  smartDevelopers: `${AWS_ASSETS_PATH}/smart+contract+developers.png`,
  cointelegraph: `${AWS_ASSETS_PATH}/featured_by/Cointelegraph_logo.png`,
  forte: `${AWS_ASSETS_PATH}/featured_by/forte_logo.png`,
  educativesessions: `${AWS_ASSETS_PATH}/featured_by/educative_logo.png`,
  cryptoinsiders: `${AWS_ASSETS_PATH}/featured_by/crypto_insiders.png`,
  cryptoslate: `${AWS_ASSETS_PATH}/featured_by/cs-media-logo-light.png`,
  bitcoinLogo: `${AWS_ASSETS_PATH}/bitcoin.png`,
  ethereumBlackLogo: `${AWS_ASSETS_PATH}/eth-diamond-black.png`,
  ethereumRainbowLogo: `${AWS_ASSETS_PATH}/eth-diamond-rainbow.png`,
  maticLogo: `${AWS_ASSETS_PATH}/matic-token-inverted-icon.png`,
  lender: `${AWS_ASSETS_PATH}/lender.png`,
  DAO: `${AWS_ASSETS_PATH}/DAO .png`,
  NFT: `${AWS_ASSETS_PATH}/NFT.png`,
  bc101: `${AWS_ASSETS_PATH}/featured_by/blockchain101_logo.png`,
  laguna: `${AWS_ASSETS_PATH}/featured_by/laguna_logo.svg`,
  game7io: `${AWS_ASSETS_PATH}/featured_by/game7io_logo.png`,
  orangedao: `${AWS_ASSETS_PATH}/featured_by/orangedao_logo.png`,
  meetup: `${AWS_ASSETS_PATH}/featured_by/meetup_logo.png`,
};

const carousel_content = [
  { title: "Bitcoin coming soon!", img: assets["bitcoinLogo"] },
  { title: "Ethereum", img: assets["ethereumBlackLogo"] },
  { title: "Ethereum transaction pool", img: assets["ethereumRainbowLogo"] },
  { title: "Polygon", img: assets["maticLogo"] },
  { title: "Bitcoin coming soon!", img: assets["bitcoinLogo"] },
  { title: "Ethereum", img: assets["ethereumBlackLogo"] },
  { title: "Ethereum transaction pool", img: assets["ethereumRainbowLogo"] },
  { title: "Polygon", img: assets["maticLogo"] },
];
const Homepage = () => {
  const ui = useContext(UIContext);
  const [background, setBackground] = useState("background720");
  const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
  const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
  const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false);
  const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false);

  const [imageIndex, setImageIndex] = useState(0);

  const router = useRouter();
  const { isInit } = useUser();
  const { toggleModal } = useModals();
  const [
    isLargerThan720px,
    isLargerThan1920px,
    isLargerThan2880px,
    isLargerThan3840px,
  ] = useMediaQuery([
    "(min-width: 720px)",
    "(min-width: 1920px)",
    "(min-width: 2880px)",
    "(min-width: 3840px)",
  ]);

  useEffect(() => {
    assets["background720"] = `${AWS_ASSETS_PATH}/background720.png`;
    assets["background1920"] = `${AWS_ASSETS_PATH}/background1920.png`;
    assets["background2880"] = `${AWS_ASSETS_PATH}/background2880.png`;
    assets["background3840"] = `${AWS_ASSETS_PATH}/background3840.png`;
  }, []);

  useLayoutEffect(() => {
    if (backgroundLoaded3840) {
      setBackground("background3840");
    } else if (backgroundLoaded2880) {
      setBackground("background2880");
    } else if (backgroundLoaded1920) {
      setBackground("background1920");
    } else {
      setBackground("background720");
    }
  }, [
    isLargerThan720px,
    isLargerThan1920px,
    isLargerThan2880px,
    isLargerThan3840px,
    backgroundLoaded720,
    backgroundLoaded1920,
    backgroundLoaded2880,
    backgroundLoaded3840,
  ]);

  useEffect(() => {
    if (
      router.nextRouter.asPath !== "/" &&
      router.nextRouter.asPath.slice(0, 2) !== "/?" &&
      router.nextRouter.asPath.slice(0, 2) !== "/#" &&
      router.nextRouter.asPath.slice(0, 11) !== "/index.html"
    ) {
      console.warn("redirect attempt..");
      if (typeof window !== "undefined") {
        console.warn("window present:", window.location.pathname);
        router.replace(router.nextRouter.asPath, router.nextRouter.asPath, {
          shallow: false,
        });
      }
    }
  }, [isInit, router]);

  useLayoutEffect(() => {
    const imageLoader720 = new Image();
    imageLoader720.src = `${AWS_ASSETS_PATH}/background720.png`;
    imageLoader720.onload = () => {
      setBackgroundLoaded720(true);
    };
  }, []);

  useLayoutEffect(() => {
    const imageLoader1920 = new Image();
    imageLoader1920.src = `${AWS_ASSETS_PATH}/background1920.png`;
    imageLoader1920.onload = () => {
      setBackgroundLoaded1920(true);
    };
  }, []);

  useLayoutEffect(() => {
    const imageLoader2880 = new Image();
    imageLoader2880.src = `${AWS_ASSETS_PATH}/background2880.png`;
    imageLoader2880.onload = () => {
      setBackgroundLoaded2880(true);
    };
  }, []);

  useLayoutEffect(() => {
    const imageLoader3840 = new Image();
    imageLoader3840.src = `${AWS_ASSETS_PATH}/background3840.png`;
    imageLoader3840.onload = () => {
      setBackgroundLoaded3840(true);
    };
  }, []);

  const settings = {
    infinite: true,
    lazyLoad: true,
    speed: 2000,
    autoplay: true,
    autoplaySpeed: 0,
    // cssEase: "linear",
    cssEase: "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
    // cssEase: "ease-in",
    slidesToScroll: 1,
    slidesToShow: ui.isMobileView ? 3 : 5,
    centerMode: true,
    centerPadding: 0,
    // nextArrow: "",
    // prevArrow: "",
    beforeChange: (current, next) => setImageIndex(next),
  };

  return (
    <Suspense fallback="">
      <Fade in>
        <Box
          width="100%"
          flexDirection="column"
          sx={{ scrollBehavior: "smooth" }}
          bgSize="cover"
        >
          <Flex
            direction="column"
            h="auto"
            position="relative"
            w="100%"
            overflow="initial"
            pt={0}
          >
            <Suspense fallback={""}></Suspense>

            <Grid
              templateColumns="repeat(12,1fr)"
              mt={0}
              border="none"
              boxSizing="content-box"
            >
              <GridItem
                mt={0}
                px="0"
                colSpan="12"
                pb={[1, 2, null, 8]}
                minH="100vh"
              >
                <chakra.header boxSize="full" minH="100vh">
                  <Box
                    bgPos="bottom"
                    bgColor="transparent"
                    backgroundImage={`url(${assets[`${background}`]})`}
                    bgSize="cover"
                    boxSize="full"
                    minH="100vh"
                  >
                    <Flex align="center" justify="center" boxSize="full">
                      <Stack
                        textAlign="center"
                        alignItems="center"
                        spacing={6}
                        maxW={["1620px", null, null, null, "1620px", "2222px"]}
                        w="100%"
                        px="7%"
                        h="100%"
                        pt={["10vh", null, "20vh"]}
                      >
                        <Heading
                          fontSize={["lg", "4xl", "5xl", "5xl", "5xl", "6xl"]}
                          fontWeight="semibold"
                          color="white"
                        >
                          Building blocks for your blockchain economy
                        </Heading>
                        <chakra.span
                          my={12}
                          fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                          display="inline-block"
                          color="blue.200"
                        >
                          Moonstream DAO makes tools that help you build,
                          manage, and secure your blockchain economy.
                        </chakra.span>
                        <chakra.span
                          my={12}
                          fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                          display="inline-block"
                          color="blue.200"
                        >
                          Moonstream has handled over{" "}
                          <Text
                            fontWeight={600}
                            textColor="orange.900"
                            display={"inline-block"}
                          >
                            $1B
                          </Text>{" "}
                          in transaction value to date.
                        </chakra.span>
                        <Box
                          w="100vw"
                          minH="200px"
                          // px="7%"
                          py={0}
                          overflowX="hidden"
                          overflowY="visible"
                        >
                          <Slider
                            {...settings}
                            // adaptiveHeight={true}
                            arrows={false}
                            autoplay={true}
                            autoplaySpeed={100}
                          >
                            {carousel_content.map((content_item, idx) => (
                              <Box
                                pt="80px"
                                h="auto"
                                w="150px"
                                maxW="150px"
                                // size="150px"
                                key={uuidv4()}
                                className={
                                  idx === imageIndex
                                    ? "slide activeSlide"
                                    : "slide"
                                }
                                // bgColor="blue.900"
                                // borderRadius="lg"
                                // boxShadow="lg"
                              >
                                <ChakraImage
                                  fit="contain"
                                  boxSize={["64px", "96px", "130px", null]}
                                  src={content_item.img}
                                />
                                <Text
                                  py={2}
                                  color="blue.300"
                                  fontSize={["sm", "md", null]}
                                >
                                  {content_item.title}
                                </Text>
                              </Box>
                            ))}
                          </Slider>
                        </Box>
                      </Stack>
                    </Flex>
                  </Box>
                </chakra.header>
              </GridItem>

              <GridItem px="7%" colSpan="12" pt={0} minH="100vh">
                <Heading
                  {...HEADING_PROPS}
                  textAlign="center"
                  mt={[12, 14, 16]}
                  pb={[12, 12, 12, null, 24]}
                >
                  Features:
                </Heading>
                <SimpleGrid
                  columns={[1, 2, 2, 5, null, 5]}
                  justifyContent="center"
                >
                  <Link href="#more_about_analytics" shallow scroll>
                    <Stack
                      transition={"1s"}
                      spacing={1}
                      px={1}
                      alignItems="center"
                      borderRadius="12px"
                      borderColor="gray.100"
                      borderWidth={"1px"}
                      _hover={{ transform: "scale(1.05)", transition: "0.42s" }}
                      cursor="pointer"
                      m={2}
                      pb={2}
                    >
                      <ChakraImage
                        boxSize={["220px", "220px", "xs", null, "xs"]}
                        objectFit="contain"
                        src={assets["cryptoTraders"]}
                        alt="mined transactions"
                      />
                      <Heading textAlign="center ">Analytics</Heading>
                      <chakra.span
                        textAlign={"center"}
                        textColor="blue.600"
                        px={2}
                      >
                        Get the full picture of your economy with automated
                        customizable dashboards.
                      </chakra.span>
                    </Stack>
                  </Link>
                  <Link href="#more_about_markets" shallow scroll>
                    <Stack
                      transition={"1s"}
                      spacing={1}
                      px={1}
                      alignItems="center"
                      borderRadius="12px"
                      borderColor="gray.100"
                      borderWidth={"1px"}
                      _hover={{ transform: "scale(1.05)", transition: "0.42s" }}
                      m={2}
                      pb={2}
                    >
                      <ChakraImage
                        boxSize={["220px", "220px", "xs", null, "xs"]}
                        objectFit="contain"
                        src={assets["NFT"]}
                        alt="mined transactions"
                      />
                      <Heading textAlign="center ">Markets</Heading>
                      <chakra.span
                        textAlign={"center"}
                        textColor="blue.600"
                        px={2}
                      >
                        Create goods and resources for your economy. Set up
                        fully customizable storefronts for these items.
                      </chakra.span>
                    </Stack>
                  </Link>
                  <Link href="#more_about_bridges" shallow scroll>
                    <Stack
                      transition={"1s"}
                      spacing={1}
                      px={1}
                      alignItems="center"
                      borderRadius="12px"
                      borderColor="gray.100"
                      borderWidth={"1px"}
                      _hover={{ transform: "scale(1.05)", transition: "0.42s" }}
                      m={2}
                      pb={2}
                    >
                      <ChakraImage
                        boxSize={["220px", "220px", "xs", null, "xs"]}
                        objectFit="contain"
                        src={assets["lender"]}
                        alt="engine"
                      />
                      <Heading textAlign="center ">Engine</Heading>
                      <chakra.span
                        textAlign={"center"}
                        textColor="blue.600"
                        px={2}
                      >
                        Create and manage tokens with custom mechanics specific
                        to your project.
                      </chakra.span>
                    </Stack>
                  </Link>
                  <Link href="#more_about_loyalty" shallow scroll>
                    <Stack
                      transition={"1s"}
                      spacing={1}
                      px={1}
                      alignItems="center"
                      borderRadius="12px"
                      borderColor="gray.100"
                      borderWidth={"1px"}
                      _hover={{ transform: "scale(1.05)", transition: "0.42s" }}
                      m={2}
                      pb={2}
                    >
                      <ChakraImage
                        boxSize={["220px", "220px", "xs", null, "xs"]}
                        objectFit="contain"
                        src={assets["DAO"]}
                        alt="mined transactions"
                      />
                      <Heading textAlign="center ">{`Loyalty`}</Heading>
                      <chakra.span
                        textAlign={"center"}
                        textColor="blue.600"
                        px={2}
                      >
                        Reward the most active participants in your economy with
                        loyalty programs and token sale whitelists.
                      </chakra.span>
                    </Stack>
                  </Link>
                  <GridItem colSpan={[1, 2, 2, 1, null, 1]}>
                    <Link href="#more_about_security" shallow scroll>
                      <Stack
                        transition={"1s"}
                        spacing={1}
                        px={1}
                        alignItems="center"
                        borderRadius="12px"
                        borderColor="gray.100"
                        borderWidth={"1px"}
                        _hover={{
                          transform: "scale(1.05)",
                          transition: "0.42s",
                        }}
                        m={2}
                        pb={2}
                      >
                        <ChakraImage
                          boxSize={["220px", "220px", "xs", null, "xs"]}
                          objectFit="contain"
                          src={assets["smartDevelopers"]}
                          alt="mined transactions"
                        />
                        <Heading textAlign="center ">{`Security`}</Heading>
                        <chakra.span
                          textAlign={"center"}
                          textColor="blue.600"
                          px={2}
                        >
                          Secure your economy against bad actors. Detect attacks
                          on your economy and defend against them.
                        </chakra.span>
                      </Stack>
                    </Link>
                  </GridItem>
                </SimpleGrid>
              </GridItem>

              <GridItem
                px="7%"
                mt={["32px", "64px", null]}
                pt={["98px", "126px", null]}
                colSpan="12"
                bgColor="blue.50"
                pb={["20px", "30px", "92px", null, "92px", "196px"]}
              >
                <Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}>
                  Trusted by{" "}
                </Heading>
                <Flex wrap="wrap" direction="row" justifyContent="center">
                  <Suspense fallback={""}>
                    <TrustedBadge
                      scale={1.5}
                      name="Laguna games"
                      caseURL=""
                      ImgURL={assets["laguna"]}
                      boxURL="https://laguna.games/"
                    />
                    <TrustedBadge
                      scale={1.5}
                      name="game7io"
                      ImgURL={assets["game7io"]}
                      boxURL="https://game7.io/"
                    />

                    <TrustedBadge
                      scale={1.5}
                      name="orangedao"
                      ImgURL={assets["orangedao"]}
                      boxURL="https://lfg.orangedao.xyz/"
                    />
                    <TrustedBadge
                      scale={1.5}
                      name="forte"
                      ImgURL={assets["forte"]}
                      boxURL="https://www.forte.io/"
                    />
                  </Suspense>
                </Flex>
              </GridItem>
              <GridItem
                px="7%"
                colSpan="12"
                pt={["2rem", "2rem", "5.125rem", null, "5.125rem"]}
                pb={["0", "32px", null, "32px"]}
                id="exchanges"
              >
                <Center>
                  <Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}>
                    Learn more about Moonstream DAO use cases
                  </Heading>
                </Center>
              </GridItem>
              <GridItem
                px="7%"
                colSpan="12"
                pt={["2rem", "2rem", "5.125rem", null, "5.125rem"]}
                pb={["0", "66px", null, "66px"]}
                id="more_about_analytics"
                minH={ui.isMobileView ? "100vh" : null}
              >
                <SplitWithImage
                  cta={{
                    colorScheme: "orange",
                    onClick: () => {
                      mixpanel.get_distinct_id() &&
                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
                          [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer txpool button`,
                        });
                      router.push("/whitepapers");
                    },
                    label: "NFT market report",
                  }}
                  socialButton={{
                    url: "https://discord.gg/K56VNUQGvA",
                    title: "Contact us on discord",
                    icon: "discord",
                  }}
                  elementName={"element1"}
                  colorScheme="green"
                  badge={`Moonstream analytics`}
                  bullets={[
                    {
                      text: `See how value flows into and out of every component of your economy.`,
                      icon: GiRiver,
                      color: "green.50",
                      bgColor: "green.900",
                    },
                    {
                      text: `Track inflation or deflation of your currencies.`,
                      icon: GiTakeMyMoney,
                      color: "green.50",
                      bgColor: "green.900",
                    },
                    {
                      text: `Track the concentration of wealth in your economy.`,
                      icon: GiConcentrationOrb,
                      color: "green.50",
                      bgColor: "green.900",
                    },
                  ]}
                  imgURL={assets["cryptoTraders"]}
                />
              </GridItem>
              <GridItem
                px="7%"
                colSpan="12"
                pt={["2rem", "2rem", "5.125rem", null, "5.125rem"]}
                pb={["0", "66px", null, "66px"]}
                id="more_about_markets"
                minH={ui.isMobileView ? "100vh" : null}
              >
                <SplitWithImage
                  elementName={"element2"}
                  mirror={true}
                  colorScheme="blue"
                  badge={`Moonstream Markets`}
                  socialButton={{
                    url: "https://discord.gg/K56VNUQGvA",
                    title: "Contact us on discord",
                    icon: "discord",
                  }}
                  bullets={[
                    {
                      text: `Deploy new goods or resources into your economy in seconds.`,
                      icon: GiQuickSlash,
                      color: "blue.50",
                      bgColor: "blue.900",
                    },
                    {
                      text: `Easy liquidity for those goods and resources on DEXs and on secondary markets like Open Sea.`,
                      icon: GiMeshBall,
                      color: "blue.50",
                      bgColor: "blue.900",
                    },
                    {
                      text: `Create custom NFT storefronts.`,
                      icon: FaStoreAlt,
                      color: "blue.50",
                      bgColor: "blue.900",
                    },
                  ]}
                  imgURL={assets["NFT"]}
                />
              </GridItem>
              <GridItem
                px="7%"
                colSpan="12"
                pt={["2rem", "2rem", "5.125rem", null, "5.125rem"]}
                pb={["0", "66px", null, "66px"]}
                id="more_about_bridges"
                minH={ui.isMobileView ? "100vh" : null}
              >
                <SplitWithImage
                  socialButton={{
                    url: "https://discord.gg/K56VNUQGvA",
                    title: "Contact us on discord",
                    icon: "discord",
                  }}
                  elementName={"element3"}
                  colorScheme="orange"
                  badge={`Moonstream engine`}
                  bullets={[
                    {
                      text: `Deploy customizable and upgradable characters, items, and currencies into your economy`,
                      icon: GiCrossedChains,
                      color: "orange.50",
                      bgColor: "orange.900",
                    },
                    {
                      text: `Monitor interactions between these tokens`,
                      icon: GiChainedHeart,
                      color: "orange.50",
                      bgColor: "orange.900",
                    },
                    {
                      text: `Secure the tokens with Moonstream defense bots.`,
                      icon: GiChaingun,
                      color: "orange.50",
                      bgColor: "orange.900",
                    },
                  ]}
                  imgURL={assets["lender"]}
                />
              </GridItem>
              <GridItem
                px="7%"
                colSpan="12"
                pt={["2rem", "2rem", "5.125rem", null, "5.125rem"]}
                pb={["0", "66px", null, "66px"]}
                id="more_about_loyalty"
                minH={ui.isMobileView ? "100vh" : null}
              >
                <SplitWithImage
                  mirror
                  socialButton={{
                    url: "https://discord.gg/K56VNUQGvA",
                    title: "Contact us on discord",
                    icon: "discord",
                  }}
                  elementName={"element3"}
                  colorScheme="red"
                  badge={`Moonstream Loyalty`}
                  bullets={[
                    {
                      text: `Track the most active participants in your economy and easily give them rewards for their engagement.`,
                      icon: VscOrganization,
                      color: "red.50",
                      bgColor: "red.900",
                    },
                    {
                      text: `Create and distribute whitelist tokens for your pre-sales. Make them tradeable on markets like OpenSea.`,
                      icon: GiMedallist,
                      color: "red.50",
                      bgColor: "red.900",
                    },
                    {
                      text: `Manage KYC information about your community.`,
                      icon: CgUserlane,
                      color: "red.50",
                      bgColor: "red.900",
                    },
                  ]}
                  imgURL={assets["DAO"]}
                />
              </GridItem>
              <GridItem
                px="7%"
                colSpan="12"
                pt={["2rem", "2rem", "5.125rem", null, "5.125rem"]}
                pb={["0", "66px", null, "66px"]}
                id="more_about_security"
                minH={ui.isMobileView ? "100vh" : null}
              >
                <SplitWithImage
                  socialButton={{
                    url: "https://discord.gg/K56VNUQGvA",
                    title: "Contact us on discord",
                    icon: "discord",
                  }}
                  elementName={"element3"}
                  colorScheme="green"
                  badge={`Moonstream security`}
                  bullets={[
                    {
                      text: `Moonstream smart contracts have been vetted in production with over $1B in value transacted.`,
                      icon: MdOutlineVerifiedUser,
                      color: "green.50",
                      bgColor: "green.900",
                    },
                    {
                      text: `Moonstream scanners constantly monitor accounts and transactions in your economy and identify threats in seconds.`,
                      icon: GiRadarCrossSection,
                      color: "green.50",
                      bgColor: "green.900",
                    },
                    {
                      text: `One-click deploy defense bots which counter attacks as soon as they are detected.`,
                      icon: GiRobotGolem,
                      color: "green.50",
                      bgColor: "green.900",
                    },
                  ]}
                  imgURL={assets["smartDevelopers"]}
                />
              </GridItem>
              <GridItem
                px="7%"
                mt={["32px", "64px", null]}
                pt={["98px", "226px", null]}
                colSpan="12"
                bgColor="blue.50"
                pb={["20px", "30px", "92px", null, "92px", "196px"]}
              >
                <Heading {...HEADING_PROPS} textAlign="center" pb={14} pt={0}>
                  Featured by{" "}
                </Heading>
                <Flex wrap="wrap" direction="row" justifyContent="center">
                  <Suspense fallback={""}>
                    <TrustedBadge
                      name="cointelegraph"
                      caseURL=""
                      ImgURL={assets["cointelegraph"]}
                      boxURL="https://cointelegraph.com/news/17-of-addresses-snapped-up-80-of-all-ethereum-nfts-since-april"
                    />
                    <TrustedBadge
                      name="CryptoInsiders"
                      ImgURL={assets["cryptoinsiders"]}
                      boxURL="https://www.crypto-insiders.nl/nieuws/altcoin/17-van-ethereum-whales-bezitten-meer-dan-80-van-alle-nfts-op-de-blockchain/"
                    />

                    <TrustedBadge
                      name="cryptoslate"
                      ImgURL={assets["cryptoslate"]}
                      boxURL="https://cryptoslate.com/should-investors-care-80-of-all-nfts-belong-to-17-of-addresses/"
                    />
                    <TrustedBadge
                      name="educative sessions"
                      scale={1.5}
                      ImgURL={assets["educativesessions"]}
                      boxURL="https://youtu.be/DN8zRzJuy0M"
                    />
                    <TrustedBadge
                      scale={1.5}
                      name="bc101"
                      ImgURL={assets["bc101"]}
                      boxURL="https://blockchain101.com/"
                    />
                    <TrustedBadge
                      scale={1.5}
                      name="bc101"
                      ImgURL={assets["meetup"]}
                      boxURL="https://www.meetup.com/SF-Bay-Area-Data-Science-Initiative/events/283215538/"
                    />
                  </Suspense>
                </Flex>
              </GridItem>
              <GridItem
                placeItems="center"
                w="100%"
                colSpan="12"
                pt={["0", "0", "5.125rem", null, "5.125rem"]}
                pb="120px"
                px="7%"
              >
                <Stack direction="column" justifyContent="center">
                  <chakra.span
                    textAlign="center"
                    fontWeight="600"
                    fontSize="lg"
                    w="100%"
                    h="fit-content"
                  >
                    <Text
                      mb={18}
                      fontSize={["md", "2xl", "3xl", "3xl", "3xl", "4xl"]}
                    >
                      Check out our GitHub repository and join our community on
                      Discord
                    </Text>
                  </chakra.span>
                  <Flex direction="row" flexWrap="wrap" placeContent="center">
                    <RouteButton
                      placeSelf="center"
                      href={`https://github.com/bugout-dev/moonstream`}
                      size="md"
                      variant="outline"
                      colorScheme="blue"
                      w="250px"
                      leftIcon={<FaGithubSquare />}
                    >
                      git clone moonstream
                    </RouteButton>
                    <RouteButton
                      placeSelf="center"
                      href={"https://discord.gg/K56VNUQGvA"}
                      size="md"
                      variant="outline"
                      colorScheme="blue"
                      leftIcon={<FaDiscord />}
                      w="250px"
                    >
                      Join our Discord
                    </RouteButton>
                  </Flex>
                  <Button
                    mt={3}
                    placeSelf="center"
                    w={["100%", "100%", "fit-content", null]}
                    maxW={["250px", null, "fit-content"]}
                    onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
                    size="lg"
                    variant="solid"
                    colorScheme="orange"
                  >
                    Sign up
                  </Button>
                </Stack>
              </GridItem>
            </Grid>
          </Flex>
        </Box>
      </Fade>
    </Suspense>
  );
};

export async function getStaticProps() {
  const assetPreload = Object.keys(assets).map((key) => {
    return {
      rel: "preload",
      href: assets[key],
      as: "image",
    };
  });
  const preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];

  const preloads = assetPreload.concat(preconnects);

  return {
    props: { metaTags: DEFAULT_METATAGS, preloads },
  };
}

export default Homepage;