import { Box, Container, Image, Text } from "@chakra-ui/react";
import React from "react";
import pattern from "../assets/pattern.png";
import adImage from "../assets/adImage.png";
import appButton from "../assets/AppStore.png";
import playButton from "../assets/PlayBtn.png";


const Advertising = () => {
  return (
    <Box position={"relative"} h={"90vh"}>
      <Container
        display={"flex"}
        flexDirection={"column"}
        maxW="container.xl"
        h={"100%"}
        p={12}
      >
        <Box
          position={"relative"}
          backgroundImage="linear-gradient(to bottom, #FFFFFF, #C9D9CB)" // Gradient from black to white
          backgroundColor={"#000"}
          height={"100%"}
          rounded={"md"}
          w={"100%"}
          display={"flex"}
        >
          <Box w={"50%"} display={'flex'} alignItems={'start'} flexDirection={'column'} justifyContent={'center'} p={16} zIndex={1}>
            <Text
              as={"h1"}
              fontWeight={"bold"}
              fontFamily={"Roca Two"}
              fontSize={50}
              color="#004118"
            >
              Ready to get started?
            </Text>
            <Text as={"h6"} fontWeight={"500"} fontSize={"xl"} color="#004118">
              Risus habitant leo egestas mauris diam eget morbi tempus
              vulputate.
            </Text>
            <Box display={'flex'} gap={3}>
                <Image src={appButton} h={"48px"} />
                <Image src={playButton} h={"48px"}  />

            </Box>
          </Box>
          <Box w={"50%"} display={"flex"} justifyContent={"center"}>
            <Image src={adImage} w={"90%"} h={"100%"} />
          </Box>

          <Image position={"absolute"} bottom={0} left={0} src={pattern} />
        </Box>
      </Container>
    </Box>
  );
};

export default Advertising;
