<template>
  <div class="home py-8">
    <section aria-label="焦点要闻">
      <Carousel :items="heroSlides" height="clamp(260px, 42vw, 480px)" effect="fade" />
    </section>

    <section class="mt-8">
      <div class="grid grid-cols-12 gap-6">
        <a-card class="col-span-12 lg:col-span-4" :bordered="false">
          <template #title>
            <div class="section-title">政策要闻</div>
          </template>
          <ul class="list">
            <li v-for="it in policyNews" :key="it.title">
              <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
              <span class="date">{{ it.date }}</span>
            </li>
          </ul>
          <NuxtLink class="more" to="/policy/latest">查看更多</NuxtLink>
        </a-card>

        <a-card class="col-span-12 lg:col-span-4" :bordered="false">
          <template #title>
            <div class="section-title">智库动态</div>
          </template>
          <ul class="list">
            <li v-for="it in thinktankNews" :key="it.title">
              <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
              <span class="date">{{ it.date }}</span>
            </li>
          </ul>
          <NuxtLink class="more" to="/thinktank">查看更多</NuxtLink>
        </a-card>

        <a-card class="col-span-12 lg:col-span-4" :bordered="false">
          <template #title>
            <div class="section-title">会员风采</div>
          </template>
          <ul class="list">
            <li v-for="it in memberSpotlight" :key="it.title">
              <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
              <span class="date">{{ it.date }}</span>
            </li>
          </ul>
          <NuxtLink class="more" to="/member">查看更多</NuxtLink>
        </a-card>
      </div>
    </section>

    <section class="mt-6 hidden lg:block" aria-label="会员单位展示位">
      <div class="ad-slot">
        会员单位展示位（广告）- 预留横幅
      </div>
    </section>

    <section class="mt-8" aria-label="决策咨询">
      <a-card :bordered="false">
        <template #title>
          <div class="section-title">决策咨询</div>
        </template>

        <a-tabs v-model:active-key="consultingTab" animated>
          <a-tab-pane key="reports" tab="研究报告">
            <ul class="list list--dense">
              <li v-for="it in reports" :key="it.title">
                <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
                <span class="meta">
                  <a-tag v-if="it.status" color="blue">{{ it.status }}</a-tag>
                  <span class="date">{{ it.date }}</span>
                </span>
              </li>
            </ul>
          </a-tab-pane>
          <a-tab-pane key="briefs" tab="咨政专报">
            <ul class="list list--dense">
              <li v-for="it in briefs" :key="it.title">
                <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
                <span class="meta">
                  <span class="date">{{ it.date }}</span>
                </span>
              </li>
            </ul>
          </a-tab-pane>
          <a-tab-pane key="collections" tab="其他汇编">
            <ul class="list list--dense">
              <li v-for="it in collections" :key="it.title">
                <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
                <span class="meta">
                  <span class="date">{{ it.date }}</span>
                </span>
              </li>
            </ul>
          </a-tab-pane>
          <a-tab-pane key="instructions" tab="领导批示">
            <ul class="list list--dense">
              <li v-for="it in instructions" :key="it.title">
                <NuxtLink :to="it.to">{{ it.title }}</NuxtLink>
                <span class="meta">
                  <a-tag v-if="it.status" color="green">{{ it.status }}</a-tag>
                  <span class="date">{{ it.date }}</span>
                </span>
              </li>
            </ul>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </section>

    <section class="mt-8" aria-label="快捷入口">
      <div class="grid grid-cols-12 gap-6">
        <a-card class="col-span-12 lg:col-span-4" :bordered="false">
          <template #title><div class="section-title">决策参考</div></template>
          <div class="quick-desc">政策文件、数据服务、研究成果与专家视点等支撑信息。</div>
          <div class="mt-4 flex flex-wrap gap-2">
            <a-button type="primary" @click="navigateTo('/reference/data')">数据服务</a-button>
            <a-button @click="navigateTo('/reference/docs')">政策文件</a-button>
            <a-button @click="navigateTo('/reference/results')">研究成果</a-button>
          </div>
        </a-card>

        <a-card class="col-span-12 lg:col-span-4" :bordered="false">
          <template #title><div class="section-title">建言献策</div></template>
          <div class="quick-desc">面向公众与会员征集意见建议，支持在线提交与反馈。</div>
          <div class="mt-4 flex flex-wrap gap-2">
            <a-button type="primary" @click="navigateTo('/suggest')">提交建议</a-button>
            <a-button @click="navigateTo('/sitemap')">站点地图</a-button>
          </div>
        </a-card>

        <a-card class="col-span-12 lg:col-span-4" :bordered="false">
          <template #title><div class="section-title">咨询服务</div></template>
          <div class="quick-desc">需求对接、专题研究、政策解读与成果交付，支持分级权限管理。</div>
          <div class="mt-4 flex flex-wrap gap-2">
            <a-button type="primary" @click="navigateTo('/consulting/intro')">了解服务</a-button>
            <a-button @click="navigateTo('/contact')">联系咨询</a-button>
          </div>
        </a-card>
      </div>
    </section>

    <section class="mt-8" aria-label="专家智库平台">
      <a-card :bordered="false">
        <template #title><div class="section-title">专家智库平台</div></template>
        <div class="grid grid-cols-12 gap-6 items-start">
          <div class="col-span-12 lg:col-span-8">
            <div class="quick-desc">
              覆盖多学科领域的专家库，支持分类检索、专家匹配与成果展示。
            </div>
            <div class="mt-4 flex flex-wrap gap-2">
              <a-button type="primary" @click="navigateTo('/experts/db')">进入专家库</a-button>
              <a-button @click="navigateTo('/experts/style')">专家风采</a-button>
              <a-button @click="navigateTo('/experts/apply')">专家申请</a-button>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-4">
            <a-alert
              show-icon
              type="info"
              message="提示"
              description="专家视点、成果下载等栏目可配置会员权限与分级开放。"
            />
          </div>
        </div>
      </a-card>
    </section>
  </div>
