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 MotionStack = motion(Stack);

const footerText = `守護您和家人的心臟健康，
食得安心，護心更放心！`


function Bestoil() {

    const formatText = (text: string) => {
        return text.split('\n').map((line, i) => (
            <Box key={i}
                color={colors.textColor}
                lineHeight={1}
                fontSize='4xl'
                textAlign={{ sm: 'flex-start', md: 'center' }}
                className='font-melle font-xbold'
            >
                {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>
        ));
    };
    const cook = useBreakpointValue({
        base: "/images/cook_mb.webp",
        sm: "/images/cook_mb.webp",
        md: "/images/goldandhealthytext.webp",
    });

    // Create refs for elements we want to animate


    const oilCubesRef = useRef(null);

    // Check if elements are in view


    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%'
                gap={0}
                justify={"center"}
                align={"center"}
                direction={{ base: "column", sm: "column", md: "row" }}
            >
                <Stack
                    w={{ base: "70%", sm: "80%", md: '350px', lg: '500px' }}
                    align={"center"}
                    mr={{ base: 0, sm: 0, md: '-80px' }}
                    mt={{ base: 10, sm: 10, md: 0 }}
                >
                    <Image src="/images/best5.webp"
                        fit='contain'
                        loading="lazy"
                    />

                    <Image src='/images/cookmethods.webp'
                        w={'70%'}
                        display={{ base: "none", sm: "none", md: "flex" }}
                        fit='contain'
                        loading="lazy"
                    />
                </Stack>




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

            </Flex>

            <Stack
                w='100%'
                align={"center"}
            >

                <Image src={cook}
                    w={{ base: "80%", sm: "80%", md: '600px' }}
                    fit='contain'
                    loading="lazy"
                />

                <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>

                <Stack
                    w={{ base: "90%", sm: "90%", md: '500px' }}
                    mt={5}
                    align={'center'}
                    mb={20}
                >
                    <Image src={"/images/bestfootertext.webp"}
                        w='100%'
                    >
                    </Image>
                    <Stack mt={-3}
                    >
                        {formatText(footerText)}
                    </Stack>
                </Stack>




            </Stack>
        </Stack>
    )
}

export default Bestoil