<template>
	<div
		class="award-page"
		:class="{ 'is-zh': isZh }"
	>
		<div class="banner">
			<video
				:src="bannerUrl"
				autoplay
				muted
				loop
				class="banner-video"
				playsinline
				webkit-playsinline
				x5-playsinline
			></video>
			<div
				class="submit-btn flex flex-center"
				@click="handleSubmitApplication"
			>
				<div>{{ $t('AwardsPage.submitApplication') }}</div>
				<img
					src="@/assets/images/award/arrow_right.png"
					alt=""
					class="arrow"
				/>
				<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
			</div>
		</div>

		<Slogan />
		<Bloom />
		<TimeLine />
		<JudgesSection />
		<PrizesSection :is-zh="isZh" />
		<ApplySection />
		<SelectionSection />
	</div>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { useRouter } from 'vue-router'
	import JudgesSection from './components/JudgesSection.vue'
	import SelectionSection from './components/SelectionSection.vue'
	import ApplySection from './components/ApplySection.vue'
	import PrizesSection from './components/PrizesSection.vue'
	import TimeLine from './components/TimeLine.vue'
	import Bloom from './components/Bloom.vue'
	import Slogan from './components/Slogan.vue'

	import banner from '@/assets/images/award/banner.mp4'
	import bannerZh from '@/assets/images/award/banner_chinese.mp4'

	const router = useRouter()
	const { locale } = useI18n()

	const isZh = computed(() => {
		return locale.value === 'CHINESE_SIMPLIFIED'
	})

	const bannerUrl = computed(() => {
		return isZh.value ? bannerZh : banner
	})

	const handleSubmitApplication = () => {
		router.push('/contestants')
	}
</script>

<style lang="less" scoped>
	.container {
		height: 97rem;
	}

	.logo {
		width: 2.4rem;
		height: 2.4rem;
	}
	.banner {
		height: 100rem;
		// background: url('@/assets/images/award/banner.png') no-repeat;
		// background-size: cover;
		position: relative;
		.banner-video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.submit-btn {
			width: 41rem;
			height: 6.394rem;
			line-height: 6.394rem;
			text-align: center;
			border-radius: 3.2rem;
			background-color: rgba(35, 35, 35, 0.7);
			box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
				inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
				inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
			color: #fff;
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 2.4rem;
			column-gap: 3.2rem;
			position: absolute;
			left: 42.1rem;
			bottom: 15.7rem;
			backdrop-filter: blur(5px);
			cursor: pointer;
			.arrow {
				width: 3.83rem;
				height: 3.83rem;
			}
			.ddl {
				position: absolute;
				bottom: -4rem;
				left: 0;
				text-align: center;
				width: 41rem;
				font-family: 'ArialBold';
				font-weight: 700;
				font-size: 2rem;
				line-height: 2.2rem;
				color: #232323e5;
			}
		}
	}

	.is-zh {
		.submit-btn {
			padding: 0 7.5rem;
			height: 7.8rem;
			border-radius: 7.74rem;
			column-gap: 3.8rem;
			// justify-content: space-between;
			&,
			.ddl {
				width: 35.4rem;
			}
		}
	}
</style>
