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 (
{hasBoldPhrase && (
{boldPart}
)}
{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 (
{parts[0]}
{parts[1]}
);
}
}
return (
{segment}
);
})}
{i < text.split('\n').length - 1 &&
}
);
});
};
return (
{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 (
{item.question}
{formatText(item.answer, index)}
{index == 3 ? (
1
{" Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎。"}
) : ()}
);
})}
);
}
export default Qa;