import { Box, Container, Text } from "@chakra-ui/react";
import React from "react";
import { Link } from "react-router-dom";

const Footer = () => {
  return (
    <Box backgroundColor={"#0041180D"}>
      <Container
        p={4}
        display={"flex"}
        flexDirection={"column"}
        maxW="container.xl"
      >
        <Box pb={4} pt={4} className=" w-100 border-bottom">
          <Box as="span">
            <Text as={"h2"}>Yes, it’s that simple.</Text>
            <Text w={350} as={"p"}>
              Download the Tanami app today and start growing your wealth
            </Text>
          </Box>
        </Box>

        <Box pb={4} pt={8} className=" w-100">
          <Box display={"flex"}>
            <Box w={"50%"}>
              <Text as={"h6"}>About Tanami</Text>
              <Text w={"60%"} mt={6} as={"p"} fontSize={"sm"}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                dictum aliquet accumsan porta lectus ridiculus in mattis. Netus
                sodales in volutpat ullamcorper amet adipiscing fermentum.
              </Text>
            </Box>
            <Box w={"15%"}>
              <Text as={"h6"}>Company</Text>
              <Box display={"flex"} flexDirection={"column"} gap={1} mt={6}>
                <Link to={"/"}>
                  <Text fontSize={"sm"} as={"span"}>
                    Home
                  </Text>{" "}
                </Link>
                <Link to={"investment"}>
                  <Text fontSize={"sm"} as={"span"}>
                    Investment
                  </Text>
                </Link>
                <Link to={"investment"}>
                  <Text fontSize={"sm"} as={"span"}>
                    How it works
                  </Text>
                </Link>
                <Link to={"investment"}>
                  <Text fontSize={"sm"} as={"span"}>
                    FAQ's
                  </Text>
                </Link>
              </Box>
            </Box>
            
            <Box w={"10%"}>
              <Text as={"h6"}>Company</Text>
              <Box display={"flex"} flexDirection={"column"} gap={1} mt={6}>
                <Link to={"/"}>
                  <Text fontSize={"sm"} as={"span"}>
                    Home
                  </Text>{" "}
                </Link>
                <Link to={"investment"}>
                  <Text fontSize={"sm"} as={"span"}>
                    Investment
                  </Text>
                </Link>
                <Link to={"investment"}>
                  <Text fontSize={"sm"} as={"span"}>
                    How it works
                  </Text>
                </Link>
                <Link to={"investment"}>
                  <Text fontSize={"sm"} as={"span"}>
                    FAQ's
                  </Text>
                </Link>
              </Box>
            </Box>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;