<script setup>
import PageHero from '../components/PageHero.vue'
import Reveal from '../components/motion/Reveal.vue'

const items = [
  {
    date: '2026-02-12',
    tag: '发布',
    title: '工业互联网门户新版上线',
    desc: '统一导航、产品矩阵与行业方案展示，增强案例与新闻聚合能力。',
  },
  {
    date: '2026-01-28',
    tag: '活动',
    title: '工业数据治理专题沙龙报名启动',
    desc: '围绕资产目录、指标口径与数据质量治理，分享落地方法与实践。',
  },
  {
    date: '2026-01-10',
    tag: '更新',
    title: '设备接入能力升级：新增边缘缓存与多协议适配',
    desc: '提升现场环境稳定性，支持断点续传与离线数据补传。',
  },
  {
    date: '2025-12-20',
    tag: '案例',
    title: '从采集到指标：制造企业数据治理全链路实践',
    desc: '以“口径统一 + 质量可控”为目标，推动数据资产规模化生产。',
  },
]
</script>

<template>
  <div>
    <PageHero
      kicker="新闻动态"
      title="平台更新与行业观点"
      subtitle="及时了解平台能力演进、活动与行业实践。"
    >
      <template #actions>
        <RouterLink class="btn btn-primary" to="/contact">订阅更新</RouterLink>
        <RouterLink class="btn btn-ghost" to="/cases">查看案例</RouterLink>
      </template>
    </PageHero>

    <section class="section">
      <div class="container">
        <div class="grid newsGrid">
          <Reveal
            v-for="(n, idx) in items"
            :key="n.title"
            as="div"
            class="card card-pad newsItem hover-lift"
            :delay="60 + idx * 70"
          >
            <div class="newsTop">
              <span class="pill">{{ n.tag }}</span>
              <span class="muted newsDate">{{ n.date }}</span>
            </div>
            <div class="newsTitle">{{ n.title }}</div>
            <div class="muted">{{ n.desc }}</div>
            <RouterLink class="btn btn-link newsMore" to="/contact">获取详情 →</RouterLink>
          </Reveal>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.newsGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.newsTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.newsDate {
  font-size: 12px;
}

.newsTitle {
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.newsMore {
  margin-top: 10px;
}

@media (max-width: 960px) {
  .newsGrid {
    grid-template-columns: 1fr;
  }
}
</style>
