<template>
	<LazyHydrate when-visible>
	<div class="about-page">
		
		<div class="about-page__header">
			<div class="about-page__container">
				<breadcrumb-base class="about-page__breadcrumb" />
				<h1 class="about-page__title">
					{{ pageData.title }}
				</h1>
				<div class="about-page__contents">
					{{ pageData.headerContent }}
				</div>
				<div class="about-page__images-row">
					<div class="about-page__image-wrapper">
						<picture >
							<source srcset="@/assets/images/about-us/about-5.avif"    />
							<img
										loading="eager"
										decoding="async"
										alt=""
										src="@/assets/images/about-us/about-5.jpg"
										class="about-page__image"
										width="516" height="327.09"
									/>
						</picture>
					</div>
					<div class="about-page__image-wrapper">
						<picture >
							<source srcset="@/assets/images/about-us/about-2.avif"    />
							<img
										loading="eager"
										decoding="async"
										alt=""
										src="@/assets/images/about-us/about-2.jpg"
										class="about-page__image"
										width="516" height="327.09"
									/>
						</picture>
		
					</div>
				</div>
			</div>
		</div>
		<div class="about-page__container">
			<h2 class="about-page__sub-title">
				{{ pageData.subTitle }}
			</h2>
			<div class="about-page__contents">
				{{ pageData.bodyContent }}
			</div>
			<div class="about-page__time-line__wrapper">
				<div
					v-for="item in pageData.timeline"
					:key="item.year"
					class="about-page__time-line__item"
					v-animate-onscroll="'animated zoomIn'"
				>
					<div class="about-page__time-line__item__year">
						{{ item.year }}
					</div>
					<div class="about-page__time-line__item__title">
						{{ item.title }}
					</div>
					<div class="about-page__time-line__item__description">
						{{ item.description }}
					</div>
				</div>
				<div class="about-page__time-line__today">
					{{ $t("today") }}
				</div>
			</div>
			<div class="about-page__images-row">
				<div class="about-page__image-wrapper">
					<picture >
							<source srcset="@/assets/images/about-us/about-3.avif"    />
							<img
										loading="lazy"
										decoding="async"
										alt=""
										src="@/assets/images/about-us/about-3.jpg"
										class="about-page__image"
										width="516" height="327.09"
									/>
						</picture>
				 
				</div>
				<div class="about-page__image-wrapper">
					<picture >
							<source srcset="@/assets/images/about-us/about-6.avif"    />
							<img
										loading="lazy"
										decoding="async"
										alt=""
										src="@/assets/images/about-us/about-6.jpg"
										class="about-page__image"
										width="516" height="327.09"
									/>
						</picture>
			 
				</div>
			</div>
		</div>
 
	</div>
</LazyHydrate>
</template>
<script>
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";
import pageData from "../../store/about-us-page.json";
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "AboutUsIndex",
	async asyncData({ $axios }) {
		return {
			title: "درباره ما"
		};
	},
	components: {
		breadcrumbBase,
		LazyHydrate
	},
	computed: {
		enData() {
			return pageData.en;
		},
		faData() {
			return pageData.fa;
		},
		isFa() {
			return this.$i18n.locale === "fa";
		},
		pageData() {
			if (this.isFa) return this.faData;
			return this.enData;
		}
	},
	head() {
		return {
			title: `${this.$t("about-us")} | ${this.$t("parsmega")}`,
			meta: [],
			link: [
				{
					rel: "stylesheet",
					type: "text/css",
					href: "/css_libs/animate.min.css"
				}
			]
		};
	}
};
</script>
<style lang="scss">
@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}


