<template>
       <div class="container why-choose-section">
      <div class="text d-flex flex-column align-items-center text-center">
        <h2 class="mobileHead">
          {{ $t("why") }} <span> {{ $t("choose") }} </span>
          <!-- <img
            class="d-none d-xl-inline d-lg-inline d-md-inline"
            src="~/assets/imgs/whyIcon.svg"
            alt=""
          /> -->
        </h2>
        <p>
          {{ $t("choosetitle") }}
        </p>
      </div>
      <div class="row">
        <div
          v-for="item in store.chooseArr.slice(0, 4)"
          :key="item.id"
          class="col-12 col-xl-3 col-lg-4 col-md-6"
        >
          <div class="box mb-5 mb-xl-0">
            <!-- style="object-fit: contain;" -->
            <NuxtImg
              :src="item.icon"
              format="webp"
              quality="80"
              loading="lazy"
              width="64"
              height="64"
              :alt="item.title"
              style="width: 64px; height: 64px; object-fit: contain;"
            />

            <h5>{{ item.title }}</h5>
            <p>
              {{ item.description }}
            </p>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
import { useHomeStore } from "@/stores/home";
let store = useHomeStore();
</script>