<template>
	<div class="page home--page">
		
		<div id="slider">
			<div class="hero clearfix">
				<div class="bg"></div>
				<div class="txt--home">
					<h1>{{staticData.hero.t1}}</h1>
					<p>{{staticData.hero.t2}}</p>
				</div>
			</div>
			<div class="hero clearfix">
				<div class="bg"></div>
				<div class="txt--home">
					<h1>{{staticData.hero.t1}}</h1>
					<p>{{staticData.hero.t2}}</p>
				</div>
			</div>
			<div class="hero clearfix">
				<div class="bg"></div>
				<div class="txt--home">
					<h1>{{staticData.hero.t1}}</h1>
					<p>{{staticData.hero.t2}}</p>
				</div>
			</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: 'lang-about',params:{lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1.link}}</nuxt-link>
					</div>
				</div>
			</div>
		</section>
		<section class="s1-2">
			<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg">
			<div class="container">
				<div class="panel">
					<div class="row">
						<div class="col-12">
							<h2 class="title title-shape-center">{{staticData.s1_2.t1}}</h2>
						</div>
						<div class="col-12">
							<p>{{staticData.s1_2.t2}}</p>
							<p>{{staticData.s1_2.t3}}</p>
							<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1_2.link}}</nuxt-link>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s2">
			<img src="~/assets/img/home/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.t1}}</h2>
						<div>
							<p>{{staticData.s2.t2}}</p>
						</div>
					</div>
					<div class="parts p2 row">
						<div class="col-6">
							<div class="txtBox">
								<h2 class="title title-subtitle">{{staticData.s2.t5}}</h2>
								<p>{{staticData.s2.t6}}</p>
								<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link1}}</nuxt-link>
							</div>
						</div>
						<div class="col-6">
							<div class="imgBox imgBox-shape">
								<img src="~/assets/img/home/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/home/hp-s2-i3.jpg" alt="">
							</div>
						</div>
						<div class="col-6">
							<div class="txtBox">
								<h2 class="title title-subtitle">{{staticData.s2.t3}}</h2>
								<p>{{staticData.s2.t4}}</p>
								<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link2}}</nuxt-link>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s3">
			<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg">
			<div class="container clearfix">
				<div class="panel">
					<div class="parts p1">
						<h2 class="title title-shape-center">{{staticData.s3.t1}}</h2>
						<div class="col-12">
							<p>{{staticData.s3.t2}}</p>
						</div>
					</div>
				</div>
				<div class="products">
					<div class="parts p2 row">
						<div class="col-4" v-for="item in products">
							<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item.url}}">
								<div class="imgBox">
									<img :src="require(`~/assets/img/home/${item.img}`)" alt="">
									<p>{{item.txt}}</p>
								</div>
							</nuxt-link>
						</div>
						<div class="col-12">
							<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s3.link}}</nuxt-link>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="s4">
			<img src="~/assets/img/home/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="catalog_link" target="_blank" download="catalog.pdf" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
			</div>
		</section>
		<CustomersCommunication/>
		<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}}</nuxt-link>
						<a :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{staticData.s6.link2}}</a>
					</div>
					<div class="col-2 img-side">
						<img src="~/assets/img/home/hp-s6-i1.png" alt="">
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
   if (process.client) require('slick-carousel')
   export default {
      data() {
         return {
            products: [
               {
                  img: 'hp-s3-i5.jpg',
                  txt: 'گریتینگ پله',
                  url: '1'
               },
               {
                  img: 'hp-s3-i6.jpg',
                  txt: 'گریتینگ گالوانیزه',
                  url: '2'
               },
               {
                  img: 'hp-s3-i7.jpg',
                  txt: 'گریتینگ آلومینیوم',
                  url: '3'
               },
               {
                  img: 'hp-s3-i8.jpg',
                  txt: 'گریتینگ الکتروفورج',
                  url: '4'
               },
               {
                  img: 'hp-s3-i9.jpg',
                  txt: 'پنل گریتینگ',
                  url: '5'
               },
               {
                  img: 'hp-s3-i10.jpg',
                  txt: 'گریتینگ تسمه در تسمه',
                  url: '6'
               }
            ],
            catalog_link: this.$store.state.staticData.catalog_link,
            calc_app_link: this.$store.state.staticData.calc_app_link,
            validation: []
         }
      },
      computed: {
         staticData() {
            return this.$store.state.staticData.homePage[this.$route.params.lang]
         }
      },
      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])
         // }

         /////////////////////////////////////// carousel
         $('#slider').slick({
            slidesToShow: 1,
            rtl: this.$route.params.lang === 'fa',
            dots: true,
            autoplay: true,
            autoplaySpeed: 6000
         })
      }
   }
</script>


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