<template>
	<div class="page home--page">
		<div class="hero clearfix">
			<div class="bg"></div>
			<div class="txt--home">
				<h1>{{staticData.hero.t1}}</h1>
				<p>{{staticData.hero.t2}}</p>
				<nuxt-link :to="{name: staticData.hero.link.url}" class="btn btn-reverse-fill">{{staticData.hero.link.txt}}</nuxt-link>
			</div>
		</div>
		<section class="s1">
			<div class="go-down-btn">
				<em class="fa fa-angle-double-down"></em>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-6 title-side">
						<h2 class="title title-shape">{{staticData.s1.title}}</h2>
					</div>
					<div class="col-6 caption-side">
						<p>{{staticData.s1.caption}}</p>
						<nuxt-link :to="{name: staticData.s1.link.url}" class="btn btn-primary">{{staticData.s1.link.txt}}</nuxt-link>
					</div>
				</div>
			</div>
		</section>
		<section class="s2">
			<img src="~/assets/img/hp-s2-i1.jpg" alt="" class="section-bg">
			<div class="container">
				<div class="panel">
					<div class="parts p1">
						<h2 class="title title-shape-center">{{staticData.s2.part1.t1}}</h2>
						<div>
							<p>{{staticData.s2.part1.t2}}</p>
						</div>
					</div>
					<div class="parts p2 row">
						<div class="col-6">
							<h2 class="title title-subtitle">{{staticData.s2.part2.t1}}</h2>
							<p>{{staticData.s2.part2.t2}}</p>
							<nuxt-link :to="{name: staticData.s2.part2.link.url}" class="btn btn-primary">{{staticData.s2.part2.link.txt}}</nuxt-link>
						</div>
						<div class="col-6">
							<div class="imgBox imgBox-shape">
								<img src="~/assets/img/hp-s2-i2.jpg" alt="">
							</div>
						</div>
					</div>
					<div class="parts p3 row">
						<div class="col-6">
							<div class="imgBox imgBox-reverse imgBox-shape-reverse">
								<img src="~/assets/img/hp-s2-i3.jpg" alt="">
							</div>
						</div>
						<div class="col-6">
							<h2 class="title title-subtitle">{{staticData.s2.part3.t1}}</h2>
							<p>{{staticData.s2.part3.t2}}</p>
							<nuxt-link :to="{name: staticData.s2.part3.link.url}" class="btn btn-primary">{{staticData.s2.part3.link.txt}}</nuxt-link>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s3">
			<img src="~/assets/img/hp-s3-i1.jpg" alt="" class="section-bg">
			<div class="container clearfix">
				<div class="panel panel1">
					<div class="parts p1">
						<h2 class="title title-shape-center">{{staticData.s3.part1.t1}}</h2>
					</div>
					<div class="parts p2 row">
						<div class="col-4" v-for="item in staticData.s3.part1.projects">
							<div class="imgBox">
								<img :src="require(`~/assets/img/${item.img}`)" alt="">
								<p>{{item.txt}}</p>
							</div>
						</div>
						<div class="col-12">
							<nuxt-link :to="{name: staticData.s3.part1.link.url}" class="btn btn-primary">{{staticData.s3.part1.link.txt}}</nuxt-link>
						</div>
					</div>
				</div>
				<div class="panel panel2">
					<div class="parts p3 row">
						<div class="col-12">
							<h2 class="title title-shape-center">{{staticData.s3.part2.t1}}</h2>
						</div>
						<div class="col-4" v-for="item in staticData.s3.part2.products">
							<nuxt-link :to="{name: 'lang-products-product',params: {product: item.url}}">
								<div class="imgBox">
									<img :src="require(`~/assets/img/${item.img}`)" alt="">
									<p>{{item.txt}}</p>
								</div>
							</nuxt-link>
						</div>
						<div class="col-12">
							<nuxt-link :to="{name: staticData.s3.part2.link.url}" class="btn btn-primary">{{staticData.s3.part2.link.txt}}</nuxt-link>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s4">
			<img src="~/assets/img/hp-s4-i1.jpg" alt="" class="section-bg">
			<div class="txt">
				<h2 class="title title-shape">{{staticData.s4.t1}} <span>{{staticData.s4.t2}}</span></h2>
				<p>{{staticData.s4.t3}}</p>
				<a :href="staticData.s4.link.url" target="_blank" class="btn btn-reverse-fill">{{staticData.s4.link.txt}}</a>
			</div>
		</section>
		<section class="s5">
			<div class="container">
				<div class="panel">
					<div class="p1">
						<h2 class="title title-shape-center">{{staticData.s5.t1}}</h2>
						<p>{{staticData.s5.t2}}</p>
					</div>
					
					<form action="" class="form">
						<div class="formRow" :class="validation.first_name ? 'err' : ''">
							<input type="text" :placeholder="staticData.s5.t3">
							<p v-if="validation.first_name">{{validation.first_name[0]}}</p>
						</div>
						
						<div class="formRow" :class="validation.last_name ? 'err' : ''">
							<input type="text" :placeholder="staticData.s5.t4">
							<p v-if="validation.last_name">{{validation.last_name[0]}}</p>
						</div>
						
						<div class="formRow" :class="validation.phone_number ? 'err' : ''">
							<input type="text" :placeholder="staticData.s5.t5">
							<p v-if="validation.phone_number">{{validation.phone_number[0]}}</p>
						</div>
						
						<div class="formRow" :class="validation.email ? 'err' : ''">
							<input type="text" :placeholder="staticData.s5.t6">
							<p v-if="validation.email">{{validation.email[0]}}</p>
						</div>
						
						<div class="formRow formRow-wide" :class="validation.message ? 'err' : ''">
							<textarea :placeholder="staticData.s5.t7"></textarea>
							<p v-if="validation.message">{{validation.message[0]}}</p>
						</div>
						
						<div class="formRow buttonRow">
							<button class="btn btn-reverse-fill">{{staticData.s5.t8}}</button>
						</div>
					</form>
				</div>
				<div class="watermark">
					<logo/>
				</div>
			</div>
		</section>
		<section class="s6">
			<div class="container">
				<div class="row">
					<div class="col-2"></div>
					<div class="col-6">
						<h2 class="title title-shape">{{staticData.s6.t1}}</h2>
						<p>{{staticData.s6.t2}}</p>
						<nuxt-link :to="{name: staticData.s6.link1.url}" class="btn btn-primary">{{staticData.s6.link1.txt}}</nuxt-link>
						<a :href="staticData.s6.link2.url" class="btn btn-primary-fill">{{staticData.s6.link2.txt}}</a>
					</div>
					<div class="col-2 img-side">
						<img src="~/assets/img/hp-s6-i1.png" alt="">
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
   export default {
      data() {
         return {
            validation: []
         }
      },
      computed: {
         staticData() {
            if (this.$route.params.lang === 'fa') {
               return this.$store.state.staticData.homePage.fa
            } else if (this.$route.params.lang === 'en') {
               return this.$store.state.staticData.homePage.en
            }
         }
      },
      mounted() {
         const th = 0.5
         const rev = true
         /////////////////// title shapes activation
         const titles = $('.home--page h2.title')
         const titleScene = []

         for (let i = 0; i < titles.length; i++) {
            $(titles[i]).attr('data-pos', i)
            titleScene[i] = this.$scrollmagic.scene({
               triggerElement: `.home--page *[data-pos="${i}"]`,
               triggerHook: th,
               reverse: rev
            }).on('enter', function () {
               $(titles[i]).addClass('active')
            }).on('leave', function () {
               $(titles[i]).removeClass('active')
            })

            this.$scrollmagic.addScene(titleScene[i])
         }
      }
   }
</script>


<style scoped>
	.footer{
		background: #F0F0F0!important;
	}
</style>

