<template>
  <UPage>
    <!-- Hero Banner -->
    <UPageHero
      :class="heroClass"
      :style="heroStyle"
      title="连接校友 · 传承精神"
      description="马来西亚柔佛永平中学校友会官方网站"
      :links="heroCta"
    />

    <!-- News Blog Posts -->
    <UPageSection title="新闻与公告">
      <UBlogPosts :posts="newsPost" />
    </UPageSection>

    <IndexEvents />
    <IndexHallOfFame />

    <!-- 捐赠模块 -->
    <UPageCTA
      class="bg-secondary"
      title="支持与捐赠（功能暂未开放）"
      description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
      :links="donationLinks"
    />
  </UPage>
</template>

<script lang="ts" setup>
import type { BlogPostProps } from "@nuxt/ui";

useSeoMeta({
  title: "首页",
});

const colorMode = useColorMode()
const heroClass = 'bg-cover bg-center'
const heroStyle = computed(() => ({
  backgroundImage: colorMode.value === 'dark' 
    ? 'url("https://img.yphsalumni.org/i/2025/11/28/qzxrpq.png")'
    : 'url("https://img.yphsalumni.org/i/2025/11/28/qk9fe8.png")',
  backgroundPositionY: '-40px',
  backgroundRepeat: 'no-repeat',
  backgroundColor: colorMode.value === 'dark' 
    ? 'rgba(0, 0, 0, 0.5)' 
    : 'rgba(255, 255, 255, 0.5)',
  backgroundBlendMode: colorMode.value === 'dark' ? 'darken' : 'lighten'
}))

const heroCta = ref([
  {
    label: "立即加入我们",
    to: "/join-us",
    icon: "mdi:account-plus",
    "data-umami-event": "Join Us Btn Click",
  },
]);

// ========================================================
// 新闻模块
// ========================================================
const { data: news } = await useAsyncData("news", () =>
  queryCollection("news").order("date", "DESC").limit(3).all()
);

// 将 news 数据转换成 UBlogPosts 可用格式
const newsPost = computed<BlogPostProps[]>(() =>
  (news.value || []).map((n: any) => ({
    title: n.title,
    description: n.description,
    image: n.cover,
    date: n.date,
    to: n.path, // ✅ 建议加路由跳转
    variant: "subtle",
  }))
);

// ========================================================
// 捐赠模块
// ========================================================
const donationLinks = ref([{ label: "立即捐赠", icon: "mdi:cash" }]);
</script>

<style></style>
