<template>
	<div class="page services--page">
		<hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<h2 class="title">{{staticData.s1.t1}}</h2>
					<p>{{staticData.s1.t2}}</p>
				</div>
			</div>
		</section>
		<section class="s2">
			<img src="~/assets/img/services-s2-i1.jpg" alt="" class="section-bg">
			<div class="container">
				<div class="panel">
					<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>
					<ol>
						<li v-for="item in staticData.s2.t2">
							<p>{{item.txt}}</p>
						</li>
					</ol>
				</div>
			</div>
		</section>
		<section class="s3">
			<img src="~/assets/img/services-s3-i1.jpg" alt="" class="section-bg">
			<div class="container">
				<div class="panel">
					<div class="parts p1">
						<h2 class="title title-shape-center">{{staticData.s3.part1.t1}}</h2>
						<p>{{staticData.s3.part1.t2}}</p>
					</div>
					<div class="parts row align-items-center" v-for="(item, index) in staticData.s3.dynamicPart">
						<div class="col-6" v-if="index%2 === 0">
							<h2 class="title title-subtitle">{{item.t1}}</h2>
							<p>{{item.t2}}</p>
						</div>
						<div class="col-6">
							<div class="imgBox" :class="index%2 === 0 ? 'imgBox-shape' : 'imgBox-reverse imgBox-shape-reverse'">
								<img :src="require(`~/assets/img/${item.img}`)" alt="">
							</div>
						</div>
						<div class="col-6 align-items-center" v-if="index%2 !== 0">
							<h2 class="title title-subtitle">{{item.t1}}</h2>
							<p>{{item.t2}}</p>
						</div>
					</div>
					<div class="parts lastPart">
						<h2 class="title title-subtitle">{{staticData.s3.lastPart.t1}}</h2>
						<p>{{staticData.s3.lastPart.t2}}</p>
					</div>
				</div>
			</div>
		</section>
		<customersCommunication/>
	</div>
</template>


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