<script setup>
const state = reactive({
  cards: [
    {
      img: "/img/section-four_card-one.png",
      title: "تشخیص موجودیت",
      description:
        "استخراج و شناسایی موجودیت‌های مرتبط از متن حدیثی (مانند افراد، مکان‌ها، مفاهیم کلیدی یا موضوعات)",
    },
    {
      img: "/img/section-four_card-two.png",
      title: "تشخیص موجودیت",
      description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
    },
    {
      img: "/img/section-four_card-three.png",
      title: "تشخیص موجودیت",
      description:
        "امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
    },
    {
      img: "/img/section-four_card-four.png",
      title: "تشخیص کلمات کلیدی",
      description:
        "با تحلیل دقیق متن، کلمات و عبارات کلیدی هر حدیث را شناسایی و ارائه می‌کند",
    },
    {
      img: "/img/section-four_card-five.png",
      title: "دسته‌بندی هوشمند",
      description:
        "احادیث را بر اساس موضوعات، مفاهیم یا کلیدواژه‌های اصلی به‌صورت خودکار دسته‌بندی می‌کند",
    },
  ],
});
</script>
<template>
  <section class="section-four flex">
    <UContainer
      class="section-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4"
    >
      <div class="header flex items-center justify-center mb-8 ">
        <span class="title me-1">امکانات </span>

        <NuxtImg
          width="49"
          height="18"
          fit="auto"
          quality="80"
          placeholder
          src="/img/haditha-title.svg"
          class="me-2"
        />
      </div>

      <!-- grid-cols-1 md:grid-cols-2 lg:grid-cols-3 -->
      <div class="content flex justify-center flex-wrap items-start p-4 space-y-3">
        <UCard
          :ui="{
            root: 'ring ring-[white] shadow-none bg-transparent card-item flex flex-col items-center  basis-[360px] p-4',
            header: 'header border-0 px-0 pb-2 pt-0',
            body: 'sm:p-0 p-0 border-0 bg-transparent body',
            footer: 'footer',
          }"
          v-for="(item, index) in state.cards"
          :key="index"
        >
          <template #header>
            <NuxtImg
              fit="auto"
              quality="100"
              :src="item.img"
              class="me-2"
            />
          </template>

          <p class="mb-2 title">{{ item.title }}</p>
          <p class="description">
            {{ item.description }}
          </p>
          <!-- <template #footer> </template> -->
        </UCard>
      </div>
    </UContainer>
  </section>
</template>
<style scoped>
.section-four {
  padding: 7.5em 0; /* 120px */

  .header {
    .title {
      font-family: IRANSansX;
      font-weight: 300;
      font-size: 20px;
      line-height: 30px;
      letter-spacing: 0%;
      text-align: center;

      color: #626b84;
    }
  }
  .card-item {
    .body {
      border: none;

      .title {
        font-family: IRANSansX;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        text-align: center;
      }
      .description {
        font-family: IRANSansX;
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        text-align: center;
      }
    }
  }
}
</style>
