<template>
	<section class="section-footer">
		<div class="footer">
			<div class="left">
				<div>{{ $t('footer.About') }}</div>
				<div>{{ $t('footer.PrivacyPolicy') }}</div>
				<div>{{ $t('footer.TermsOfUse') }}</div>
				<div>{{ $t('footer.Disclaimer') }}</div>	
				<div>{{ $t('footer.SiteMap') }}</div>
			</div>
			<div class="right">
				<img src="@/assets/images/icons/xiaohongshu.png" @click="skip('xiaohongshu')" />
				<img src="@/assets/images/icons/linkedin.png" @click="skip('linkedin')" />
				<img src="@/assets/images/icons/instagram.png" @click="skip('instagram')" />
				<img src="@/assets/images/icons/facebook.png" @click="skip('facebook')" />
				<img src="@/assets/images/icons/douyin.png" @click="skip('tiktok')" />
				<img src="@/assets/images/icons/youtube.png" @click="skip('youtube')" />
				<div class="text" @click="skip('code-create')">© Code-Create 2026</div>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	let urlList = ref({
		xiaohongshu: 'https://xhslink.com/m/5Ony2FapizV',
		linkedin: 'https://www.linkedin.com/company/code-create-limited/posts?feedView=all',
		instagram: 'https://www.instagram.com/aida_codecreate?igsh=MzRlODBiNWFlZA==  ',
		facebook: 'https://www.facebook.com/CodeCreateAI',
		tiktok: 'https://www.tiktok.com/@aida_codecreate',
		youtube: 'https://www.youtube.com/@Code-Create_AiDA',
		'code-create': 'https://www.code-create.com/',
	})
	const skip = (name: string) => {
		window.open(urlList.value[name], '_blank')
	}
</script>

<style lang="less">
	.section-footer {
		background-color: #f6f6f6;
		border-top: 0.1rem solid #232323;
		> .footer {
			padding: 0 9rem;
			height: var(--footer-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			> .left {
				font-family: KaiseiOpti-Regular;
				font-size: 1.4rem;
				color: #585858;
				display: flex;
				gap: 4.5rem;
			}
			> .right {
				display: flex;
				align-items: center;
				> img {
					width: 2rem;
					height: 2rem;
					margin-left: 2rem;
				}
				.text{
					margin-left: 4rem;
					font-family: KaiseiOpti-Regular;
					font-size: 1.2rem;
					color: #585858;
				}
			}
		}
	}
</style>
