<template>
  <main class="home">
    <section class="mx-auto max-w-screen-xl px-4 py-6">
      <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-7">
          <div class="panel">
            <a-image :src="featured.image" :preview="false" class="featured-image" />
            <div class="p-4">
              <div class="featured-title">{{ featured.title }}</div>
              <div class="featured-meta">{{ featured.date }}</div>
            </div>
          </div>
        </div>

        <div class="col-span-12 lg:col-span-5">
          <div class="panel notice">
            <div class="notice-head">
              <div class="notice-title">
                <NotificationOutlined />
                公告
              </div>
              <a class="notice-more" href="#" @click.prevent>更多</a>
            </div>
            <div class="notice-list">
              <a
                v-for="n in notices"
                :key="n.title"
                class="notice-item"
                href="#"
                @click.prevent
              >
                <div class="notice-item-title">{{ n.title }}</div>
                <div class="notice-item-desc">{{ n.desc }}</div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-7">
          <div class="panel">
            <div class="section-pill">
              <span class="pill-left">
                <FileTextOutlined />
                申报指南
              </span>
              <span class="pill-right">Declaration Guide</span>
            </div>

            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
              <a-card
                v-for="g in guides"
                :key="g.title"
                class="guide-card"
                :bordered="true"
                hoverable
                @click="navigateTo(g.to)"
              >
                <a-space>
                  <a-avatar :size="44" class="guide-icon">
                    <component :is="g.icon" />
                  </a-avatar>
                  <div>
                    <div class="guide-title">{{ g.title }}</div>
                    <div class="guide-desc">{{ g.desc }}</div>
                  </div>
                </a-space>
              </a-card>
            </div>
          </div>
        </div>

        <div class="col-span-12 lg:col-span-5">
          <div class="panel login">
            <div class="login-hero">
              <div class="login-hero-title">破产重整债权申报系统</div>
              <div class="login-hero-sub">SUBMIT REQUIREMENTS</div>
            </div>

            <div class="p-4">
              <a-space direction="vertical" class="w-full" size="middle">
                <a-button type="primary" block size="large" @click="navigateTo('/login')">
                  <template #icon><LoginOutlined /></template>
                  用户登录申报
                </a-button>
                <a-button block size="large" @click="navigateTo('/create-app')">
                  <template #icon><UserAddOutlined /></template>
                  新用户注册申报
                </a-button>
                <div class="flex items-center justify-between text-sm text-gray-500">
                  <span>申报审核系统</span>
                  <a href="#" class="text-red-600" @click.prevent>忘记密码？</a>
                </div>
              </a-space>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="banner">
      <div class="mx-auto max-w-screen-xl px-4 py-10">
        <div class="banner-title">致力于专业破产事务服务</div>
      </div>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 py-10">
      <div class="section-title">
        <div class="section-title-main">新闻资讯</div>
        <div class="section-title-sub">NEWS INFORMATION</div>
      </div>

      <div class="mt-6 grid grid-cols-12 gap-6">
        <div v-for="c in columns" :key="c.title" class="col-span-12 lg:col-span-4">
          <div class="panel">
            <div class="column-head">
              <div class="column-title">{{ c.title }}</div>
              <a href="#" class="column-more" @click.prevent>更多 +</a>
            </div>
            <div class="column-list">
              <a
                v-for="it in c.items"
                :key="it"
                class="column-item"
                href="#"
                @click.prevent
              >
                {{ it }}
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-10">
        <div class="section-title">
          <div class="section-title-main">典型案例</div>
          <div class="section-title-sub">CLASSIC CASE</div>
        </div>

        <div class="mt-6 grid grid-cols-12 gap-6">
          <a-card
            v-for="c in cases"
            :key="c.title"
            hoverable
            class="case-card col-span-12 sm:col-span-6 lg:col-span-3"
            @click="navigateTo(c.to)"
          >
            <template #cover>
              <a-image :src="c.image" :preview="false" class="case-image" />
            </template>
            <a-typography-title :level="5" class="!mb-2 case-title">{{ c.title }}</a-typography-title>
            <div class="case-meta">{{ c.date }}</div>
          </a-card>
        </div>
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
import {
  FileTextOutlined,
  LoginOutlined,
  NotificationOutlined,
  ProfileOutlined,
  SafetyCertificateOutlined,
  UserAddOutlined
} from '@ant-design/icons-vue'

