<template>
	<div class="award-page">
		<div class="banner">
			<div
				class="submit-btn flex flex-center"
				@click="handleSubmitApplication"
			>
				<div>Submit your Application</div>
				<img
					src="@/assets/images/award/arrow_right.png"
					alt=""
					class="arrow"
				/>
				<div class="ddl">Application Deadline:15th March 2026</div>
			</div>
		</div>
		<div class="blocks-list flex">
			<div
				class="block-item flex flex-col flex-center"
				v-for="item in blocksList"
				:key="item.number"
			>
				<div class="number">{{ item.number }}</div>
				<div class="label">{{ item.label }}</div>
				<div class="line"></div>
			</div>
		</div>
		<div class="bloom container flex flex-col align-center">
			<div class="title">Bloom Your Creativity</div>
			<img
				src="@/assets/images/award/bloom_logo.png"
				class="logo"
			/>
			<div class="season">Theme of 2026</div>
			<div class="desc">
				Where imagination meets innovation, creativity blooms. This theme
				celebrates AI as a catalyst for fashion design, allowing your vision to
				flourish beyond traditional boundaries. Let your ideas blossom into
				extraordinary designs that merge human artistry with artificial
				intelligence.
			</div>
		</div>
		<!-- <div class="design-container container">
			<div class="design-title limit">Design Without Borders</div>
			<div class="limit">
				<img
					src="@/assets/images/award/bloom_logo.png"
					class="logo"
				/>
			</div>
			<div class="global limit">Global Opportunity</div>
			<div class="desc">
				Open to visionary designers across the globe. From Seoul to Singapore, New
				York to Shanghai, we're seeking the next generation of fashion innovators
				who dare to reimagine the future of design.
			</div>
		</div> -->
		<div class="timeline-container container flex flex-col align-center">
			<div class="timeline-title">Competition Timeline</div>
			<!-- <img
				src="@/assets/images/award/bloom_logo.png"
				alt=""
				class="logo"
			/> -->
			<div class="desc">Shaping the Future</div>
			<div class="timeline-point">
				<div class="labels-row flex align-center">
					<div
						class="item-label flex flex-col"
						v-for="item in points"
						:key="'label-' + item.time"
					>
						<div class="main-label">{{ item.label }}</div>
						<div
							class="sub-label"
							v-if="item.subLabel"
						>
							{{ item.subLabel }}
						</div>
					</div>
				</div>
				<!-- Icons row -->
				<div class="icons-row flex align-center">
					<div class="timeline-line"></div>
					<img
						src="@/assets/images/award/point.png"
						class="point-icon"
						v-for="item in points"
						:key="'icon-' + item.time"
					/>
				</div>

				<!-- Times row -->
				<div class="times-row flex align-center">
					<div
						class="item-time"
						v-for="item in points"
						:key="'time-' + item.time"
					>
						{{ item.time }}
					</div>
				</div>
				<!-- Descriptions row -->
				<div class="descs-row flex align-center">
					<div
						class="item-desc flex justify-center"
						v-for="item in points"
						:key="'desc-' + item.time"
					>
						<div class="txt">
							{{ item.desc }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<JudgesSection />
		<PrizesSection />
		<ApplySection />
		<SelectionSection />
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	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'

	const router = useRouter()

	const handleSubmitApplication = () => {
		router.push('/award/apply')
	}

	const blocksList = ref([
		{
			number: 'NETWORKING\n OPPORTUNITIES',
			label: 'with international\nmedia and designers'
		},
		{
			number: 'INTERNATIONAL\nMEDIA EXPOSE',
			label: 'through\nleading outlets'
		},
		{
			number: 'UP TO\nUS$9000',
			label: 'in total prize\npool awards'
		},
		{
			number: 'TRAVEL\NALLOWANCE',
			label: 'for finalists to attend\naward ceremony'
		}
	])

	const points = ref([
		{
			label: 'Select Top 20',
			time: 'May',
			desc: 'Submit your design concept, mood board, and initial sketch.'
		},
		{
			label: `Top 20`,
			subLabel: 'Collections  Finalize',
			time: 'June',
			desc: 'Complete collections, physical garments, and AiDA process videos due.'
		},
		{
			label: `Top 3`,
			subLabel: 'Finalists Select',
			time: 'August',
			desc: 'Complete collections, physical garments, and AiDA process videos due.'
		},
		{
			label: 'Award  Ceremony',
			time: 'November',
			desc: 'Winners revealed with media coverage and live showcase.'
		}
	])
</script>

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

	.logo {
		width: 2.4rem;
		height: 2.4rem;
	}
	.banner {
		height: 108rem;
		background: url('@/assets/images/award/banner.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		.submit-btn {
			width: 41rem;
			height: 6.394rem;
			line-height: 6.394rem;
			text-align: center;
			border-radius: 3.2rem;
			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;
			top: 23.88rem;
			left: 51rem;
			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: 'Arial';
				font-weight: 400;
				font-size: 2rem;
				line-height: 2.2rem;
			}
		}
	}
	.blocks-list {
		height: 31.4rem;
		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);

		.block-item {
			flex: 1;
			height: 100%;
			color: #fff;
			position: relative;
			text-align: center;
			white-space: pre-line;
			row-gap: 3rem;
			.number {
				font-size: 3.6rem;
				font-family: 'PoppinsBold';
				font-weight: 600;
			}
			.label {
				font-size: 2.4rem;
				font-family: 'Arial';
				font-weight: 400;
				letter-spacing: 0.05em;
			}
			.line {
				position: absolute;
				bottom: 50%;
				right: 0;
				transform: translate(0, 50%);
				width: 0.1rem;
				height: 27.4rem;
				background-color: #8d8d8d;
			}
		}
	}
	.bloom {
		padding-top: 12.8rem;
		font-family: 'Poppins';
		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
		background-size: 100% 100%;
		.title {
			font-size: 4rem;
			color: #232323;
			margin-bottom: 2.4rem;
		}
		.logo {
			margin-bottom: 2.2rem;
		}
		.season {
			font-size: 3rem;
			color: #c7342c;
			margin-bottom: 6.6rem;
		}
		.desc {
			font-family: 'Arial';
			font-size: 2.8rem;
			color: #585858;
			text-align: center;
			padding: 0 21.5rem;
			line-height: 4.5rem;
			margin-bottom: 12.3rem;
		}
	}
	// .design-container {
	// 	background: url('@/assets/images/award/design_bg.png') no-repeat;
	// 	background-size: 100% 100%;
	// 	padding-left: 21.5rem;
	// 	padding-top: 16rem;
	// 	.limit {
	// 		width: 48.4rem;
	// 		text-align: center;
	// 	}
	// 	.design-title {
	// 		color: #fff;
	// 		font-size: 4rem;
	// 		font-weight: 600;
	// 		font-family: 'Poppins';
	// 		font-style: SemiBold;
	// 		vertical-align: middle;
	// 		text-transform: capitalize;
	// 	}
	// 	.logo {
	// 		margin-top: 2.4rem;
	// 		margin-bottom: 2.1rem;
	// 	}
	// 	.global {
	// 		font-family: 'Poppins';
	// 		font-size: 3rem;
	// 		color: #f95750;
	// 		margin-bottom: 19.8rem;
	// 	}
	// 	.desc {
	// 		font-family: 'Arial';
	// 		font-weight: 400;
	// 		font-size: 2.8rem;
	// 		color: #e0e0e0;
	// 		width: 54rem;
	// 	}
	// }
	.timeline-container {
		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding-top: 12.8rem;
		width: 100%;
		color: #fff;
		.timeline-title {
			font-family: 'PoppinsBold';
			font-weight: 600;
			font-size: 4rem;
			text-align: center;
			vertical-align: middle;
		}
		.logo {
			margin: 2.4rem 0 2.2rem 0;
		}
		.desc {
			font-family: 'Arial';
			font-size: 3rem;
			font-weight: 400;
			color: #f95750;
		}
		.timeline-point {
			flex: 1;
			width: 100%;
			margin-top: 12rem;
			padding: 0 21.2rem 0 22rem;
			position: relative;
			z-index: 2;

			.labels-row {
				position: relative;
				z-index: 2;
				margin-bottom: 8rem;
				.item-label {
					flex: 1;
					color: #fff;
					font-family: 'PoppinsBold';
					font-weight: 600;
					font-size: 2.8rem;
					text-align: center;
					white-space: pre-line;
					height: 6rem;
					justify-content: center;
				}
			}

			.icons-row {
				margin-bottom: 1.6rem;
				position: relative;
				z-index: 2;
				.point-icon {
					width: 6.4rem;
					height: 6.4rem;
					display: block;
					margin: 0 auto;
					z-index: 2;
				}
				.timeline-line {
					width: calc(100% + 22rem + 21.2rem);
					left: -22rem;
					height: 0.15rem;
					background: linear-gradient(
						90deg,
						rgba(199, 52, 44, 0) 0%,
						rgba(199, 52, 44, 0.719626) 25.96%,
						#c7342c 51.44%,
						rgba(199, 52, 44, 0.762376) 75.96%,
						rgba(199, 52, 44, 0) 100%
					);
					position: absolute;
					bottom: 50%;
					transform: translateY(-50%);
					z-index: 1;
				}
			}

			.times-row {
				margin-bottom: 6rem;
				z-index: 2;
				position: relative;
				.item-time {
					flex: 1;
					color: #f95750;
					font-family: 'Arial';
					font-weight: 400;
					font-size: 2.8rem;
					line-height: 4.5rem;
					text-align: center;
				}
			}

			.descs-row {
				.item-desc {
					flex: 1;
					.txt {
						font-family: 'Arial';
						font-weight: 400;
						font-size: 2rem;
						text-align: center;
						color: #e0e0e0;
						width: 31.2rem;
						height: 10.2rem;
					}
				}
			}
		}
	}

	.footer {
		height: 10rem;
		padding-left: 21.5rem;
		padding-right: 22rem;
		background-color: #232323;
		.social-list {
			column-gap: 2rem;
			img {
				width: 2rem;
				height: 2rem;
			}
		}
		.copyright {
			color: #fff;
			font-family: 'Arial';
			font-weight: 400;
			font-size: 1.2rem;
		}
	}
</style>
