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

const footerText = `*獅球嘜品牌產品系列中首次推出之護心食用油
+根據世界衛生組織建議每日人體脂肪酸攝取黃金比例而調製，配方以每日25%的總攝取能量計算
#每食用分量含0克反式脂肪
▲Omega-6不飽和脂肪酸在體內代謝會產生花生四烯酸，進而產生促發炎的前列腺素，導致血管收縮及慢性發炎
▼營萃護心油的omega-3比例較一般花生油、粟米油高，特別有助平衡外出用餐多的都市人其身體脂肪酸比例，增加抗發炎，維持心血管健康`
function Footer() {

    const formatText = (text: string) => {
        return text.split('\n').map((line, i) => (
            <Box key={i}
                className='font-noto-sans font-regular'
                color={colors.textColor}
                fontSize={'10px'}
                ml={2}
            >
                {line.charAt(0).match(/[\*\^\▲\+\▼\#]/) ? (
                    <>
                        <Text as="span" fontSize="6px" verticalAlign="super">{line.charAt(0)}</Text>
                        {line.substring(1).split('\t').map((segment, j) => (
                            j === 0 ? segment : <Text as="span" ml={4} key={j}>{segment}</Text>
                        ))}
                    </>
                ) : (
                    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 currentYear = new Date().getFullYear();
    return (
        <Stack bg={colors.topBarColor} py={5} w="full"
            align={'center'}
        >
            <Text
                className='font-melle font-xbold'
                fontSize={'4xl'}
                color={'white'}
            >
                {"查詢：29437810"}
            </Text>
            <Flex alignItems={'center'} justifyContent={'center'} direction="column">
                <Image src="/images/header_logo.webp" alt="Logo" width="150px" />

            </Flex>
            <Flex
                alignItems={'flex-end'}
                w={{ base: '100%', sm: '100%', md: '60%', lg: '55%', xl: '55%' }}
                h={{ base: '180px', sm: '180px', md: '130px' }}

            >

                <Stack gap={0}
                    position={'absolute'}
                    bottom={1}
                >
                    {formatText(footerText)}
                    <Text
                        className='font-noto-sans font-regular'
                        color={colors.textColor}
                        fontSize={'10px'}
                        mt={2}
                        ml={2}
                    >
                        {`Copyright © ${currentYear}合興食油（香港）有限公司 版權所有，不得轉載。`}
                    </Text>
                    {/* <Text
                        className='font-noto-sans font-regular'
                        color={colors.textColor}
                        fontSize={'8px'}

                        ml={2}
                    >
                        {`參考資料 | 台灣營養師張益堯在節目《奕起聊健康》上分享關於「油脂」的健康  https://bit.ly/3FmZkCo  https://bit.ly/4htQ9gt`}
                    </Text> */}
                </Stack>
            </Flex>
        </Stack>
    );
}

export default Footer;