<script setup lang="ts">
	import { ref,computed } from "vue";
	import MyEvent from "@/tools/myEvents";
	import { useI18n } from "vue-i18n";
	const { t } = useI18n();
	const playVideo = (item)=>{
		MyEvent.emit("playVideo",{
			url: item.videoUrl,
			poster: item.imgUrl,
		});
	}
	const list = computed(()=>{
		return[
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/XULULU.png',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/XULULU.mp4',
				name: 'XULULU',
				textList: [
					t('userStories.XULULUInfo1'),
					t('userStories.XULULUInfo2'),
					t('userStories.XULULUInfo3'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/Yiu-Ching-Yau.png',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/Yiu-Ching-Yau1.mp4',
				name: 'Yiu Ching Yau',
				textList: [
					t('userStories.YiuChingYauInfo1'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/XIEYAUKIT-scaled.png',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/XIEYAUKIT.mp4',
				name: 'XIEYAUKIT',
				textList: [
					t('userStories.XIEYAUKITInfo1'),
					t('userStories.XIEYAUKITInfo2'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/Yuzhi-Lai-scaled.jpg',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/Yuzhi-Lai1.mp4',
				name: 'Yuzhi Lai',
				textList: [
					t('userStories.YuzhiLaiInfo1'),
					t('userStories.YuzhiLaiInfo2'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/Cheung-Tsz-Ching.png',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/Cheung-Tsz-Ching.mp4',
				name: 'Cheung Tsz Ching（Bobo）',
				textList: [
					t('userStories.CheungTszChingInfo1'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/01/Aidlab_interview02_INJURY_thumb.jpg',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/03/UserStory3.mp4',
				name: 'INJURY from Australia',
				textList: [
					t('userStories.INJURYInfo1'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/01/Aidlab_interview02_Jae_thumb.jpg',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/03/UserStory2.mp4',
				name: 'BESFXXK from Korea',
				textList: [
					t('userStories.BESFXXKInfo1'),
				],
			},
			{
				imgUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/01/Aidlab_interview02_Mountain_thumb.jpg',
				videoUrl: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/03/UserStory1.mp4',
				name: 'Mountain Yam from Hong Kong',
				textList: [
					t('userStories.MountainYamInfo1'),
				],
			},
		]
	})
	const userList = computed(()=>{
		return [
			{
				profile:'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/WhatsApp-Image-2025-04-23-at-18.36.16_740726a9-794x1024.jpg',
				name: 'Prof. Jung',
				school: t('userStories.ProfJungSchool'),
				info: t('userStories.ProfJungInfo1'),
			},
			{
				profile:'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/userstory_irene_siu-1-150x150.jpg',
				name: 'Irene Siu',
				info: t('userStories.IreneSiuInfo1'),
			},
			{
				profile:'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/04/userstory_joyce_chow-150x150.jpg',
				name: 'Joyce Chow',
				info: t('userStories.JoyceChowInfo1'),
			},
			{
				profile:'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/02/userstory_cheryl_ho-150x150.jpg',
				name: 'Cheryl Ho',
				info: t('userStories.CherylHoInfo1'),
			},
			{
				profile:'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/02/userstory_minna_n_polam-150x150.jpg',
				name: 'Minna & Polam',
				info: t('userStories.MinnaPolamInfo1'),
			},
		]
	})
	defineExpose({})
</script>
<template>
	<section class="user-list">
		<div class="content">
			<h2>{{ $t('userStories.Title') }}</h2>
		</div>
	</section>
	<section class="user-item" v-for="item in list" :key="item.name">
		<div class="content">
			<div class="video-box">
				<img :src="item.imgUrl" alt="">
				<span class="iconfont icon-bofang" @click="playVideo(item)"></span>
			</div>
			<div class="text-box">
				<div class="text-content">
					<div class="icon">
						<span class="iconfont icon-quotesUp-copy"></span>
					</div>
					<h2 v-tween="{opacity:0,y:'30px'}">{{item.name}}</h2>
					<div v-tween="{opacity:0}">
						<p v-for="text in item.textList" :key="text">{{text}}</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="user2-type">
		<div class="content">
			<div class="item" v-for="item in userList" :key="item.name">
				<div class="img-box">
					<img :src="item.profile" alt="">
				</div>
				<div class="box">
					<div class="icon">
						<span class="iconfont icon-quotesUp-copy"></span>
					</div>
					<h2 class="name" v-tween="{opacity:0,y:'30px'}">{{item.name}}</h2>
					<h2 class="school" v-tween="{opacity:0,y:'30px'}" v-if="item?.school">{{item?.school}}</h2>
					<p v-tween="{opacity:0}">{{item.info}}</p>
				</div>
			</div>
		</div>
	</section>

</template>
<style lang="less" scoped>
	.user-list{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			margin: 0 auto;
			max-width: 1140px;
			padding: 100px 0px 100px 0px;
			@media (max-width: 1000px) {
				padding: 10px;
				padding-top: 50px;
			}
			> h2{
				text-align: center;
				width: 100%;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 1px;
				color: #000000;
				@media (max-width: 1000px) {
					padding: 7px 15px;
				}
			}
		}
	}
	.user-item{
		background-color: #f9f9f9;
		width: 100%;
		&:nth-child(2n){
			> .content{
				flex-direction: row-reverse;
				@media (max-width: 1000px) {
					flex-direction: column;
				}
			}
		}
		> .content{
			margin: 0 auto;
			max-width: 1140px;
			padding: 40px 0;
			display: flex;
			@media (max-width: 1000px) {
				padding: 20px 0;
				flex-direction: column-reverse;
				max-width: 1000px;
			}
			> div{
				width: 50%;
				padding: 20px;
				@media (max-width: 1000px) {
					width: 100%;
				}
			}
			> .video-box{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				> img{
					aspect-ratio: 1.777 / 1;
					width: 100%;
					object-fit: cover;
				}
				> .icon-bofang{
					font-size: 100px;
					color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					// box-shadow: 0 0 10px #fff;
					filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, .5));
					cursor: pointer;
				}
			}
			> .text-box{
				display: flex;
				align-items: center;
				> .text-content{
					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
					padding: 20px 20px 20px 20px;
					border-radius: 20px;
					text-align: center;
					> .icon{
						margin-bottom: 20px;
						height: 25px;
						width: 100%;
						display: flex;
						align-items: flex-end; 
						justify-content: center;
						> span{
							width: 80px;
							height: 80px;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #86040e;
							border-radius: 50%;
							font-size: 40px;
							color: #fff;
						}
					}
					> h2{
						margin-bottom: 20px;
						font-size: 19px;
						font-weight: 600;
						line-height: 20px;
						color: #222222;
					}
					> div{
						> p{
							margin-bottom: 20px;
							font-size: 14px;
							font-weight: 400;
							color: #333333;
							line-height: 20px;
						}
					}
				}
			}
		}
	}
	.user2-type{
		background-color: #f9f9f9;
		width: 100%;
		> .content{
			margin: 0 auto;
			max-width: 1140px;
			padding: 20px;	
		    display: flex;
		    flex-wrap: wrap;
			@media (max-width: 1000px) {
				max-width: 1000px;
			}
			> .item{
				margin: 40px 0;
				width: 50%;
				padding: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				&:nth-child(1){
					width: 100%;
				}
				@media (max-width: 1000px) {
					width: 100%;
					margin: 0;
				}
				> .img-box{
					width: 100%;
					height: 40px;
					margin-bottom: 20px;
					text-align: start;
					> img{
						width: 100px;
						height: 100px;
						border-radius: 50%;
						object-fit: cover;
						object-position: top right;
						box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
					}
				}
				> .box{
					border-radius: 20px;
					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
					text-align: center;
					padding: 20px;
					> .icon{
						width: 100%;
						height: 15px;
						display: flex;
						align-items: flex-end; 
						> span{
							margin: -30px 0px 0px 60px;
							width: 40px;
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #86040e;
							border-radius: 50%;
							font-size: 20px;
							color: #fff;
						}
					}
					> h2{
						margin-bottom: 20px;
						font-size: 19px;
						font-family: "Poppins", Sans-serif;
						color: #222222;
						line-height: 1;
						font-weight: 600;
						letter-spacing: 2px;
						&.school{
							font-size: 15px;
						}
					}
					> p{
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
						margin-bottom: 20px;
					}
				}
			}
		}
	}
</style>