.about-page {
	line-height: 1.8;
	$time-line-arrow-size: 8px;

	padding-bottom: $padding-default * 2;
	width: 100%;

	&__breadcrumb {
		padding-left: 0;
		padding-right: 0;
	}

	&__header {
		background: $color-white--dark2;
		margin-bottom: $padding-default;
		position: relative;

		&::after {
			background-color: $color-white--dark;
			bottom: 0;
			content: "";
			display: block;
			height: 10%;
			position: absolute;
			right: 0;
			width: 100%;
			z-index: 0;
		}
	}

	&__container {
		margin: 0 auto;
		max-width: $app-max-width;
		padding: 0 $padding-default;
		position: relative;
		z-index: 1;
	}

	&__title,
	&__sub-title {
		font-weight: bold;
		margin: 0 auto;
		padding: $padding-default 0;
	}

	&__title {
		font-size: 18px;
	}

	&__sub-title {
		font-size: 16px;
	}

	&__contents {
		color: $color-text--light;
		font-size: 14px;
		line-height: 2;

		p {
			margin: 0 auto;
			padding: 0;
		}
	}

	&__images-row {
		font-size: 0;
	}

	&__image-wrapper {
		margin: 0 auto;
		margin-top: $padding-default;
		overflow: hidden;
		position: relative;

		&::after {
			background-color: gray;
			content: "";
			display: block;
			padding-top: 63%;
		}
	}

	&__image {
		animation-name: image-section-transition;
		animation-duration: 0.2s;
		animation-delay: 0.4s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		transform: scale(0);
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	&__time-line {
		&__wrapper {
			margin: $padding-default auto;
			min-height: 250px;
			padding-top: $padding-default * 2;
			position: relative;

			&::before {
				background-color: $color-white--dark2;
				content: "";
				display: block;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				width: 2px;
			}
		}

		&__item {
			margin-bottom: $padding-default * 2.5;
			line-height: 1.8;
			padding-right: $padding-default;
			position: relative;

			&::before {
				border: $time-line-arrow-size solid transparent;
				border-left: none;
				border-right-color: $color-white--dark2;
				content: "";
				position: absolute;
				right: 0;
				top: 5px;
			}

			&__year {
				color: $color-primary;
				font-size: 17px;
				font-weight: bold;
			}

			&__title {
				color: $color-text;
				font-weight: bold;
				font-size: 14px;
				margin: 0;
				padding: 2px 0;
			}

			&__description {
				color: $color-text--light;
				font-size: 14px;

				p {
					padding: 0;
					margin: 0;
				}
			}
		}

		&__today {
			background-color: $color-white--dark2;
			clear: both;
			color: $color-text;
			display: block;
			height: 36px;
			line-height: 36px;
			border-radius: 20px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			position: relative;
			z-index: 2;
			text-align: center;
			width: 150px;
		}
	}

	@media (min-width: $tablet) {
		&__image-wrapper {
			clear: both;
			display: inline-block;
			vertical-align: top;
			width: calc(50% - #{$padding-default/2});

			&:nth-child(1) {
				margin-left: $padding-default;
			}
		}

		&__time-line {
			&__wrapper {
				&::before {
					right: 49.9%;
				}
			}

			&__item {
				clear: both;
				width: 50%;

				&:nth-child(2n + 1) {
					float: left;
					padding-right: $padding-default * 1.5;
				}

				&:nth-child(2n) {
					padding-left: $padding-default * 1.5;
					padding-right: 0;
					text-align: left;

					&::before {
						border: $time-line-arrow-size solid transparent;
						border-right: none;
						border-left-color: $color-white--dark2;
						content: "";
						left: 0;
						position: absolute;
						right: auto;
					}
				}
			}

			&__today {
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
				margin: 0 auto;
			}
		}
	}
}

[data-lang="en"] {
	.about-page {
		$time-line-arrow-size: 8px;

		&__time-line {
			&__wrapper {
				&::before {
					left: 0;
					right: unset;
				}
			}

			&__item {
				padding-left: $padding-default;
				padding-right: 0;

				&::before {
					border: $time-line-arrow-size solid transparent;
					border-right: none;
					border-left-color: $color-white--dark2;
					left: 0;
					position: absolute;
					right: unset;
				}
			}
		}

		@media (min-width: $tablet) {
			&__image-wrapper {
				&:nth-child(1) {
					margin-left: 0;
					margin-right: $padding-default;
				}
			}

			&__time-line {
				&__wrapper {
					&::before {
						left: 49.9%;
						right: unset;
					}
				}

				&__item {
					&:nth-child(2n + 1) {
						float: right;
						padding-left: $padding-default * 1.5;
						padding-right: 0;
					}

					&:nth-child(2n) {
						padding-left: 0;
						padding-right: $padding-default * 1.5;
						text-align: right;

						&::before {
							border: $time-line-arrow-size solid transparent;
							border-left: none;
							border-right-color: $color-white--dark2;
							left: auto;
							right: 0;
						}
					}
				}
			}
		}
	}
}
</style>