<template>
     <div class="container">
      <div class="how-work-section">
        <div class="row">
          <div class="col-12 col-xl-4 col-lg-16">
            <div class="text-container">
              <span> {{ $t("how1") }} </span>
              <h3 class="mobileHead">{{ $t("how2") }}</h3>
              <p>
                {{ $t("headStep") }}
              </p>
              <nuxt-link :to="localePath('/contact')">
                <button class="contactBtn">{{ $t("contactUs") }}</button>
              </nuxt-link>
            </div>
          </div>
          <div class="col-12 col-xl-8 col-lg-12">
            <div class="row cards">
              <div
                v-for="(item, index) in howArr"
                :key="item"
                class="col-12 col-xl-6 col-lg-6"
              >
                <div
                  class="main-card d-flex align-items-center justify-content-center"
                >
                  <div class="num">
                    <svg
                      class="default"
                      xmlns="http://www.w3.org/2000/svg"
                      width="105"
                      height="105"
                      viewBox="0 0 105 105"
                      fill="none"
                    >
                      <circle
                        opacity="0.15"
                        cx="52.5"
                        cy="52.5"
                        r="52.5"
                        fill="#A7B9D0"
                      />
                    </svg>
                    <svg
                      class="active"
                      xmlns="http://www.w3.org/2000/svg"
                      width="105"
                      height="105"
                      viewBox="0 0 105 105"
                      fill="none"
                    >
                      <circle cx="52.5" cy="52.5" r="52.5" fill="white" />
                    </svg>
                    <span> {{ `0${index + 1}.` }} </span>
                  </div>
                  <div class="text-card d-flex flex-column">
                    <span>{{ item.title }}</span>
                    <p>{{ item.desc }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
const localePath = useLocalePath();
const { t } = useI18n();
const howArr = ref([
  {
    title: t("steps.search.title"),
    desc: t("steps.search.desc"),
  },
  {
    title: t("steps.choose.title"),
    desc: t("steps.choose.desc"),
  },
  {
    title: t("steps.order.title"),
    desc: t("steps.order.desc"),
  },
  {
    title: t("steps.contact.title"),
    desc: t("steps.contact.desc"),
  },
]);

</script>