<script setup lang="ts">
const { site, isPreview } = await useSiteDocument()
const products = computed(() => site.value.products.filter(item => isPreview.value ? item.status !== 'offline' : item.status === 'published'))
useSeoMeta({ title: () => `课程与产品｜${site.value.brand.name}`, description: () => `${site.value.brand.name}课程、服务与科技产品。`, ogTitle: () => `课程与产品｜${site.value.brand.name}`, ogDescription: () => `${site.value.brand.name}课程、服务与科技产品。` })
</script>
<template><PublicPageLayout :site="site"><section class="listing-hero"><p class="eyebrow">COURSES & PRODUCTS</p><h1>课程与产品</h1><p>围绕关系、成长与日常实践，提供清晰、可持续的支持路径。</p></section><section class="listing-grid"><NuxtLink v-for="item in products" :key="item.slug" :to="{ path: `/products/${item.slug}`, query: isPreview ? { preview: 'draft' } : {} }" class="listing-card"><img :src="item.image" :alt="item.title" width="1536" height="1024" loading="lazy" decoding="async"><div><small>{{ item.type === 'tool' ? '科技工具' : '成长课程' }}</small><h2>{{ item.title }}</h2><p>{{ item.summary || item.subtitle }}</p><span>查看详情 →</span></div></NuxtLink></section></PublicPageLayout></template>
