<script setup>
import { computed, ref } from "vue";
import { insights, insightCategories } from "~/data/insights";

const categories = insightCategories.filter((category) => category !== "全部");
const activeCategory = ref(categories[0]);

const filteredArticles = computed(() =>
  insights.filter((article) => article.category === activeCategory.value),
);
</script>

<template>
  <section class="bg-[#fafafa] py-20" id="insights">
    <div class="container-gm">
      <div class="text-center" data-reveal>
        <p class="text-sm text-[#a1a1a1]">聚焦于</p>
        <h2 class="section-title mt-4">原创观点</h2>
      </div>

      <div class="mt-8 flex flex-wrap justify-center gap-3" data-reveal>
        <button
          v-for="category in categories"
          :key="category"
          type="button"
          class="rounded-full border px-6 py-2 text-sm transition-all duration-300"
          :class="
            activeCategory === category
              ? 'border-gm-green bg-gm-green text-white'
              : 'border-gm-border bg-white text-[#666] hover:border-[#d5d5d5]'
          "
          @click="activeCategory = category"
        >
          {{ category }}
        </button>
      </div>

      <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
        <article
          v-for="article in filteredArticles"
          :key="article.title"
          class="overflow-hidden rounded-[28px] border border-gm-border bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
          data-stagger-item
        >
          <div class="h-56 overflow-hidden bg-gm-light">
            <img
              :src="article.image"
              :alt="article.title"
              class="h-full w-full object-cover"
              loading="lazy"
            />
          </div>
          <div class="p-6">
            <p class="text-xs font-medium text-gm-green">{{ article.category }}</p>
            <h3 class="mt-3 text-lg font-semibold leading-7 text-[#262626]">
              {{ article.title }}
            </h3>
            <p class="mt-3 text-xs text-[#9b9b9b]">{{ article.date }}</p>
            <NuxtLink to="/insights" class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
              查看详情
              <span aria-hidden="true">→</span>
            </NuxtLink>
          </div>
        </article>
      </div>
    </div>
  </section>
</template>
