<script setup lang="ts">
	import { watch, computed } from 'vue'
	import { useHead } from '@unhead/vue'
	import aidaPanel from '@/assets/images/home/aida-panel.png'
	import homeAiLogo from '@/assets/images/home/home-ai-logo.png'
	import mixiIntroBg from '@/assets/images/home/mixi-intro-bg.png'
	import mixiPanel from '@/assets/images/home/mixi-panel.png'
	import HomeCarousel from './components/Carousel.vue'
	import ProductFeature from './components/ProductFeature.vue'
	import ProjectCta from './components/ProjectCta.vue'
	import { IMAGE_BASE_URL } from '@/tools/config'
	import { useI18n } from 'vue-i18n'

	const { t, locale } = useI18n()

	const productFeatures = computed(() => {
		return [
			{
				name: 'AiDA 3.1',
				title: t('Home.aidaDesc'),
				backgroundImage: `${IMAGE_BASE_URL}/2022/11/aida_intro_01_bg.png`,
				backgroundAlt: 'Fashion design sketches on paper',
				panelImage: `${IMAGE_BASE_URL}/2024/01/new-layout-1.png`,
				panelAlt: 'AiDA design workspace preview',
				reversed: false,
				to:'/aida'
			},
			{
				name: 'Mixi',
				title: t('Home.mixiSlogan'),
				backgroundImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_bg.png`,
				backgroundAlt: 'Layered fabric texture',
				panelImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_panel.png`,
				panelAlt: 'Mixi visual search interface preview',
				reversed: true,
				to:'/mixi'
			}
		]
	})

	watch(locale, () => {
		location.reload()
	})

	useHead({
		title: t('Home.title'),
		meta: [
			{
				name: 'description',
				content: t('Home.description')
			}
		]
	})
</script>

<template>
	<main class="home-page">
		<HomeCarousel />

		<div class="home-content">
			<section
				class="ecosystem-intro"
				aria-labelledby="ecosystem-title"
				v-custom-animation.scroll
			>
				<img
					class="ecosystem-logo"
					:src="homeAiLogo"
					alt="Code Create"
					loading="lazy"
					translate-y-s="-20"
					translate-y="20"
				/>
				<h1
					id="ecosystem-title"
					class="ecosystem-title"
					translate-y-s="-60"
					translate-y="0"
				>
					{{ $t('Home.slogan') }}
				</h1>
				<p translate-y-s="-60" translate-y="0" class="ecosystem-subtitle">
					{{ $t('Home.subSlogan') }}
				</p>
			</section>

			<ProductFeature
				v-for="feature in productFeatures"
				:key="feature.name"
				:name="feature.name"
				:title="feature.title"
				:to="feature.to"
				:background-image="feature.backgroundImage"
				:background-alt="feature.backgroundAlt"
				:panel-image="feature.panelImage"
				:panel-alt="feature.panelAlt"
				:reversed="feature.reversed"
			/>
		</div>

		<ProjectCta />
	</main>
</template>

<style scoped lang="less">
	.home-page {
		width: 100%;
		overflow: hidden;
		background: #ffffff;
	}

	.home-content {
		padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px);
		background: #ffffff;
	}

	.ecosystem-intro {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 20px clamp(92px, 10vw, 150px);
		text-align: center;
	}

	.ecosystem-logo {
		display: block;
		width: clamp(146px, 15vw, 184px);
		height: auto;
		margin-bottom: 30px;
		user-select: none;
	}

	.ecosystem-title {
		width: 100%;
		max-width: 100%;
		margin: 0 0 9px;
		color: #101010;
		font-family: Poppins, sans-serif;
		font-size: clamp(18px, 1.65vw, 22px);
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: 4px;
		text-transform: uppercase;
		overflow-wrap: break-word;
	}

	.ecosystem-subtitle {
		width: 100%;
		margin: 0;
		color: #101010;
		font-family: Poppins, sans-serif;
		font-size: clamp(13px, 1.2vw, 16px);
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: 2.5px;
	}

	@media (max-width: 980px) {
		.home-content {
			padding: 96px 0 64px;
		}

		.ecosystem-intro {
			padding-bottom: 50px;
		}
	}

	@media (max-width: 640px) {
		.home-content {
			padding: 52px 0 0;
		}

		.ecosystem-intro {
			padding: 0 24px 58px;
		}

		.ecosystem-logo {
			width: 76px;
			margin-bottom: 26px;
		}

		.ecosystem-title {
			width: min(100%, 330px);
			max-width: none;
			margin-bottom: 10px;
			font-size: 18px;
			letter-spacing: 1px;
			line-height: 1.35;
			overflow-wrap: anywhere;
		}

		.ecosystem-subtitle {
			font-size: 13px;
			letter-spacing: 0.8px;
		}
	}
</style>
