<template>
	<div class="site-map">
		<OthersHeader :title="$t('MainFooter.SiteMap')" />
		<div class="content">
			<div>
				<div>
					<router-link to="/about-us"
						><h3>{{ $t('MainHeader.AboutUs') }}</h3></router-link
					>
				</div>
				<div>
					<router-link to="/our-solutions"
						><h3>{{ $t('MainHeader.OurSolutions') }}</h3></router-link
					>
					<router-link to="/aida">{{ $t('MainHeader.AiDA') }}</router-link>
					<router-link to="/mixi">{{ $t('MainHeader.Mixi') }}</router-link>
				</div>
				<div>
					<router-link to="#"
						><h3>{{ $t('MainHeader.Communities') }}</h3></router-link
					>
					<router-link to="/events">{{ $t('MainHeader.Events') }}</router-link>
					<router-link to="/user-stories">{{ $t('MainHeader.UserStories') }}</router-link>
					<router-link to="/help-centre">{{ $t('MainHeader.HelpCentre') }}</router-link>
				</div>
			</div>
			<div>
				<div>
					<router-link to="/contact-us"
						><h3>{{ $t('MainHeader.ContactUs') }}</h3></router-link
					>
				</div>
				<div>
					<router-link to="/media"
						><h3>{{ $t('MainHeader.Media') }}</h3></router-link
					>
				</div>
				<div>
					<router-link to="#"
						><h3>{{ $t('MainFooter.Others') }}</h3></router-link
					>
					<router-link to="/privacy-policy">{{
						$t('MainFooter.PrivacyPolicy')
					}}</router-link>
					<router-link to="/terms-of-use">{{ $t('MainFooter.TermsOfUse') }}</router-link>
					<router-link to="/disclaimer">{{ $t('MainFooter.Disclaimer') }}</router-link>
					<router-link to="/site-map">{{ $t('MainFooter.SiteMap') }}</router-link>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { useHead } from '@unhead/vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	import { computed, ref } from 'vue'
	import OthersHeader from './others-header.vue'
	useHead({
		title: t('MainFooter.SiteMap') + ' - Code-Create'
	})
</script>

<style scoped lang="less">
	.site-map {
		border-top: var(--main-header-height) solid #000;
		background-color: #f9f9f9;
		> .content {
			max-width: 1230px;
			width: 100%;
			margin: 0 auto;
			padding: 25px 15px 80px;
			display: flex;
			> div {
				flex: 1;
				padding: 10px 40px;
				> div {
					margin-bottom: 20px;
					display: flex;
					flex-direction: column;
					&:last-child {
						margin-bottom: 0;
					}
					a {
						color: #888;
						font-size: 16px;
						text-decoration: none;
						padding: 8px 0;
						transition: all 0.3s ease-in-out;
						&:hover {
							color: #222;
						}
					}
					h3 {
						padding: 2px 0;
						color: #000;
						font-size: 20px;
					}
				}
			}
		}
		@media (max-width: 800px) {
			> .content {
				flex-direction: column;
				padding: 70px 90px;
				> div {
					padding: 0;
					margin-bottom: 30px;
					> div {
						margin-bottom: 30px;
					}
				}
			}
		}
	}
</style>
