<template>
	<div class="page about--page">
		<hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<div class="parts p1">
						<logo/>
						<span>{{staticData.s1.p1}}</span>
					</div>
					<div class="parts p2 row">
						<div class="col-6">
							<p>{{staticData.s1.p2}}</p>
						</div>
						<div class="col-6">
							<div class="imgBox">
								<img src="~/assets/img/about-s1-i1.jpg" alt="">
							</div>
						</div>
					</div>
					<div class="parts p3 row">
						<div class="col-6">
							<div class="imgBox imgBox-reverse">
								<img src="~/assets/img/about-s1-i2.jpg" alt="">
							</div>
						</div>
						<div class="col-6">
							<p v-html="staticData.s1.p3"></p>
						</div>
					</div>
					<div class="parts p4 row">
						<div class="col-12">
							<p v-html="staticData.s1.p4"></p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s2">
			<div class="container">
				<h2 class="title title-shape">{{staticData.s2.p1}}</h2>
				<p v-html="staticData.s2.p2"></p>
			</div>
		</section>
		<section class="s3">
			<div class="container">
				<div v-for="(item , index) in staticData.s3" class="panel" :class="'p'+(index+1)">
					<div class="row">
						<div class="col-5 img">
							<img :src="require('~/assets/img/'+ item.img)" alt="">
						</div>
						<div class="col-7 txt">
							<p>{{item.title}}</p>
							<a :href="item.link.url" class="btn btn-primary" target="_blank">{{item.link.txt}}</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<customersCommunication/>
	</div>
</template>


<script>
   export default {
      computed: {
         staticData() {
            if (this.$route.params.lang === 'fa') {
               return this.$store.state.staticData.about.fa
            } else if (this.$route.params.lang === 'en') {
               return this.$store.state.staticData.about.en
            }
         }
      }
   }
</script>
