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

const MotionImage = motion.create(Image)

function Hero2() {
    return (
        <Box
            position="relative"
            w="100%"
            alignItems={"center"}
            justifyContent={"center"}

        >
            <Stack gap={0}>
                <Stack
                    position="relative"
                    w="100%"
                    minH={{ base: "110vw", sm: "110vw", md: "72vw", lg: "66vw", xl: "50vw" }}
                    bgImage={"url('/images/new/hero2bg.webp')"}
                    bgSize="cover"
                    backgroundPosition="center"
                    justifyItems={'center'}
                    bgRepeat="no-repeat"

                >

                    <MotionImage
                        src="/images/new/hero2title.webp"
                        position={'absolute'}
                        left="50%"
                        top={{ base: "10px", sm: "20px", md: "30px", lg: "30px", xl: "40px" }}
                        w={{ base: "70vw", sm: "70vw", md: "35vw", lg: "35vw", xl: "28vw" }}
                        initial={{ opacity: 0, y: -30, x: '-50%' }}
                        whileInView={{ opacity: 1, y: 0, x: '-50%' }}
                        viewport={{ once: true, amount: 0.3 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                    />
                    <MotionImage
                        src="/images/new/hero2subtitle.webp"
                        position={'absolute'}
                        zIndex={1}
                        top={{ base: "30vw", sm: "30vw", md: "17vw", lg: "15vw", xl: "12vw" }}
                        right={{ base: "55vw", sm: "55vw", md: "24vw", lg: "25vw", xl: "30vw" }}
                        w={{ base: "30vw", sm: "30vw", md: "22vw", lg: "22vw", xl: "18vw" }}
                        initial={{ opacity: 0, x: 30 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true, amount: 0.3 }}
                        transition={{ duration: 0.8, delay: 0.5 }}
                    />

                    <MotionImage
                        src="/images/new/oil_new.webp"
                        zIndex={0}
                        position={'absolute'}
                        left="50%"
                        bottom={0}
                        w={{ base: "85vw", sm: "85vw", md: "58vw", lg: "53vw", xl: "40vw" }}
                        initial={{ opacity: 0, y: 50, x: '-50%' }}
                        whileInView={{ opacity: 1, y: 0, x: '-50%' }}
                        viewport={{ once: true, amount: 0.3 }}
                        transition={{ duration: 0.8, delay: 0.5 }}
                    />

                </Stack>

            </Stack>

        </Box >
    );
}
export default Hero2;