import { Box, Container, Text } from "@chakra-ui/react";
import React from "react";
import { Link } from "react-router-dom";
import { IoLogoTwitter } from "react-icons/io5";
import { FaFacebookF } from "react-icons/fa6";
import { FaInstagram } from "react-icons/fa";
import { IoLogoGithub } from "react-icons/io";

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

        <Box pb={4} pt={8} className=" w-100 border-bottom">
          <Box display={"flex"}>
            <Box w={"50%"} display={"flex"} flexDirection={"column"} gap={3}>
              <Text as={"h6"}>About Tanami</Text>
              <Text
                w={"60%"}
                mt={2}
                as={"p"}
                fontSize={"sm"}
                color={"gray.600"}
              >
                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 display={"flex"} gap={8}>
                <IoLogoTwitter />
                <FaFacebookF />
                <FaInstagram />
                <IoLogoGithub />
              </Box>
              <Text as={"span"} fontSize={"sm"}>
                info@tanamicapital.com
              </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"}>Help</Text>
              <Box display={"flex"} flexDirection={"column"} gap={1} mt={6}>
                <Link to={"/aboutus"}>
                  <Text fontSize={"sm"} as={"span"}>
                    About Us
                  </Text>{" "}
                </Link>
                <Link to={"/contact-us"}>
                  <Text fontSize={"sm"} as={"span"}>
                    Investment
                  </Text>
                </Link>
                <Link to={"/privacy-policy"}>
                  <Text fontSize={"sm"} as={"span"}>
                    How it works
                  </Text>
                </Link>
                <Link to={"/teams-of-service"}>
                  <Text fontSize={"sm"} as={"span"}>
                    FAQ's
                  </Text>
                </Link>
              </Box>
            </Box>
          </Box>
        </Box>

        <Box display={"flex"} justifyContent={"space-between"} mt={3}>
          <Text as={"span"} fontSize={"sm"} fontWeight={500}>
            Copyright © 2024 Tanami Capital
          </Text>
          <Text as={"span"} fontSize={"sm"} fontWeight={500}>
            Tanami Capital is authorized to participate in the Central Bank of
            Bahrain’s Fintench Regualatory Sandbox
          </Text>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;