</template>

<script setup lang="ts">
import Carousel from '@/components/Carousel.vue'
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({
  title: '首页',
  description: '广西决策咨询网门户首页，聚焦政策要闻、决策咨询、专家智库与咨询服务。',
  path: '/'
})

const heroSlides = [
  {
    src: '/hero/hero-1.svg',
    href: '/reference/results',
    alt: '智库要闻',
    title: '智库要闻 · 重大成果发布',
    desc: '聚焦党委政府重大课题、社科院及研究机构成果，提供权威发布与可追溯链接。',
    ctaLabel: '查看详情'
  },
  {
    src: '/hero/hero-2.svg',
    href: '/consulting/intro',
    alt: '决策咨询',
    title: '决策咨询 · 精要报告与咨政专报',
    desc: '围绕热点难点问题快速研判，标注批示/采纳状态，提升成果转化效率。',
    ctaLabel: '了解服务'
  },
  {
    src: '/hero/hero-3.svg',
    href: '/experts/db',
    alt: '专家智库',
    title: '专家智库 · 分类检索与专家匹配',
    desc: '覆盖多学科领域，支持按方向检索、匹配与协作对接，构建协同开放平台。',
    ctaLabel: '进入专家库'
  }
]

const consultingTab = ref<'reports' | 'briefs' | 'collections' | 'instructions'>('reports')

const policyNews = [
  { title: '关于申报 2026 年度重点课题的通知', date: '2026-03-01', to: '/policy/latest' },
  { title: '自治区决策咨询课题管理办法（修订）', date: '2026-02-18', to: '/policy/release' },
  { title: '政务信息公开与数据安全管理规范要点', date: '2026-02-06', to: '/policy/hotspots' },
  { title: '学术活动预告：专题研讨会（面向 RCEP）', date: '2026-01-26', to: '/policy/events' }
]

const thinktankNews = [
  { title: '交流合作：联合研究项目启动', date: '2026-03-03', to: '/thinktank/coop' },
  { title: '智库党建：制度建设与工作要点', date: '2026-02-21', to: '/thinktank/party' },
  { title: '政策解读：重点产业发展政策解读', date: '2026-02-10', to: '/reference/docs' },
  { title: '东盟研究：经贸数据与国际比较专题', date: '2026-01-30', to: '/reference/data' }
]

const memberSpotlight = [
  { title: '会员单位风采：成果转化典型案例', date: '2026-02-28', to: '/member' },
  { title: '会员服务：培训活动与资源对接计划', date: '2026-02-14', to: '/member/qualification' },
  { title: '资料下载：申报模板与数据手册更新', date: '2026-02-03', to: '/downloads' },
  { title: '会员申请：线上资料提交与审核说明', date: '2026-01-20', to: '/member/apply' }
]

const reports = [
  { title: '重大课题研究报告（精要）', date: '2026-02-25', to: '/reference/results', status: '采纳' },
  { title: '专题调研报告：向海经济发展路径', date: '2026-02-11', to: '/reference/results', status: '批示' },
  { title: '政策评估报告：产业链协同效率提升', date: '2026-01-29', to: '/reference/results', status: '在研' }
]

const briefs = [
  { title: '咨政专报：热点问题快速研判（第 3 期）', date: '2026-03-02', to: '/consulting/results' },
  { title: '咨政专报：重点领域风险提示（第 2 期）', date: '2026-02-16', to: '/consulting/results' },
  { title: '咨政专报：阶段性建议汇总（第 1 期）', date: '2026-01-31', to: '/consulting/results' }
]

const collections = [
  { title: '历年决策咨询成果合集（电子版）', date: '2026-02-08', to: '/downloads' },
  { title: '重大课题成果汇编（专题）', date: '2026-01-18', to: '/downloads' }
]

const instructions = [
  { title: '领导批示成果清单（可追溯链接）', date: '2026-02-20', to: '/consulting/results', status: '公开' },
  { title: '采纳情况统计与典型案例', date: '2026-01-27', to: '/consulting/results', status: '公开' }
]
</script>

<style scoped>
.home :deep(.ant-card) {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.section-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.list a {
  color: #111827;
  font-weight: 600;
  text-decoration: none;
}

.list a:hover {
  color: var(--gov-blue);
  text-decoration: underline;
}

.date {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-tertiary);
}

.meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.list--dense li {
  padding-bottom: 12px;
}

.more {
  display: inline-flex;
  margin-top: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ad-slot {
  border: 1px dashed rgba(30, 111, 181, 0.35);
  background: rgba(30, 111, 181, 0.05);
  border-radius: 14px;
  padding: 14px 16px;
  color: rgba(30, 111, 181, 0.95);
  font-weight: 700;
  text-align: center;
}

.quick-desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}
</style>
