import { Box, Image, Text, Flex, Accordion } from '@chakra-ui/react'
import { colors } from '../colors';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
const MotionBox = motion(Box);
const questions = [
    {
        image: '/images/q1.png',
        question: "煮餸落少啲油，甚至唔落油就等於健康？",
        answer: "錯！油脂是身體合成荷爾蒙的重要材料，若完全不攝取油脂，可能會導致皮膚變乾、容易脫髮，對女生來說更可能影響生理週期。簡單來說，身體需要「好脂肪」來幫助吸收營養，適量攝取優質油脂更有助維持細胞健康！"
    },
    {
        image: '/images/q2.png',
        question: "用橄欖油煮食就一定最健康？",
        answer: "未必！橄欖油雖富含單元不飽和脂肪酸如Omega-9，但人體可自行合成，而其 Omega-3 和 Omega-6 含量偏低，脂肪酸比例並不均衡，對小孩及孕婦來說，長期單一使用可能無法滿足他們對營養素的需求。而初榨橄欖油煙點低（約190°C），高溫煮食容易產生有害物質，反成健康負擔。"
    },
    {
        image: '/images/q3.png',
        question: "使用單一油種的食用油較好？",
        answer: "未必！ 長期只用一種食油，猶如「偏食」，容易導致脂肪酸攝取失衡，影響健康。不同食油各有優缺點，例如米糠油、橄欖油、葵花籽油Omega-3偏低，不適合發育中的小孩、孕婦及哺乳中的婦女長期單一使用；初榨橄欖油與初榨亞麻籽油不耐高溫；花生油與牛油果油的飽和脂肪偏高，增加心血管堵塞的風險。"
    },
    {
        image: '/images/q4.png',
        question: "貴價油 = 健康油？",
        answer: `錯！健康關鍵在於「脂肪酸比例」，而非價格！
不同脂肪酸對健康影響各異：
	•	單元不飽和脂肪酸（MUFA / 例如Omega-9） – 有助降低壞膽固醇。
	•	多元不飽和脂肪酸（PUFA / 例如Omega-3、6） – 為人體必需脂肪酸，身體不能合成製造，必須從食物中吸收；但人體無法自行合成，需攝取適當比例，Omega-6 過多會造成身體慢性發炎1
	•	飽和脂肪（SFA） – 過量攝取會提升壞膽固醇，影響心血管健康。`
    },
    {
        image: '/images/q5.png',
        question: "食油種類太多，點揀先唔會中伏？",
        answer: `市面上的食油種類繁多，從花生油、粟米油、芥花籽油、橄欖油、米糠油到牛油果油，每種油都有不同的營養價值和適用範圍。要選擇真正健康和適合日常使用的食油，只需記住 3 個關鍵原則：

看煙點：高溫煎炸選用煙點高於200°C的食油，可減少有害物質產生
看脂肪酸比例：單元不飽和脂肪酸（MUFA）與多元不飽和脂肪酸（PUFA）比例，確保均衡攝取營養
看認證：符合國際營養機構推薦，如世界衛生組織（WHO）建議的脂肪酸攝取比例`
    }
]

