import { Box, Stack, SimpleGrid, Image as ChakraImage, Flex, useBreakpointValue } from '@chakra-ui/react'

import { motion } from 'framer-motion'
function Hero1() {
    const MotionImage = motion(ChakraImage);
    const oilImage = useBreakpointValue({
        base: "/images/lionglobe_product_mobile.webp",
        sm: "/images/lionglobe_product_pc.webp",

    });
    return (
        <Box
            position="relative"
            w="100%"
            alignItems={"center"}
            justifyContent={"center"}
            overflow="hidden"

        >
            <Box
                overflow="hidden"
                position="absolute"
                width="100%"
                height="100%"
                //top={{ base: "-3%", sm: "-3%" }}
                left="0"
                display="flex"
                alignItems="center"
                justifyContent="center"
                pointerEvents="none"
                zIndex="1"
            >
                <MotionImage
                    src={oilImage}
                    objectFit="contain"
                    marginTop={{ base: "30vw", sm: "5vw", md: "5vw", lg: "0vw", xl: "0vw" }}
                    marginRight={{ base: "20vw", sm: "0vw", md: "0vw", lg: "0vw", xl: "0vw" }}
                    height={{ base: "85vw", sm: "45vw", md: "32vw", lg: "25vw", xl: "25vw" }}
                    maxW="100%" // Prevents the image from being too wide
                    // Adjust vertical position as needed
                    pointerEvents="none"
                    initial={{ opacity: 0, x: -100 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.8, ease: "easeOut" }}
                />
            </Box>
            <Stack gap={0} >
                <Box
                    overflow="hidden"
                    position="relative"
                    w="100%"
                    bgImage={"url('/images/background.jpg')"}
                    bgSize="cover"
                    backgroundPosition="center"
                    bgRepeat="no-repeat"
                    h={{ base: "125vw", sm: "70vw", md: "50vw", lg: "40vw", xl: "35vw" }}

                >
                    <SimpleGrid columns={{ base: 1, sm: 2, md: 2, lg: 2, xl: 2 }} marginTop={10}  >
                        <Flex
                            justify={{ base: "center", sm: "flex-end", md: "flex-end", lg: "flex-end", xl: "flex-end" }}
                            align={"flex-start"}
                            h="fit-content" // or a specific height
                            alignSelf="flex-start" // This constrains the Flex to its content height
                        >
                            <MotionImage src="/images/text1.webp"
                                width={{ base: "90%", sm: "80%", md: "70%", lg: "70%", xl: "60%" }}
                                fit="contain"
                                h="auto"
                                marginRight={{ sm: "-10%", md: "-10%", lg: "-10%", xl: "-10%" }}
                                marginTop={{ base: 0, sm: 5, md: 5, lg: 5, xl: 5 }}
                                initial={{ opacity: 0, x: -100 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.8, ease: "easeOut" }} />

                        </Flex>
                        <Flex

                            overflow="hidden"
                            h="auto"
                            alignItems={{ base: "flex-end", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
                            justifyContent={{ base: "center", sm: "flex-start", md: "flex-start", lg: "flex-start", xl: "flex-start" }}
                        >
                            <MotionImage
                                src="/images/peoples.webp"
                                h={{ base: "120vw", sm: "70vw", md: "50vw", lg: "50vw", xl: "50vw" }}
                                // maxH={"50%"}
                                marginRight={{ base: "-30%", sm: "0", md: "0", lg: "0", xl: "0" }}
                                objectFit="cover"
                                initial={{ opacity: 0, y: 50 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.8, ease: "easeOut" }}
                            />
                        </Flex>

                    </SimpleGrid>

                </Box>
                <Box
                    position="relative"
                    h={{ base: "30vw", sm: "30vw", md: "30vw", lg: "30vw", xl: "20vw" }}
                    w="100%"
                    bgImage={"url('/images/woodtable.webp')"}
                    bgSize="cover"
                    backgroundPosition="center"
                    justifyContent={"center"}
                    alignSelf={"center"}
                    bgRepeat="no-repeat"

                >

                </Box>
            </Stack>

        </Box>
    );
} export default Hero1;