<template>
  <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
    <!-- Navigation Header -->
    <NavHeader title="签单相关" />

    <!-- Content List -->
    <div class="px-[40rpx] mt-[40rpx] relative z-10">
      <SectionCard
        v-for="(section, index) in sections"
        :key="index"
        :title="section.title"
        :bg-gradient="section.bgGradient"
        :items="section.items"
        @item-click="handleItemClick"
      />
    </div>

    <!-- Tab Bar -->
    <TabBar current="me" />
  </div>
</template>

<script setup>
import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import SectionCard from '@/components/SectionCard.vue'

const go = useGo()

const sections = shallowRef([
  {
    title: '培训板块',
    items: [
      {
        icon: 'Shop',
        title: '公司介绍',
        subtitle: '企业背景及发展历程'
      },
      {
        icon: 'Category',
        title: '产品介绍及更新',
        subtitle: '最新产品资料库'
      }
    ]
  },
  {
    title: '签单前',
    items: [
      {
        icon: 'Check',
        title: '预核保',
        subtitle: '核保流程指引'
      },
      {
        icon: 'Edit',
        title: '做计划书',
        subtitle: '方案设计工具'
      }
    ]
  },
  {
    title: '签单中',
    items: [
      {
        icon: 'Checklist',
        title: '信息收集及健康告知模板',
        subtitle: '标准表格及注意事项'
      },
      {
        icon: 'Cart',
        title: '缴费方式银行开户',
        subtitle: '支付渠道办理指南'
      },
      {
        icon: 'People',
        title: '体检经验',
        subtitle: '体检流程及常见问题'
      }
    ]
  },
  {
    title: '签单后',
    items: [
      {
        icon: 'Order',
        title: '批单跟进',
        subtitle: '保单变更处理流程'
      },
      {
        icon: 'Clock',
        title: '核保/pending',
        subtitle: '核保进度查询'
      },
      {
        icon: 'Refresh',
        title: '续保',
        subtitle: '续期服务指引'
      }
    ]
  },
  {
    title: '售后',
    items: [
      {
        icon: 'Location',
        title: '香港医生资源',
        subtitle: '专业医疗机构名录'
      }
    ]
  }
])

/**
 * Handle item click
 * @param {Object} item - Clicked item data
 */
const handleItemClick = (item) => {
  console.log('Clicked:', item.title)
  // TODO: Navigate to respective page
}
</script>

<script>
export default {
  name: 'SigningIndex'
}
</script>