<script setup lang="ts">
	import { useHead } from '@unhead/vue'
	import { shallowRef, useTemplateRef, computed, onMounted } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { gsap } from 'gsap'
	import { ScrollTrigger } from 'gsap/ScrollTrigger'
	import diamondIcon from '@/assets/images/aida/diamond.svg'
	import timeIcon from '@/assets/images/aida/time.svg'
	import { IMAGE_BASE_URL } from '@/tools/config'

	gsap.registerPlugin(ScrollTrigger)

	const { t, locale } = useI18n()

	const demoVideo = computed(() => {
		if (locale.value === 'en') {
			return `${IMAGE_BASE_URL}/2026/02/Demo-video-26-2-27-EN.mp4`
		}
		return `${IMAGE_BASE_URL}/2026/02/Demo-video-26-2-27-CN.mp4`
	})

	const keyFeatures = computed(() => {
		return [t('Aida.feature1'), t('Aida.feature2'), t('Aida.feature3'), t('Aida.feature4')]
	})

	const benefits = computed(() => {
		return [
			{
				image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_01.png`,
				alt: 'Light bulb icon',
				text: t('Aida.benefits1')
			},
			{
				image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_02.png`,
				alt: 'Stopwatch icon',
				text: t('Aida.benefits2')
			},
			{
				image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_03-1.png`,
				alt: 'Drawing brush icon',
				text: t('Aida.benefits3')
			}
		]
	})

	const subscriptionHighlights = computed(() => {
		return [
			t('Aida.plan1'),
			t('Aida.plan2'),
			t('Aida.plan3'),
			t('Aida.plan4'),
			t('Aida.plan5'),
			t('Aida.plan6')
		]
	})

	const plans = computed(() => {
		return [
			{
				icon: timeIcon,
				name: t('Aida.trial'),
				description: t('Aida.days'),
				action: t('Aida.start'),
				href: 'https://www.aida.com.hk/register'
			},
			{
				icon: diamondIcon,
				name: t('Aida.corporate'),
				description: t('Aida.customised'),
				action: t('Aida.contactUs'),
				href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
			}
		]
	})

	const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
	const isVideoPlaying = shallowRef(false)

	async function toggleDemoVideo() {
		const video = demoVideoRef.value

		if (!video) {
			return
		}

		if (video.paused) {
			await video.play()
			isVideoPlaying.value = true
			return
		}

		video.pause()
		isVideoPlaying.value = false
	}

	function handleVideoStateChange() {
		const video = demoVideoRef.value
		isVideoPlaying.value = Boolean(video && !video.paused && !video.ended)
	}

	useHead({
		title: 'AiDA - Code-Create',
		meta: [
			{
				name: 'description',
				content: t('Aida.description')
			}
		]
	})

	onMounted(() => {
		// 1. 顶部 aida-title 从上往下滑入
		gsap.from('#aida-title', {
			y: -100,
			opacity: 0,
			duration: 1.5,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '#aida-title',
				start: 'top 80%',
				once: true
			}
		})

		// 2. intro-copy 从下往上滑入
		gsap.from('.intro-copy', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.intro-copy',
				start: 'top 85%',
				once: true
			}
		})

		// 3. pricing-copy 从下往上滑入
		gsap.from('.pricing-copy', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			delay: 0.1,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.pricing-copy',
				start: 'top 85%',
				once: true
			}
		})

		// 4. academic-copy 从下往上滑入
		gsap.from('.academic-copy', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			delay: 0.2,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.academic-copy',
				start: 'top 85%',
				once: true
			}
		})

		// 5. features-section 的 section-title 从下往上滑入
		gsap.from('.features-section .section-title', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.features-section .section-title',
				start: 'top 85%',
				once: true
			}
		})

		// 6. feature-list 从下往上滑入
		gsap.from('.feature-list', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			delay: 0.2,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.feature-list',
				start: 'top 85%',
				once: true
			}
		})

		// 7. benefits-section 的 section-title 从下往上滑入
		gsap.from('.benefits-title', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.benefits-title',
				start: 'top 85%',
				once: true
			}
		})

		// 8. benefits-grid 的三个图标动画
		// 先设置初始状态：左右两个隐藏在中间位置
		gsap.set('.benefit-card:first-child', { x: 200, opacity: 0 })
		gsap.set('.benefit-card:last-child', { x: -200, opacity: 0 })

		// 中间的图标先显示
		gsap.from('.benefit-card:nth-child(2)', {
			scale: 0.5,
			opacity: 0,
			duration: 1.1,
			ease: 'back.out(1.7)',
			scrollTrigger: {
				trigger: '.benefits-grid',
				start: 'top 80%',
				once: true
			}
		})

		// 左边的图标从中间滑到左边
		gsap.to('.benefit-card:first-child', {
			x: 0,
			opacity: 1,
			duration: 1.3,
			delay: 0.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.benefits-grid',
				start: 'top 80%',
				once: true
			}
		})

		// 右边的图标从中间滑到右边
		gsap.to('.benefit-card:last-child', {
			x: 0,
			opacity: 1,
			duration: 1.3,
			delay: 0.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.benefits-grid',
				start: 'top 80%',
				once: true
			}
		})

		// 9. demo-title 从下往上滑入
		gsap.from('.demo-title', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.demo-title',
				start: 'top 85%',
				once: true
			}
		})

		// 10. subscription-title 从下往上滑入
		gsap.from('.subscription-title', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.subscription-title',
				start: 'top 85%',
				once: true
			}
		})

		// 11. subscription-list 从下往上滑入
		gsap.from('.subscription-list', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			delay: 0.1,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.subscription-list',
				start: 'top 85%',
				once: true
			}
		})

		// 12. plans-grid 从下往上滑入
		gsap.from('.plans-grid', {
			y: 50,
			opacity: 0,
			duration: 1.3,
			delay: 0.2,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: '.plans-grid',
				start: 'top 85%',
				once: true
			}
		})
	})
</script>

<template>
	<main class="aida-page">
		<section class="aida-hero" aria-labelledby="aida-title">
			<img
				class="aida-hero-image"
				:src="`${IMAGE_BASE_URL}/2022/11/aida_banner-1.jpg`"
				alt="AiDA 3.1 banner"
			/>
			<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
		</section>

		<section class="intro-section" aria-labelledby="intro-title">
			<div class="intro-inner" v-custom-animation.scroll>
				<h2 id="intro-title" class="intro-title">
					{{ t('Aida.slogan') }}
				</h2>
				<p class="intro-copy">
					{{ t('Aida.desc') }}
				</p>
				<p class="pricing-copy">
					{{ t('Aida.annual') }}<br />
					{{ t('Aida.monthly') }}<br />
					{{ t('Aida.monthlyCheaper') }}
				</p>
				<p class="academic-copy">
					{{ t('Aida.tips') }}
				</p>
				<a
					class="primary-button"
					href="mailto:info@code-create.com.hk?subject=AiDA%203.1%20Subscription"
				>
					{{ t('Aida.subscribe') }}
				</a>
				<a class="manual-link" href="#subscription">{{ t('Aida.userManual') }}</a>
			</div>
		</section>

		<section class="features-section" aria-labelledby="features-title">
			<div class="features-inner" v-custom-animation.scroll>
				<div class="feature-art">
					<img
						class="feature-bg"
						:src="`${IMAGE_BASE_URL}/2022/11/aida_intro_01_bg.png`"
						alt="Fashion design sketches on paper"
						loading="lazy"
					/>
					<img
						class="feature-panel"
						:src="`${IMAGE_BASE_URL}/2024/01/new-layout-1.png`"
						alt="AiDA design workspace preview"
						loading="lazy"
					/>
				</div>
				<div class="feature-copy">
					<h2 id="features-title" class="section-title">{{ t('Aida.keyFeatures') }}</h2>
					<ul class="feature-list">
						<li v-for="feature in keyFeatures" :key="feature">
							{{ feature }}
						</li>
					</ul>
				</div>
			</div>
		</section>

		<section class="benefits-section" aria-labelledby="benefits-title">
			<div class="benefits-inner">
				<h2 id="benefits-title" class="section-title benefits-title">
					{{ t('Aida.benefits') }}
				</h2>
				<div class="benefits-grid">
					<article v-for="benefit in benefits" :key="benefit.text" class="benefit-card">
						<img
							class="benefit-icon"
							:src="benefit.image"
							:alt="benefit.alt"
							loading="lazy"
						/>
						<p class="benefit-copy">{{ benefit.text }}</p>
					</article>
				</div>
			</div>
		</section>

		<section class="demo-section" aria-labelledby="demo-title">
			<div class="demo-inner">
				<h2 id="demo-title" class="demo-title">{{ t('Aida.demo') }}</h2>
				<div class="demo-video-wrap">
					<video
						ref="demoVideoRef"
						class="demo-video"
						:class="{ 'is-playing': isVideoPlaying }"
						preload="metadata"
						playsinline
						@click="toggleDemoVideo"
						@pause="handleVideoStateChange"
						@play="handleVideoStateChange"
						@ended="handleVideoStateChange"
					>
						<source :src="demoVideo" type="video/mp4" />
					</video>
					<button
						v-show="!isVideoPlaying"
						class="video-play-button"
						type="button"
						aria-label="Play AiDA demo video"
						@click="toggleDemoVideo"
					>
						{{ t('Aida.play') }}
						<span class="play-dot" aria-hidden="true"></span>
					</button>
				</div>
			</div>
		</section>

		<section
			id="subscription"
			class="subscription-section"
			aria-labelledby="subscription-title"
		>
			<div class="subscription-inner">
				<h2 id="subscription-title" class="section-title subscription-title">
					{{ t('Aida.choosePlan') }}
				</h2>
				<ul class="subscription-list">
					<li v-for="(item, index) in subscriptionHighlights" :key="item">
						<template v-if="index + 1 === subscriptionHighlights.length">
							<a class="mail-link" href="mailto:info@code-create.com.hk">
								{{ item }}
							</a>
						</template>
						<template v-else>
							{{ item }}
						</template>
					</li>
				</ul>

				<div class="plans-grid">
					<article v-for="plan in plans" :key="plan.name" class="plan-card">
						<img
							class="plan-icon"
							:src="plan.icon"
							:alt="`${plan.name} plan icon`"
							loading="lazy"
						/>
						<h3 class="plan-title">{{ plan.name }}</h3>
						<p class="plan-copy">{{ plan.description }}</p>
						<a class="plan-button" :href="plan.href">{{ plan.action }}</a>
					</article>
				</div>

				<div class="legal-links">
					<a href="#subscription">{{ t('Aida.termsAndConditions') }}</a>
					<a href="#subscription">{{ t('Aida.agreement') }}</a>
				</div>
			</div>
		</section>
	</main>
</template>

<style scoped lang="less">
	.aida-page {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background: #f0f0f0;
		color: #333333;
		font-family: Poppins, Arial, sans-serif;
	}

	.aida-hero {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: clamp(280px, 36vw, 520px);
		min-height: 280px;
		background: #241023;
		overflow: hidden;
	}

	.aida-hero-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.aida-hero-title {
		position: relative;
		z-index: 1;
		margin: 0;
		padding-top: 34px;
		color: #ffffff;
		font-size: clamp(40px, 5.2vw, 72px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		text-transform: none;
		text-align: center;
	}

	.intro-section {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 735px;
		padding: 110px 24px 122px;
		background: #ebebeb;
	}

	.intro-inner {
		width: min(100%, 720px);
		text-align: center;
	}

	.intro-title,
	.section-title,
	.demo-title,
	.subscription-title,
	.plan-title {
		margin: 0;
		color: #333333;
		font-family: Poppins, Arial, sans-serif;
		font-weight: 700;
		letter-spacing: 1.4px;
		text-transform: none;
	}

	.intro-title {
		margin-bottom: 32px;
		font-size: clamp(18px, 1.55vw, 24px);
		line-height: 1.35;
	}

	.intro-copy,
	.pricing-copy,
	.academic-copy {
		margin: 0 auto;
		color: #555555;
		font-size: 12px;
		line-height: 1.5;
		letter-spacing: 0;
	}

	.intro-copy {
		max-width: 610px;
		margin-bottom: 20px;
	}

	.pricing-copy {
		max-width: 520px;
		margin-bottom: 14px;
		color: #3f3f3f;
		font-weight: 700;
		line-height: 1.32;
		letter-spacing: 1.1px;
	}

	.academic-copy {
		margin-bottom: 25px;
	}

	.primary-button,
	.plan-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 43px;
		padding: 0 34px;
		border-radius: 999px;
		background: #a51f28;
		color: #ffffff;
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 1.8px;
		text-decoration: none;
		text-transform: uppercase;
		transition:
			background-color 0.2s ease,
			transform 0.2s ease;
	}

	.primary-button:hover,
	.primary-button:focus-visible,
	.plan-button:hover,
	.plan-button:focus-visible {
		background: #8f1720;
		transform: translateY(-1px);
	}

	.primary-button:focus-visible,
	.plan-button:focus-visible,
	.manual-link:focus-visible,
	.legal-links a:focus-visible,
	.video-play-button:focus-visible {
		outline: 2px solid #a51f28;
		outline-offset: 4px;
	}

	.manual-link {
		display: table;
		margin: 23px auto 0;
		color: #333333;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.features-section,
	.benefits-section,
	.subscription-section {
		background: #f4f4f4;
	}

	.features-section {
		padding: clamp(82px, 9vw, 132px) 24px 70px;
	}

	.features-inner {
		display: grid;
		grid-template-columns: minmax(300px, 520px) minmax(320px, 620px);
		align-items: center;
		gap: clamp(56px, 7vw, 112px);
		width: min(100%, 1180px);
		margin: 0 auto;
	}

	.feature-art {
		position: relative;
		min-height: clamp(440px, 38vw, 565px);
	}

	.feature-bg {
		display: block;
		width: min(75%, 430px);
		border-radius: 24px;
		user-select: none;
	}

	.feature-panel {
		position: absolute;
		right: 0;
		bottom: 32px;
		width: min(75%, 445px);
		filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.12));
		user-select: none;
	}

	.feature-copy {
		max-width: 610px;
		padding-top: 12px;
	}

	.section-title {
		font-size: clamp(26px, 2.35vw, 42px);
		line-height: 1.18;
	}

	.feature-list {
		margin: 32px 0 0;
		padding-left: 18px;
		color: #444444;
		font-size: 16px;
		// line-height: 1.55;
	}

	.feature-list li + li {
		margin-top: 12px;
	}

	.benefits-section {
		padding: 78px 24px 112px;
	}

	.benefits-inner {
		width: min(100%, 1160px);
		margin: 0 auto;
		text-align: center;
	}

	.benefits-title {
		margin-bottom: clamp(56px, 7vw, 95px);
	}

	.benefits-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(40px, 8vw, 118px);
		align-items: start;
	}

	.benefit-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}

	.benefit-icon {
		width: 84px;
		height: 84px;
		object-fit: contain;
		margin-bottom: 48px;
		user-select: none;
	}

	.benefit-copy {
		max-width: 248px;
		margin: 0;
		color: #555555;
		font-size: 16px;
		letter-spacing: 0;
	}

	.demo-section {
		padding: 78px 24px 104px;
		background: #372b28;
	}

	.demo-inner {
		width: min(100%, 1060px);
		margin: 0 auto;
		text-align: center;
	}

	.demo-title {
		margin-bottom: 14px;
		color: #ffffff;
		font-size: clamp(24px, 2.15vw, 34px);
		line-height: 1.2;
	}

	.demo-video-wrap {
		position: relative;
		width: min(100%, 960px);
		margin: 0 auto;
		background: #202020;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	.demo-video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		cursor: pointer;
		filter: grayscale(1);
	}

	.demo-video.is-playing {
		filter: none;
	}

	.video-play-button {
		position: absolute;
		top: 50%;
		left: 50%;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 32px;
		padding: 0 16px;
		border: 0;
		border-radius: 999px;
		background: #a51f28;
		color: #ffffff;
		font-family: Poppins, Arial, sans-serif;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		cursor: pointer;
		transform: translate(-50%, -50%);
		transition:
			background-color 0.2s ease,
			transform 0.2s ease;
	}

	.video-play-button:hover {
		background: #8f1720;
		transform: translate(-50%, calc(-50% - 1px));
	}

	.play-dot {
		display: block;
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 8px solid #ffffff;
	}

	.subscription-section {
		padding: clamp(76px, 8vw, 104px) 24px 86px;
	}

	.subscription-inner {
		width: min(100%, 930px);
		margin: 0 auto;
	}

	.subscription-title {
		margin-bottom: 27px;
		font-size: clamp(28px, 3vw, 43px);
		line-height: 1.2;
		text-align: left;
	}

	.subscription-list {
		margin: 0 auto 52px;
		padding: 0;
		list-style: none;
		color: #333333;
		font-size: 13px;
		line-height: 1.48;
	}

	.subscription-list li {
		position: relative;
		padding-left: 24px;
	}
	.mail-link {
		color: inherit;
		text-decoration: none;
		cursor: pointer;
	}
	.subscription-list li + li {
		margin-top: 14px;
	}

	.subscription-list li::before {
		content: '';
		position: absolute;
		top: 0.55em;
		left: 0;
		width: 10px;
		height: 5px;
		border-left: 2px solid #333333;
		border-bottom: 2px solid #333333;
		transform: rotate(-45deg);
	}

	.plans-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
	}

	.plan-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 324px;
		padding: 34px 28px 30px;
		border-radius: 12px;
		background: #ffffff;
		text-align: center;
	}

	.plan-icon {
		width: 86px;
		height: 86px;
		object-fit: contain;
		margin-bottom: 30px;
	}

	.plan-title {
		margin-bottom: 34px;
		color: #a51f28;
		font-size: 22px;
		line-height: 1.2;
	}

	.plan-copy {
		margin: 0 0 44px;
		color: #555555;
		font-size: 12px;
		line-height: 1.45;
	}

	.plan-button {
		min-height: 39px;
		margin-top: auto;
		padding: 0 27px;
	}

	.legal-links {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		margin-top: 45px;
	}

	.legal-links a {
		color: #333333;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	@media (max-width: 980px) {
		.intro-section {
			min-height: 620px;
			padding: 84px 24px 94px;
		}

		.features-inner {
			grid-template-columns: 1fr;
			gap: 34px;
			width: min(100%, 680px);
		}

		.feature-art {
			min-height: clamp(390px, 78vw, 560px);
		}

		.feature-copy {
			max-width: 100%;
		}

		.benefits-grid {
			gap: 40px;
		}

		.subscription-inner {
			width: min(100%, 760px);
		}
	}

	@media (max-width: 720px) {
		.aida-hero {
			height: 292px;
		}

		.aida-hero-title {
			padding-top: 24px;
			font-size: 42px;
		}

		.intro-section {
			min-height: 520px;
			padding: 72px 20px 78px;
		}

		.intro-title {
			margin-bottom: 24px;
		}

		.features-section {
			padding: 64px 20px 44px;
		}

		.feature-bg {
			width: 72%;
		}

		.feature-panel {
			width: 78%;
			bottom: 24px;
		}

		.benefits-section {
			padding: 52px 20px 76px;
		}

		.benefits-grid,
		.plans-grid {
			grid-template-columns: 1fr;
		}

		.benefit-icon {
			margin-bottom: 24px;
		}

		.demo-section {
			padding: 58px 20px 76px;
		}

		.subscription-section {
			padding: 62px 20px 70px;
		}

		.subscription-title {
			text-align: center;
		}

		.subscription-list {
			margin-bottom: 40px;
		}
	}

	@media (max-width: 480px) {
		.aida-hero {
			height: 250px;
			min-height: 250px;
		}

		.aida-hero-title {
			font-size: 34px;
		}

		.intro-copy,
		.pricing-copy,
		.academic-copy,
		.feature-list,
		.subscription-list {
			font-size: 12px;
		}

		.feature-art {
			min-height: 320px;
		}

		.plan-card {
			min-height: 292px;
			padding: 30px 22px;
		}
	}
</style>
