<script setup>
const state = reactive({
  cards: [
    {
      img: "/img/haditha/section-four_card-one.png",
      title: "تشخیص موجودیت",
      description:
        "استخراج و شناسایی موجودیت‌های مرتبط از متن حدیثی (مانند افراد، مکان‌ها، مفاهیم کلیدی یا موضوعات)",
    },
    {
      img: "/img/haditha/section-four_card-two.png",
      title: "خلاصه سازی",
      description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
    },
    {
      img: "/img/haditha/section-four_card-three.png",
      title: "چت بات هوشمند",
      description:
        "امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
    },
    {
      img: "/img/haditha/section-four_card-four.png",
      title: "تشخیص کلمات کلیدی",
      description:
        "با تحلیل دقیق متن، کلمات و عبارات کلیدی هر حدیث را شناسایی و ارائه می‌کند",
    },
    {
      img: "/img/haditha/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>

        <img
          width="49"
          height="18"
          fit="auto"
          quality="80"
          placeholder
          src="/img/haditha/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-0 p-xl-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>
            <img 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: var(--font);
      font-weight: 300;
      font-size: 1.25rem; /* 20px;*/
      line-height: 1.87rem; /* 30px;*/
      letter-spacing: 0%;
      text-align: center;

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

      .title {
        font-family: var(--font);
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5rem; /* 24px;*/
        letter-spacing: 0%;
        text-align: center;
      }
      .description {
        font-family: var(--font);
        font-weight: 300;
        font-size: 0.87rem; /* 14px;*/
        line-height: 1.31rem; /* 21px;*/
        letter-spacing: 0%;
        text-align: center;
      }
    }
  }
}

@media screen and (max-width: 719.99px) {
  .section-four {
    .header {
      .title {
        line-height: 100%;
      }
    }
    .card-item {
      .body {
        .title {
          font-weight: 500;
          font-size: 1.2rem; /*18px;*/
          letter-spacing: 0%;
        }
      }
    }
  }
}
</style>