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


// Create motion versions of Chakra components

const MotionImage = motion(Image);

// const statement = `*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
//                    ^Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。
//                    此產品沒有根據《藥劑業及毒藥條例》或《中醫藥條例》註冊，為此產品作出的任何聲稱亦沒有為進行該等註冊而接受評核，此產品並不供作診斷、治療或預防任何疾病之用。`

function Compare() {
    const compareRef = useRef(null);

    // const formatText = (text: string) => {
    //     return text.split('\n').map((line, i) => (
    //         <Box key={i}
    //             color={colors.textColor}
    //             fontSize='10px'
    //             mx={5}
    //             className='font-noto-sans font-regular'
    //         >
    //             {line.split('\t').map((segment, j) => (
    //                 j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
    //             ))}
    //             {i < text.split('\n').length - 1 && <br />}
    //         </Box>
    //     ));
    // };

    return (
        <Box
            ref={compareRef}
            w="100%"
            position="relative"
        >
            <SimpleGrid columns={2}
                maxW="full"
                h={{ base: '140vw', sm: '130vw', md: '120vw', lg: '50vw', xl: '50vw' }}
                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/compareheart.webp'
                        width={{
                            base: '95%', sm: '90% ', md: '80% ', lg: '35% '
                        }}
                        position="absolute"
                        loading="lazy" 
                        top="0%"
                        left="50.1%"
                        transform="translateX(-51%)"
                        zIndex="1"
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        viewport={{ once: true }}
                        transition={{ duration: 1.5 }}
                    />
                    <Box
                        width={'full'}
                        justifyItems={'center'}
                        position="absolute"
                        bottom="17%"
                        left="50%"
                        transform="translateX(-51%)"
                        zIndex="1"
                    >
                        {/* <Box
                            w='auto'
                            h='auto'>
                            {formatText(statement)}
                        </Box> */}

                    </Box>
                </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.webp"
                    width={{
                        base: '100%%', sm: '95% ', md: '80% ', lg: '35% '
                    }}
                    loading="lazy" 
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    viewport={{ once: true }}
                    transition={{ duration: 1.5 }}
                />
            </Flex>
        </Box>
    )
}
export default Compare;