<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
import coreconcept_1 from "@/assets/images/collectionStory/coreconcept_1.png";
import coreconcept_2 from "@/assets/images/collectionStory/coreconcept_2.png";
import coreconcept_3 from "@/assets/images/collectionStory/coreconcept_3.png";
import coreconcept_4 from "@/assets/images/collectionStory/coreconcept_4.png";
import coreconcept_5 from "@/assets/images/collectionStory/coreconcept_5.png";

//const props = defineProps({
//})
//const emit = defineEmits([
//])
const modules = [Navigation, Pagination, Autoplay]
let data = reactive({
})
let slides = [
	{ image: coreconcept_1, text: 'Layered Heritage, Coastal Stillness' },
	{ image: coreconcept_2, text: 'Nomadic Silhouettes, Golden Wandering' },
	{ image: coreconcept_3, text: 'Pastoral Communion, Woven Earth' },
	{ image: coreconcept_4, text: 'Layered winter silhouettes' },
	{ image: coreconcept_5, text: 'Insulated winterwear inspired by high-altitude traditions' },
]
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="core-concept">
		<div class="title">Core Concept</div>
		<div class="info">
			<div>
				We are spiritual nomads carrying what wind cannot take. This collection honors those who knew home is not a place, but what you wear. Earthy palettes of terracotta, ochre, and natural beige evoke pastoral landscapes, while layered textiles and handwoven fabrics embody portable heritage. Each garment balances burden and beauty—sustainable materials and artisanal craftsmanship create timeless pieces that travel with the wearer, transforming clothing into sanctuary and memory woven into fabric.
			</div>
			<br />
			<div>
				This winterwear series reinterprets high-altitude nomadic clothing through modern, refined construction. Layered silhouettes, tactile wools, and structured draping create warmth while preserving fluid movement. Textural contrasts and sculptural volumes evoke the surrounding snowy landscapes and monastic architecture. The collection balances cultural references with contemporary tailoring, presenting outerwear that feels protective, grounded, and quietly elegant within its harsh winter environment.
			</div>
		</div>
		<div class="swiper">
			<swiper
				:modules="modules"
				:slides-per-view="'auto'"
				space-between="24"
				:navigation="{
					prevEl: '.custom-prev',
					nextEl: '.custom-next'
				}"
				>
				<div class="custom-prev">
					<div style="transform: rotate(180deg);">
						<svg-icon name="collectionStory-swiperRight" size="24" />
					</div>
				</div>
				<div class="custom-next">
					<div>
						<svg-icon name="collectionStory-swiperRight" size="24" />
					</div>
				</div>
				<swiper-slide v-for="item in slides" :key="item.id">
					<div class="slide-content">
						<img :src="item.image" :alt="item.text" />
						<div class="text">{{ item.text }}</div>
					</div>
				</swiper-slide>
   			 </swiper>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.core-concept{
		width: 100%;
		height: auto;
		position: relative;
		padding: 6rem 0;
		> .title{
			padding: 0 2.4rem;
			font-family: "KaiseiOpti-Bold";
			font-weight: 700;
			font-size: 3rem;
			line-height: 100%;
			margin-bottom: 6rem;
		}
		> .info{
			width: 70.7rem;
			margin: 0 auto;
			margin-bottom: 4rem;
			> div{
				font-family: "KaiseiOpti-Regular";
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 2.3rem;
			}
		}
		> .swiper{
			width: 100%;
			padding: 0 2.4rem;
			padding-top: 1rem;
			position: relative;
			.custom-prev,.custom-next{
				position: absolute;
				top: 16rem;
				z-index: 2;
				cursor: pointer;
				color: #fff;
				filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
			}
			.custom-prev{
				left: 0;
			}
			.custom-next{
				left: auto;
				right: 0;
			}
			.slide-content{
				width: min-content;
				> img{
					height: 34.2rem;
					width: auto;
				}
				> .text{
					margin-top: 1rem;
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.4rem;
					line-height: 2.3rem;
				}
			}
			:deep(.swiper-slide){
				width: auto;
				
			}
		}
	}
</style>