<script setup lang="ts">
	import { ref } from "vue";
	import { useI18n } from 'vue-i18n'
	import MyEvent from "@/tools/myEvents";
	const { t, locale } = useI18n()
	let videoUrl = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/05/codec_brand_vid_16x9_ENG.mp4'
	let videoPosterUrl = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/06/codec_brand_vid_16x9_ENG_11_layer.jpeg'
	const playVideo = ()=>{
		console.log(locale.value)
		return
		MyEvent.emit("playVideo",{
			url: videoUrl,
			poster: videoPosterUrl,
		});
	}

	defineExpose({})
</script>
<template>
	<section class="ecosystem">
		<div class="content">
			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/home_ai_logo.png" alt="">
			<h2>{{ $t('aboutUs.ecosystem.Title') }}</h2>
			<h4>{{ $t('aboutUs.ecosystem.Desc') }}</h4>
		</div>
	</section>
	<section class="ecosystem-video">
		<div class="content">
			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/06/codec_brand_vid_16x9_ENG_11_layer.jpeg" alt="">
			<span class="iconfont icon-bofang" @click="playVideo"></span>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.ecosystem{
		width: 100%;
		background-color: #fff;
		> .content{
			margin: 0 auto;
			max-width: 1200px;
			padding: 100px 0px 100px 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			@media (max-width: 1000px) {
				padding: 40px 40px 40px 40px;
				max-width: 1000px;
			}
			> img{
				width: 300px;
				height: 300px;
				margin-bottom: 20px;
				@media (max-width: 1000px) {
					width: 100px;
					height: 100px;
				}
			}
			> h2{
				margin-bottom: 20px;
				font-size: 24px;
				@media (max-width: 1000px) {
					font-size: 22px;
					text-align: center;
				}
			}
			> h4{
				color: #333333;
				font-size: 18px;
				@media (max-width: 1000px) {
					font-size: 16px;
					text-align: center;
				}
			}

		}
	}
	.ecosystem-video{
		width: 100%;
		background-color: #463a37;
		> .content{
			max-width: 1200px;
			margin: 0 auto;
			padding: 100px 0;
			position: relative;
			@media (max-width: 1000px) {
				padding: 20px 40px;
				max-width: 1000px;
			}
			> img{
				width: 100%;
				aspect-ratio: 16/9;
				@media (max-width: 1000px) {
					height: auto;
				}
			}
			> .icon-bofang{
				font-size: 100px;
				color: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				animation: identifier 2s ease-in-out infinite;
				// box-shadow: 0 0 10px #fff;
				transition: .3s all;
				cursor: pointer;
				@keyframes identifier {
					0% {
						transform: translate(-50%,-50%) scale(1);
						filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
					}
					50% {
						transform: translate(-50%,-50%) scale(.95);
						filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));
					}
					100% {
						transform: translate(-50%,-50%) scale(1);
						filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
					}
				}
			}
		}
	}
</style>