function Qa() {
    const formatText = (text: string, questionIndex: number) => {
        const boldPhrases = ["錯！", "未必！", "	•	單元不飽和脂肪酸", "	•	多元不飽和脂肪酸", "	•	飽和脂肪", "看煙點：", "看脂肪酸比例：", "看認證："];

        return text.split('\n').map((line, i) => {
            const matchingPhrase = boldPhrases.find(phrase => line.startsWith(phrase));
            const hasBoldPhrase = !!matchingPhrase;
            const boldPart = hasBoldPhrase ? matchingPhrase : "";
            const restOfLine = hasBoldPhrase ? line.substring(matchingPhrase.length) : line;

            return (
                <Box key={i}
                    color={colors.textColor}
                    fontSize='lg'
                    ml={1}
                    className='font-noto-sans font-regular'
                >
                    {hasBoldPhrase && (
                        <Text as="span" className='font-noto-sans font-black'>
                            {boldPart}
                        </Text>
                    )}
                    {restOfLine.split('\t').map((segment, j) => {
                        // Special handling for superscript in question index 3
                        if (questionIndex === 3) {
                            const parts = segment.split(/(\d+)$/);
                            if (parts.length > 1) {
                                return (
                                    <Text as="span" ml={j === 0 ? 0 : 4} key={j}>
                                        {parts[0]}
                                        <Text as="sup" fontSize="xs">{parts[1]}</Text>
                                    </Text>
                                );
                            }
                        }
                        return (
                            <Text as="span" ml={j === 0 ? 0 : 4} key={j}>
                                {segment}
                            </Text>
                        );
                    })}
                    {i < text.split('\n').length - 1 && <br />}
                </Box>
            );
        });
    };


    return (
        <Box
            w="100%"
            position="relative"
        >
            <Accordion.Root variant="plain" multiple={true} >
                {questions.map((item, index) => {
                    // Create a ref for each question item
                    const questionRef = useRef(null);
                    // Use useInView with once:true to trigger animation only once when scrolled into view
                    const isInView = useInView(questionRef, {
                        once: true,  // Only trigger once
                        amount: 0.3  // Trigger when 30% of element is in viewport
                    });

                    return (
                        <MotionBox
                            ref={questionRef}
                            key={index}
                            initial={{ opacity: 0, y: 30 }}
                            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                            transition={{
                                duration: 0.6,
                                delay: index * 0.15,
                                ease: "easeOut"
                            }}
                        >
                            <Accordion.Item value={item.question} width={'full'} bgColor='white'>
                                <Accordion.ItemTrigger
                                    _hover={{
                                        boxShadow: 'none',
                                        outline: 'none',
                                        border: 'none'
                                    }}
                                    _focus={{
                                        boxShadow: 'none',
                                        outline: 'none',
                                        border: 'none'
                                    }}
                                    _active={{
                                        boxShadow: 'none',
                                        outline: 'none',
                                        border: 'none'
                                    }}
                                    bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'} height='auto'
                                    justifyContent='center'
                                    w='full'
                                    alignItems={'center'}>
                                    <Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}
                                        direction={{ base: 'column', sm: "column", md: 'row' }}
                                        marginY={4}
                                    >
                                        <Flex w={{ base: '15%', sm: '15%', md: '10%', lg: '10%', xl: '10%' }}
                                            justifyContent={{ base: 'flex-start', sm: 'flex-start', md: 'flex-end' }}
                                            alignItems='center'>
                                            <Image src={item.image}
                                                mt={2.5}
                                                mr={{ base: 0, sm: 0, md: 1.5 }}
                                                w={{ base: '70px', sm: '70px', md: '45px', lg: '45px', xl: '45px' }}
                                            />
                                        </Flex>
                                        <Flex w='90%'
                                            alignItems={'center'}>
                                            <Text
                                                color={colors.textColor}
                                                fontSize='2xl'
                                                className='font-noto-sans font-black'
                                            >{item.question}</Text>
                                        </Flex>
                                    </Flex>
                                </Accordion.ItemTrigger>
                                <Accordion.ItemContent>
                                    <Accordion.ItemBody
                                        bgColor={index % 2 == 0 ? 'white' : '#FBFCF3'}
                                        justifyItems={'center'}>
                                        <Flex w={{ base: '95%', sm: '95%', md: '80%', lg: '70%', xl: '50%' }}>
                                            <Flex w={{ base: '3%', sm: '2%', md: '10%', lg: '10%', xl: '10%' }}
                                                justifyContent={{ base: 'flex-start', sm: 'flex-start', md: 'flex-end' }}
                                                alignItems='center'>
                                            </Flex>
                                            <Flex w={{ base: '97%', sm: '98%', md: '90%', lg: '90%', xl: '90%' }}
                                                direction={'column'}>
                                                {formatText(item.answer, index)}
                                                {index == 3 ? (
                                                    <Text mt={5} color={colors.textColor} fontSize={'xs'} className='font-noto-sans font-regular'>
                                                        <Box as="sup" fontSize="0.6em" mr="1px">1</Box>
                                                        {" Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。"}
                                                    </Text>
                                                ) : (<Flex />)}
                                            </Flex>
                                        </Flex>
                                    </Accordion.ItemBody>
                                </Accordion.ItemContent>
                            </Accordion.Item>
                        </MotionBox>
                    );
                })}
            </Accordion.Root>
        </Box>
    );
}
export default Qa;