import {
  Box,
  Button,
  Container,
  Image,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Text,
} from "@chakra-ui/react";
import React, { useState, useEffect } from "react";
import asset2 from "../assets/asset2.png";
import slider1 from "../assets/slider1.png";
import slider2 from "../assets/slider2.png";
import slider3 from "../assets/slider3.png";
import { ArrowForwardIcon } from "@chakra-ui/icons";

const content = [
  {
    title: "Higher returns",
    description:
      "We invest smart. From real estate to private equity, Tanami invests alongside global managers with a proven track record of consistent outperformance.",
  },
  {
    title: "Expert Diligence",
    description:
      "We understand investments. From real estate to private equity, Tanami invests alongside global managers with a proven track record of consistent outperformance.",
  },
  {
    title: "Low Minimums",
    description:
      "We make it easy. From real estate to private equity, Tanami invests alongside global managers with a proven track record of consistent outperformance.",
  },
];

const InvestmentPlatform = () => {
  const [tabIndex, setTabIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTabIndex((prevIndex) => (prevIndex + 1) % 3);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return (
    <Box id="investment" position={"relative"} backgroundColor={"#f5f8f6"} h={"100vh"}>
      <Container
        display={"flex"}
        flexDirection={"column"}
        maxW="container.xl"
        h={"100%"}
        p={4}
      >
        <Text
          mt={10}
          fontSize={34}
          fontWeight={"normal"}
          fontFamily={"Roca Two"}
          as={"h3"}
          textAlign={"center"}
          w={"100%"}
        >
          Why Choose Our Investment Platform
        </Text>

        <Box w={"100%"} h={"100%"} display={"flex"}>
          <Box
            w={"50%"}
            h={"100%"}
            display={"flex"}
            justifyContent={"center"}
            alignItems={"center"}
            position={"relative"}
          >
            <Box
              position={"absolute"}
              display={"flex"}
              flexDirection={"column"}
              gap={5}
            >
              <Image
                top={0}
                src={slider1}
                w={360.5}
                transition="opacity 0.5s ease-in-out"
                opacity={tabIndex === 0 ? 1 : 0}
              />
              <Image
                position={"absolute"}
                top={0}
                src={slider2}
                w={360}
                transition="opacity 0.5s ease-in-out"
                opacity={tabIndex === 1 ? 1 : 0}
              />
              <Image
                position={"absolute"}
                top={0}
                src={slider3}
                w={360}
                transition="opacity 0.5s ease-in-out"
                opacity={tabIndex === 2 ? 1 : 0}
              />
              <Tabs index={tabIndex} onChange={setTabIndex}>
                <TabList
                  w={"100%"}
                  display={"flex"}
                  mt={4}
                  justifyContent={"center"}
                  borderBottom={"none"} // Remove bottom border
                  // borderTop={"1px solid #CBCBCB"}
                >
                  <Tab
                    _selected={{
                      color: "#004118",
                      borderColor: "#004118",
                    }}
                    borderTop={"2px solid #CBCBCB"}
                    fontSize={"sm"}
                    width={"33.33%"}
                    color={"gray.500"}
                    fontWeight={"500"}
                    transition={"0.4s all"}
                    borderBottom={"none"} // Remove bottom border
                  >
                    Select
                  </Tab>
                  <Tab
                    _selected={{
                      color: "#004118",
                      borderColor: "#004118",
                    }}
                    borderTop={"2px solid #CBCBCB"}
                    width={"33.33%"}
                    fontSize={"sm"}
                    color={"gray.500"}
                    fontWeight={"500"}
                    transition={"0.4s all"}
                    borderBottom={"none"} // Remove bottom border
                  >
                    Onboard
                  </Tab>
                  <Tab
                    _selected={{
                      color: "#004118",
                      borderColor: "#004118",
                    }}
                    borderTop={"2px solid #CBCBCB"}
                    width={"33.33%"}
                    fontSize={"sm"}
                    color={"gray.500"}
                    fontWeight={"500"}
                    transition={"0.4s all"}
                    borderBottom={"none"} // Remove bottom border
                  >
                    Invest
                  </Tab>
                </TabList>
              </Tabs>
            </Box>
          </Box>

          <Box
            w={"50%"}
            h={"100%"}
            display={"flex"}
            justifyContent={"flex-start"}
            alignItems={"center"}
            transition="opacity 0.5s ease-in-out"
            opacity={1}
            // key={tabIndex} // Adding key to trigger re-render for transition
          >
            <Box position={"relative"}>
              <Box w={480}>
                <Box
                  position={"absolute"}
                  top={0}
                  transition={"0.5s all"}
                  as="span"
                  opacity={tabIndex === 0 ? 1 : 0}
                >
                  <Text
                    fontFamily={"Roca Two"}
                    as={"h1"}
                    fontSize={42}
                    fontWeight={"bold"}
                  >
                    Higher returns
                  </Text>
                  <Text as={"p"} fontSize={"lg"} fontWeight={"500"}>
                    We invest smart. From real estate to private equity, Tanami
                    invests alongside global managers with a proven track record
                    of consistent outperformance.
                  </Text>
                </Box>
                <Box
                  position={"absolute"}
                  top={0}
                  transition={"0.5s all"}
                  as="span"
                  opacity={tabIndex === 1 ? 1 : 0}
                >
                  <Text
                    fontFamily={"Roca Two"}
                    as={"h1"}
                    fontSize={42}
                    fontWeight={"bold"}
                  >
                    Expert Diligence
                  </Text>
                  <Text as={"p"} fontSize={"lg"} fontWeight={"500"}>
                    We understand investments. From real estate to private
                    equity, Tanami invests alongside global managers with a
                    proven track record of consistent outperformance.
                  </Text>
                </Box>
                <Box
                  position={"absolute"}
                  top={0}
                  transition={"0.5s all"}
                  as="span"
                  opacity={tabIndex === 2 ? 1 : 0}
                >
                  <Text
                    fontFamily={"Roca Two"}
                    as={"h1"}
                    fontSize={42}
                    fontWeight={"bold"}
                  >
                    Low Minimums
                  </Text>
                  <Text as={"p"} fontSize={"lg"} fontWeight={"500"}>
                    We make it easy. From real estate to private equity, Tanami
                    invests alongside global managers with a proven track record
                    of consistent outperformance.
                  </Text>
                </Box>

                <Button
                  backgroundColor={"#002F0F"}
                  color={"#fff"}
                  ps={8}
                  pe={8}
                  pb={1}
                  rounded={"xl"}
                  mt={"180px"}
                  size={"lg"}
                  fontSize={"md"}
                  _hover={{
                    backgroundColor: "#002F0F",
                    transform: "translateY(-6px)",
                  }} // Ensuring hover background color remains the same
                  transition={"0.5s all"}
                >
                  Get Started <ArrowForwardIcon ms={2} />
                </Button>
              </Box>
            </Box>
          </Box>
        </Box>
      </Container>

      <Image position={"absolute"} top={20} w={200} src={asset2} />
    </Box>
  );
};

export default InvestmentPlatform;
