import { Box, Image, Stack, } from '@chakra-ui/react'

function Hero1() {
  const bigWarningSize = { base: "80px", sm: "100px", md: "120px", lg: "9vw", xl: "8vw" };
  const smallWarningSize = { base: "40px", sm: "50px", md: "60px", lg: "6vw", xl: "5vw" };
  return (
    <Box
      position="relative"
      w="100%"
      alignItems={"center"}
      justifyContent={"center"}

    >
      <Stack gap={0}>
        <Box
          position="relative"
          w="100%"
          minH={{ base: "100vh", sm: "100vh", md: "100vh", lg: "70vw", xl: "45vw" }}
          bgImage={"url('/images/new/confuse.webp')"}
          bgSize="cover"
          backgroundPosition="center"
          justifyItems={'center'}
          bgRepeat="no-repeat"
        >
          <Image src="/images/new/hero_text1x.webp"
            position={'absolute'}
            bottom={'100px'}
            maxW={{ base: "90%", sm: "80%", md: "60%", lg: "50vw", xl: "35vw" }}
          />
          <Image src="/images/new/arrow_pc_1.webp"
            position={'absolute'}
            maxW={{ base: "40px", sm: "50px", md: "60px", lg: "70%", xl: "70%" }}
            bottom={'10px'} />
          {/* signs */}
          <Image src="/images/new/bigwarning.webp"
            position={'absolute'}
            w={bigWarningSize}
            left={'20vw'}
            top={'5vw'}
          />
          <Image src="/images/new/bigwarning.webp"
            position={'absolute'}
            w={smallWarningSize}
            left={'25vw'}
            bottom={'18vw'}
          />
          <Image src="/images/new/bigwarning.webp"
            position={'absolute'}
            w={bigWarningSize}
            right={'20vw'}
            top={'25vw'}
          />
          <Image src="/images/new/bigwarning.webp"
            position={'absolute'}
            w={bigWarningSize}
            right={'18vw'}
            top={'10vw'}
          />
          {/* Warning Texts */}
          <Image src="/images/new/threehightext.webp"
            position={'absolute'}
            w={{ base: "100px", sm: "120px", md: "150px", lg: "11vw", xl: "10vw" }}
            left={{ base: "20px", sm: "30px", md: "40px", lg: "30vw", xl: "37vw" }}
            top={{ base: "3vw", sm: "3vw", md: "3vw", lg: "7vw", xl: "3vw" }}
          />
          <Image src="/images/new/fattext.webp"
            position={'absolute'}
            w={{ base: "100px", sm: "120px", md: "150px", lg: "10vw", xl: "9vw" }}
            left={{ base: "25vw", sm: "25vw", md: "25vw", lg: "18vw", xl: "25vw" }}
            top={{ base: "14vw", sm: "14vw", md: "14vw", lg: "20vw", xl: "14vw" }}
          />
          <Image src="/images/new/centerfattext.webp"
            position={'absolute'}
            w={{ base: "100px", sm: "120px", md: "150px", lg: "14vw", xl: "13vw" }}
            right={{ base: "35vw", sm: "35vw", md: "35vw", lg: "34vw", xl: "35vw" }}
            top={{ base: "5vw", sm: "5vw", md: "5vw", lg: "7vw", xl: "5vw" }}
          />
          <Image src="/images/new/hairlosstext.webp"
            position={'absolute'}
            w={{ base: "100px", sm: "120px", md: "150px", lg: "8vw", xl: "7vw" }}
            right={{ base: "26vw", sm: "26vw", md: "26vw", lg: "26vw", xl: "26vw" }}
            top={{ base: "12vw", sm: "12vw", md: "12vw", lg: "18vw", xl: "12vw" }}
          />
        </Box>
      </Stack>
    </Box>
  )
}

export default Hero1;