import { Box, Stack, Image, Text, Flex, SimpleGrid } from '@chakra-ui/react'
import { colors } from '../colors';
import { useEffect, useRef, useState } from 'react';
import { motion, useInView } from 'framer-motion';

// Create motion versions of Chakra components
const MotionStack = motion(Stack);
const MotionImage = motion(Image);
const MotionBox = motion(Box);

function Compare() {
    const compareRef = useRef(null);
    const isInView = useInView(compareRef, { once: true, amount: 0.3 });

    return (
        <Box
            ref={compareRef}
            w="100%"
            position="relative"
        >
            <SimpleGrid columns={2}
                maxW="full"
                h={{ base: '140vw', sm: '140vw', md: '120vw', lg: '50vw', xl: '55vw' }}
                mb="20px" // Add 20px bottom margin
                position="relative"
                zIndex="1"
            >
                <Stack
                    position="relative"
                    w="100%"
                    h="100%"
                    bgImage={`
                        linear-gradient(to bottom, 
                            rgba(255, 251, 210, 1) 4%, 
                            rgba(255, 251, 210, 0.1) 10%),
                        url(/images/bgyellow.jpg)
                    `}
                    bgSize="cover"
                    bgPos="center"

                >
                    <Box bgColor="rgba(255, 251, 210, 0.4)" w="100%" h="100%" />
                    {/* Content container with z-index to appear above the background */}
                </Stack>
                <Stack
                    w="100%"
                    h="100%"
                    bgImage="linear-gradient(to bottom, #FFFBD2 4%, #E1E1E2 10%)"
                >
                    {/* Content here */}
                    <MotionImage
                        src='/images/conpareheart.png'
                        width={{
                            base: '95%', sm: '90% ', md: '80% ', lg: '35% '
                        }}
                        position="absolute"
                        top="0%"
                        left="50%"
                        transform="translateX(-51%)"
                        zIndex="1"
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        viewport={{ once: true }}
                        transition={{ duration: 1.5 }}
                    />
                </Stack>
            </SimpleGrid>

            {/* Use a larger negative margin to pull the flex up into the grid area */}
            <Flex
                direction="column"
                justify="center"
                align="center"
                width="100%"
                mt={{ base: '-25vw', sm: '-25vw', md: '-20vw', lg: '-10vw' }}
                position="relative"
                zIndex="2"
            >
                <MotionImage
                    src="/images/bigheart.png"
                    width={{
                        base: '100%%', sm: '95% ', md: '80% ', lg: '35% '
                    }}
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    viewport={{ once: true }}
                    transition={{ duration: 1.5 }}
                />
            </Flex>
        </Box>
    )
}
export default Compare;