const featured = {
  image:
    'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80',
  title: '行于思清算公司受指定担任广西民族包装有限公司管理人',
  date: '2023-10-11'
}

const notices = [
  {
    title: '关于公开招募破产清算管理主体框架及维修施工单位的公告',
    desc: '南宁市中级人民法院根据有关规定...'
  },
  {
    title: '钦州市王明年丰全仓储有限公司重整投资人招募公告',
    desc: '钦州市王明年丰全仓储有限公司...'
  },
  {
    title: '钦州市王明年丰全仓储有限公司 预重整债权申报公告',
    desc: '债权申报相关材料及申报途径...'
  },
  {
    title: '钦州市王明年丰全仓储有限公司 预重整债权申报公告（补充）',
    desc: '补充说明及常见问题...'
  }
]

const guides = [
  { title: '线上实名认证指南', desc: '快速完成实名认证', to: '/flow', icon: ProfileOutlined },
  { title: '债权人提交材料指南', desc: '材料清单与提交规范', to: '/articles', icon: FileTextOutlined },
  { title: '债权人网上申报指南', desc: '在线申报流程说明', to: '/login', icon: SafetyCertificateOutlined },
  { title: '公司自主清算债权登记材料范本', desc: '模板下载与填写说明', to: '/deploy', icon: FileTextOutlined }
]

const columns = [
  {
    title: '新闻动态',
    items: [
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...'
    ]
  },
  {
    title: '法律法规',
    items: [
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...'
    ]
  },
  {
    title: '权威发布',
    items: [
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...',
      '标题新闻标题新闻标题新闻标题新闻标题...'
    ]
  }
]

const cases = [
  {
    title: '广西南院审理的印象刘三姐重整案...',
    date: '2023-10-17',
    to: '/articles',
    image:
      'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=900&q=80'
  },
  {
    title: '广西南院审理的印象刘三姐重整案...',
    date: '2023-10-17',
    to: '/articles',
    image:
      'https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=900&q=80'
  },
  {
    title: '广西南院审理的印象刘三姐重整案...',
    date: '2023-10-17',
    to: '/articles',
    image:
      'https://images.unsplash.com/photo-1521790797524-b2497295b8a0?auto=format&fit=crop&w=900&q=80'
  },
  {
    title: '广西南院审理的印象刘三姐重整案...',
    date: '2023-10-17',
    to: '/articles',
    image:
      'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=900&q=80'
  }
]
</script>

<style scoped>
.home {
  background: #f4f6f8;
}

.panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.featured-image :deep(img) {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.featured-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.88);
}

.featured-meta {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.notice {
  height: 100%;
}

.notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(90deg, #c30000, #e11d48);
  color: #fff;
}

.notice-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.notice-more {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.notice-list {
  padding: 10px 14px 14px;
}

.notice-item {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
}

.notice-item:last-child {
  border-bottom: 0;
}

.notice-item-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.35;
}

.notice-item-desc {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.4;
}

.section-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #c30000, #e11d48);
  color: #fff;
  font-weight: 800;
}

.pill-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pill-right {
  font-weight: 700;
  font-size: 12px;
  opacity: 0.9;
}

.guide-card {
  border-radius: 10px;
}

.guide-icon {
  background: rgba(195, 0, 0, 0.1);
  color: #c30000;
}

.guide-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.88);
}

.guide-desc {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
}

.login-hero {
  padding: 18px 16px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(90deg, #c30000, #e11d48);
  color: #fff;
}

.login-hero-title {
  font-size: 18px;
  font-weight: 900;
}

.login-hero-sub {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

.banner {
  background:
    radial-gradient(circle at 20% 30%, rgba(195, 0, 0, 0.18), transparent 55%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.banner-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: #c30000;
}

.section-title {
  text-align: center;
}

.section-title-main {
  font-size: 18px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.88);
}

.section-title-sub {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(0, 0, 0, 0.45);
}

.column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.column-title {
  font-weight: 900;
  color: rgba(0, 0, 0, 0.88);
}

.column-more {
  font-size: 12px;
  color: rgba(195, 0, 0, 0.95);
  text-decoration: none;
}

.column-list {
  padding: 10px 14px 14px;
}

.column-item {
  display: block;
  padding: 8px 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.78);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.column-item:last-child {
  border-bottom: 0;
}

.case-card {
  border-radius: 10px;
  overflow: hidden;
}

.case-image :deep(img) {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.case-title {
  color: rgba(195, 0, 0, 0.95);
}

.case-meta {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}
</style>

