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

function Oil_info() {
    const oilinfotitle = useBreakpointValue({
        base: "/images/mboilinfotitle.webp",
        sm: "/images/mboilinfotitle.webp",
        md: "/images/oilinfotitle.webp",
    });

    const oilinfogroup = useBreakpointValue({
        base: "/images/mboilinfogroup.webp",
        sm: "/images/mboilinfogroup.webp",
        md: "/images/pcoilinfogroup.webp",
    });


    // Animation controls for the header section
    const headerControls = useAnimation();
    const headerRef = useRef(null);
    const headerInView = useInView(headerRef, { once: true, amount: 0.3 });

    // Animation controls for the footer group image
    const footerControls = useAnimation();
    const footerRef = useRef(null);
    const footerInView = useInView(footerRef, { once: true, amount: 0.3 });

    // Trigger animations when elements come into view
    useEffect(() => {
        if (headerInView) {
            headerControls.start({
                opacity: 1,
                y: 0,
                transition: { duration: 0.8, ease: "easeOut" }
            });
        }
    }, [headerInView, headerControls]);

    useEffect(() => {
        if (footerInView) {
            footerControls.start({
                opacity: 1,
                y: 0,
                transition: { duration: 0.8, ease: "easeOut" }
            });
        }
    }, [footerInView, footerControls]);

    // const formatText = (text: string) => {
    //     return text.split('\n').map((line, i) => (
    //         <Box key={i}
    //             color={'white'}
    //             fontSize='8px'
    //             mt={-2}
    //             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 (
        <Stack
            position="relative"
            w="100%"
            overflow="hidden"
            bgColor={'#4E8C34'}
        >
            <Stack>
                <Flex

                    direction="column"
                    bgImage={"url('/images/oilinfobg.webp')"}
                    bgSize="cover"
                    backgroundPosition="center"
                    bgRepeat="no-repeat"
                    w='100%'
                    h='300px'
                >
                    <Flex
                        mt={{ base: 10, sm: 10, md: 10 }}
                        justify={"center"}
                        align={"center"}
                    >
                        <Stack
                            w={{ base: '75%', sm: '75%', md: '300px' }}
                            h='auto'
                            alignItems={"center"}
                            justify={"center"}
                            align={"center"}
                        >
                            <Image src="/images/oilinfoheadertitle.webp"
                                fit='contain'
                                w='100%'
                                h='auto'
                                loading="lazy"
                            ></Image>
                        </Stack>
                        <Stack
                            display={{ base: 'none', sm: 'none', md: 'flex' }}
                            w='500px'
                            align={"flex-end"}
                            justify={"center"}
                        >
                            <Text
                                color='white'
                                className='NotoSansCJKtc font-regular'
                                mb={10}
                                lineHeight={1.5}
                                fontSize={'lg'}
                            >
                                {"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及 Omega-3、6、9 攝取失衡。研究顯示，當人體吸收過多Omega-6，發炎風險可增 3 倍，無形中加重心血管負擔。"}
                            </Text>
                        </Stack>
                    </Flex>
                </Flex>
            </Stack>

            {/* Rest of the component remains the same until the footer image */}

            <Stack
                display={{ base: 'flex', sm: 'flex', md: 'none' }}
                mt={{ base: "-40px", sm: 0, md: 0 }}
                w="100%"
                align={"center"}
            >
                <Text
                    w="80%"
                    color='white'
                    className='NotoSansCJKtc font-regular'
                    lineHeight={1.5}
                    fontSize={'lg'}
                >
                    {"市場上食油選擇繁多，卻缺少一款真正符合人體對脂肪酸需求的「黃金比例」食油。長期依賴單一油種（如橄欖油、葵花籽油），可能導致脂肪酸及 Omega-3、6、9 攝取失衡。研究顯示，當人體吸收過多Omega-6，發炎風險可增 3 倍，無形中加重心血管負擔。"}
                </Text>
            </Stack>

            <Stack
                w='100%'
                gap={0}
                align='center'
            >
                <Flex
                    w={{ base: '80%', sm: '80%', md: "100%" }}
                    justify={{ base: 'flex-start', sm: 'flex-start', md: 'center' }}
                    display={{ base: 'flex', sm: 'flex', md: 'none' }}
                >
                    <Image src={oilinfotitle}
                        w='400px'
                        mt={{ base: 2, sm: 2, md: -12 }}
                        loading="lazy"
                    />
                </Flex>

                <Flex
                    mt={{ base: 0, sm: 0, md: "-60px" }}
                    direction={{ base: 'column', sm: 'column', md: 'row' }}
                    gap={3}
                    align={"center"}
                >
                    <Image src="/images/oilinfooil.webp"
                        w={{ base: '70%', sm: '80%', md: '350px' }}
                        loading="lazy"
                    />
                    <Stack
                        justify={"center"}
                        w={{ base: '80%', sm: '80%', md: '400px', lg: '500px' }}
                    >
                        {/* <Stack
                            display={{ base: 'flex', sm: 'flex', md: 'none' }}
                        >
                            {formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
                            ^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
                        </Stack> */}

                        <Stack
                            display={{ base: 'none', sm: 'none', md: 'flex' }}
                        >
                            <Image src='/images/oilinfotitle.webp'
                                w='500px'
                                loading="lazy"
                            />
                        </Stack>

                        <Text
                            w={{ base: '100%', sm: '100%', md: '400px', lg: '450px' }}
                            color='white'
                            ml = {1}
                            className='NotoSansCJKtc font-medium'
                            mb={10}
                            lineHeight={1.5}
                            fontSize={'lg'}
                        >
                            <Box  as="span" className='NotoSansCJKtc font-xbold' display="inline">獅球嘜營萃護心油，</Box>
                            {"根據世界衛生組織建議之黃金比例脂肪酸調製，有助調節膽固醇，保護心血管健康，並預防與飲食相關的慢性疾病。"}
                        </Text>
                        {/* <Text
                            color='white'
                            className='NotoSansCJKtc font-medium'
                            mb={10}
                            lineHeight={1.5}
                            fontSize={'lg'}
                        >
                            {"獅球嘜「營萃護心油」採用黃金比例調配，讓每一滴都成為心血管的隱形防護網。"}
                        </Text> */}
                        {/* <Stack
                            display={{ base: 'none', sm: 'none', md: 'flex' }}
                            mt={-5}>
                            {formatText(`*營萃護心油成分含世界衛生組織建議之人體每日脂肪酸攝取比例，其Omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎、抗氧化的能力，維持心血管健康。
                            ^根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算`)}
                        </Stack> */}
                    </Stack>
                </Flex>
            </Stack>

            <Flex
                direction="column"
                bgImage={"url('/images/oilinfofooterbg.webp')"}
                bgSize="cover"
                backgroundPosition="center"
                bgRepeat="no-repeat"
                w='100%'
                h='auto'
            >
                <Stack
                    w='100%'
                    mb={10}
                    align={"center"}
                    ref={footerRef}
                >
                    <motion.div
                        initial={{ opacity: 0, y: 50 }}
                        animate={footerControls}
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            width: '100%'
                        }}

                    >
                        <Image
                            src={oilinfogroup}
                            w={{ base: "80%", sm: "80%", md: '500px' }}
                            loading="lazy"
                        />
                    </motion.div>
                </Stack>
            </Flex >
        </Stack >
    );
}
export default Oil_info;
