<template>
  <div class="page tech-info--page latin-digits">
    <Hero :title="staticData.title"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <div class="content gUsage">
            <h2 class="first">{{ staticData.t1 }}</h2>
            <p v-html="staticData.t2"></p>
            <p>{{ staticData.t3 }}</p>
            <p>{{ staticData.t4 }}</p>
            <p>{{ staticData.t5 }}</p>

            <ul>
              <li>
                <p>{{ staticData.t6 }}</p>
              </li>
              <li>
                <p>{{ staticData.t7 }}</p>
              </li>
              <li>
                <p>{{ staticData.t8 }}</p>
              </li>
              <li>
                <p>{{ staticData.t9 }}</p>
              </li>
              <li>
                <p>{{ staticData.t10 }}</p>
              </li>
              <li>
                <p>{{ staticData.t11 }}</p>
              </li>
              <li>
                <p>{{ staticData.t12 }}</p>
              </li>
              <li>
                <p>{{ staticData.t13 }}</p>
              </li>
              <li>
                <p>{{ staticData.t14 }}</p>
              </li>
            </ul>

            <h2 class="first mt-5">{{ staticData.t17 }}</h2>
            <div class="images">
              <img src="~/assets/img/grating-usage/4.jpg" :alt="staticData.title">
              <img src="~/assets/img/grating-usage/8.jpg" :alt="staticData.title">
              <img src="~/assets/img/grating-usage/13.jpg" :alt="staticData.title">
              <img src="~/assets/img/grating-usage/88-wood-1.jpg" :alt="staticData.title">
              <img src="~/assets/img/grating-usage/industri-2.jpg" :alt="staticData.title">
              <img src="~/assets/img/grating-usage/infills-1b.jpg" :alt="staticData.title">
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="s2">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2 class="title">{{ staticData.t15 }}</h2>
            <nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t16 }}</nuxt-link>
          </div>
        </div>
      </div>
    </section>
    <CustomersCommunication/>
  </div>
</template>

<script>
import {fadeInAnimation} from "~/mixins/animations"

export default {
  computed: {
    staticData() {
      return this.$store.state.staticData.gUsage[this.$route.params.lang]
    }
  },
  mixins: [fadeInAnimation],
  head() {
    return {
      title: this.staticData.title
    }
  }
}
</script>
