<template>
	<div class="page products--page">
		<hero :title="staticData.hero"/>
		<section class="s1">
			<div class="container">
				<div class="panel">
					<h2 class="title title-shape-center">{{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>
		</section>
	</div>
</template>

<script>
   export default {
      computed: {
         staticData() {
            if (this.$route.params.lang === 'fa') {
               return this.$store.state.staticData.products.fa
            } else if (this.$route.params.lang === 'en') {
               return this.$store.state.staticData.products.en
            }
         }
      },
      methods: {
         filter(key) {

         }
      }
   }
</script>
