<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import Detail from "./detail/index.vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="collectionStory">
		<div class="first-screen">
			<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
			<div class="back">
				<SvgIcon name="collectionStory-back" size="20" />
				<div class="text">Back to Home</div>
			</div>
			<div class="title-content">
				<div class="title-box">
					<div class="left">
						<div class="title">
							Windswept Burden
						</div>
						<div class="info">
							Publish Date: 24th Nov 2025
						</div>
					</div>
					<div class="right">
						<div class="info">
							“We are spiritual nomads carrying what wind cannot take. <br />
							Inspired by those who knew home is not a place, but what you wear.”
						</div>
					</div>
				</div>
				<div class="scrolling-learn-more">
					<div>Scrolling Learn More</div>
					<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
				</div>
			</div>
		</div>
		<div class="content">
			<Detail></Detail>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.collectionStory{
		width: 100%;
		height: 100%;
		position: relative;
		overflow-y: auto;
		.first-screen{
			position: relative;
			height: auto;
			display: flex;
			overflow: hidden;
			> .back{
				position: absolute;
				top: 2.4rem;
				left: 2.4rem;
				display: flex;
				align-items: center;
				gap: .8rem;
				color: #fff;
				cursor: pointer;
				> .text{
					font-size: 2rem;
					font-weight: 500;
					white-space: nowrap;
				}
			}
			> .title-content{
				width: 100%;
				height: 63.2rem;
				margin-top: 24.8rem;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
				padding: 0 4rem;
				> .title-box{
					margin-top: 36.7rem;
					color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					> .left{
						font-family: 'KaiseiOpti-Bold';
						font-weight: 700;
						> .title{
							font-size: 6rem;
							line-height: 6rem;
						}
						> .info{
							margin-top: 1.7rem;
							font-size: 1.8rem;
							line-height: 100%;
							vertical-align: bottom;
						}
					}
					> .right{
						> .info{
							font-weight: 500;
							font-size: 1.8rem;
							line-height: 100%;
							text-align: right;
						}
					}
				}	
			}
			.scrolling-learn-more{
				position: absolute;
				bottom: 2.1rem;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				color: #fff;
				> div{
					font-family: 'KaiseiOpti-Regular';
					font-weight: 400;
					font-size: 1.4rem;	
					line-height: 100%;
					text-align: center;
					margin-bottom: 1.5rem;
					white-space: nowrap;
				}
			}
			.banner{
				width: 100%;
				position: absolute;
				z-index: -1;
			}
		}
		.content{
			width: 100%;
			min-height: 100%;
			height: 100%;
		}
		
	}
</style>