healthy_oil/src/components/bestoil.tsx

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

// Create motion components from Chakra components
const MotionBox = motion(Box);
const MotionStack = motion(Stack);


function Bestoil() {
    const cook = useBreakpointValue({
        base: "/images/cook_mb.webp",
        sm: "/images/cook_mb.webp",
        md: "/images/cook_pc.webp",
    });

    // Create refs for elements we want to animate
    const bestOilRef = useRef(null);
    const oilChartRef = useRef(null);
    const cookRef = useRef(null);
    const oilCubesRef = useRef(null);

    // Check if elements are in view

    const isCookInView = useInView(cookRef, { once: true });
    const isOilCubesInView = useInView(oilCubesRef, { once: true });

    const oilCube = [
        {
            bgColor: 'linear-gradient(to right,#00609E ,#008FD0,#00609E )',
            title: '米糠油',
            text: '含天然谷維素，具抗氧化作用，有助維持血管健康'
        },
        {
            bgColor: 'linear-gradient(to right,#D44E2D ,#EAA72E,#D44E2D )',
            title: '芥花籽油',
            text: '富含多元不飽和脂肪Omega-3、6，有助降低心血管疾病風險'
        },
        {
            bgColor: 'linear-gradient(to right,#7DAE3A ,#AFC226,#7DAE3A )',
            title: '橄欖油',
            text: '富含單元不飽和脂肪酸Omega-9，有助保護心臟健康'
        },
        {
            bgColor: 'linear-gradient(to right,#0098D2 ,#00AFE6,#0098D2 )',
            title: '亞麻籽油',
            text: '是亞麻酸(Omega-3) 的良好來源，有助維持細胞健康'
        },
        {
            bgColor: 'linear-gradient(to right,#D23431 ,#E28C24,#D23431 )',
            title: '高油酸葵花籽油',
            text: '低飽和脂肪，穩定性高，適合高溫烹調'
        },
    ]

    return (
        <Stack
            position="relative"
            w="100%"
            overflow="hidden"
            bgColor={colors.backgroundColor}
        >
            <Flex
                w='100%'
                justify={"center"}
                align={"center"}
                direction={{ base: "column", sm: "column", md: "row" }}
            >

                <Image src="/images/best5.webp"
                    fit='contain'
                    w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
                />




                <Image src="/images/oilchart.webp"
                    fit='contain'
                    w={{ base: "80%", sm: "90%", md: '350px', lg: '500px' }}
                />

            </Flex>

            <Stack
                w='100%'
                align={"center"}
            >
                <MotionBox
                    ref={cookRef}
                    initial={{ opacity: 0, y: 50 }}
                    animate={isCookInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
                    transition={{ duration: 0.8 }}
                    justifyItems={"center"}
                >
                    <Image src={cook}
                        w={{ base: "80%", sm: "80%", md: '600px' }}
                        fit='contain'
                    />
                </MotionBox>

                <Text
                    w={{ base: "90%", sm: "90%", md: '600px' }}
                    fontSize={'lg'}
                    className='NotoSansCJKtc font-regular'
                    color={colors.textColor}
                    textAlign={"center"}>
                    {"不同食油的脂肪酸組合各有優勢，而長期使用單一油種則可能令營養失衡。營萃護心油融合5種優質食油，發揮更全面的健康效益："}
                </Text>

                <Box
                    width="100%"
                    display="flex"
                    flexDirection={{ base: "row", sm: "row", md: "column" }}
                    alignItems="center"
                    mt={5}
                    ref={oilCubesRef}
                >
                    <Flex flexWrap="wrap" justifyContent="center" gap="15px" maxWidth="945px">
                        {oilCube.map((item, index) => (
                            <MotionStack
                                key={index}
                                initial={{ opacity: 0, scale: 0.8 }}
                                animate={isOilCubesInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                                transition={{ duration: 0.5, delay: index * 0.15 }}
                                w='300px'
                                h='110px'
                                bgImage={item.bgColor}
                                roundedTopLeft={'30px'}
                                roundedBottomRight={'30px'}
                                p={4}
                                justify="center"
                            >
                                <Text
                                    color="white"
                                    className='font-melle font-black'
                                    fontSize="2xl"
                                    mb={-1}
                                >
                                    {item.title}
                                </Text>
                                <Text
                                    color={colors.backgroundColor}
                                    className='font-melle font-medium'
                                    mt={-1}
                                >
                                    {item.text}
                                </Text>
                            </MotionStack>
                        ))}
                    </Flex>
                </Box>

                <Text
                    w={{ base: "90%", sm: "90%", md: '700px' }}
                    fontSize={'lg'}
                    my={5}
                    className='NotoSansCJKtc font-regular'
                    color={colors.textColor}
                    textAlign={"center"}>
                    {"選擇「營萃護心油」，助你和家人攝取理想脂肪酸比例，食得安心，護心更放心！"}
                </Text>
            </Stack>
        </Stack>
    )
}

export default Bestoil