<template>
	<div class="page products--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">
			<div class="container">
				<!--				<div class="filters">-->
				<!--					<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>-->
				<!--					<ul>-->
				<!--						<li-->
				<!--							v-for="item in staticData.s2.filters"-->
				<!--							:key="item.key"-->
				<!--							@click="filter(item.key)">-->
				<!--							<p>{{item.txt}}</p>-->
				<!--						</li>-->
				<!--					</ul>-->
				<!--			</div>-->
				<div class="row">
					<div class="col-3 mb-5">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 1}}" class="product">
							<img src="~/assets/img/products/product-01.jpg" alt="">
							<h4>گریتینگ</h4>
							<p>توضیحات کوتاه</p>
						</nuxt-link>
					</div>
					<div class="col-3 mb-5">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 2}}" class="product">
							<img src="~/assets/img/products/product-01.jpg" alt="">
							<h4>گریتینگ</h4>
							<p>توضیحات کوتاه</p>
						</nuxt-link>
					</div>
					<div class="col-3 mb-5">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 3}}" class="product">
							<img src="~/assets/img/products/product-01.jpg" alt="">
							<h4>گریتینگ</h4>
							<p>توضیحات کوتاه</p>
						</nuxt-link>
					</div>
					<div class="col-3 mb-5">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 4}}" class="product">
							<img src="~/assets/img/products/product-01.jpg" alt="">
							<h4>گریتینگ</h4>
							<p>توضیحات کوتاه</p>
						</nuxt-link>
					</div>
					<div class="col-3 mb-5">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: ''}}" class="product">
							<img src="~/assets/img/products/product-01.jpg" alt="">
							<h4>گریتینگ</h4>
							<p>توضیحات کوتاه</p>
						</nuxt-link>
					</div>
					<div class="col-3 mb-5">
						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: ''}}" class="product">
							<img src="~/assets/img/products/product-01.jpg" alt="">
							<h4>گریتینگ</h4>
							<p>توضیحات کوتاه</p>
						</nuxt-link>
					</div>
				</div>
			</div>
		</section>
		<section class="s3">
			<div class="container">
				<div class="panel">
					<h2 class="title title-shape-center">
						{{staticData.s3.t1}}
						<span class="subtitle">{{staticData.s3.t2}}</span>
					</h2>
					<p>{{staticData.s3.t3}}</p>
					<a href="" target="_blank" class="btn btn-reverse-fill">{{staticData.s3.t4}}</a>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
   export default {
      computed: {
         staticData() {
            return this.$store.state.staticData.products[this.$route.params.lang]
         }
      },
      methods: {
         filter(key) {

         }
      }
   }
</script>
