import { Box, Button, Container, Image, Text } from "@chakra-ui/react";
import React from "react";
import underline from "../assets/underline.png";
import heroImage from "../assets/heroImage.png";


import apple from "../assets/apple.png";
import playstore from "../assets/playstore.png";
import { OPACITY_ON_LOAD } from "../Layout/animations";

const Hero = () => {
  return (
    <Box {...OPACITY_ON_LOAD} h={"100vh"}>
      <Container
        display={"flex"}
        maxW="container.xl"
        h={"100%"}
        
      >
        <Box w={"50%"} display={'flex'} flexDirection={'column'} gap={6} justifyContent={'center'} p={10} h={"100%"}>
          <Text
            as={"h1"}
            color={"#000"}
            fontSize={54}
            fontWeight={"bold"}
            fontFamily={"Roca Two"}
            position={"relative"}
          >
            Access{" "}
            <Text  as={"span"} color="#004118">
              private markets{" "}
            </Text>
            today{" "}
            <Image src={underline} position={'absolute'} width={'300px'} right={20} bottom={10} />
          </Text>

          <Text as={"span"} fontSize={"1.1rem"} fontWeight={500}>
            Tanami provides Shariah-compliant global private investments
            alongside world class managers, simplified through an app.
          </Text>

          <Box display={'flex'} gap={4}>
            <Button
              display={"flex"}
              alignItems={"center"}
              gap={3}
              rounded={"full"}
              backgroundColor={"#002F0F"}
              color={"#fff"}
              ps={8}
              pe={8}
              pb={1}
              fontSize={"md"}
              size={'lg'}

              transition={"0.5s all"}

              _hover={{ backgroundColor: "#002F0F", transform:"translateY(-8px)" }} // Ensuring hover background color remains the same

              
            >
              {" "}
              <Image src={apple} w={5} /> Apps Store
            </Button>

            
            <Button
              display={"flex"}
              alignItems={"center"}
              gap={3}
              rounded={"full"}
              backgroundColor={"#002F0F"}
              color={"#fff"}
              ps={8}
              pe={8}
              pb={1}
              fontSize={"md"}
              size={'lg'}
              transition={"0.5s all"}

              _hover={{ backgroundColor: "#002F0F", transform:"translateY(-8px)" }} // Ensuring hover background color remains the same

            >
              {" "}
              <Image src={playstore} w={5} /> Play Store
            </Button>
          </Box>

          <Text as={"span"} fontSize={"1rem"} color={'gray.500'} >
          Download the app & grow your wealth with Tanami today.
          </Text>
        </Box>

        <Box display={'flex'} justifyContent={'center'} alignItems={'center'} w={"50%"}>
          <Image w={"70%"} src={heroImage}/>
        </Box>
      </Container>
    </Box>
  );
};

export default Hero;
