<template>
  <section class="grid gap-10 pt-3 pb-12">
    <div class="grid gap-2 text-center">
      <div class="inline-flex flex-wrap justify-center gap-3.5 text-xs text-gray-500">
        <span>前端开发</span>
        <span>全栈开发</span>
        <span>后台管理</span>
        <span>Web3D（Three/Babylon）</span>
        <span>3D建模/渲染（PBR）</span>
        <span>小程序</span>
      </div>
      <div class="text-[11px] tracking-[0.3em] text-gray-400">SERVICES</div>
      <h1 class="m-0 text-[clamp(26px,4vw,36px)] font-extrabold tracking-[-0.02em]">服务与报价</h1>
      <p class="m-0 mx-auto max-w-[680px] leading-relaxed text-gray-500">
        按需求评估、按里程碑交付。可从 0 到 1 搭建，也可接手存量项目重构/优化/继续迭代。
      </p>
    </div>

    <div class="grid gap-4">
      <h2 class="m-0 text-lg font-bold">常见合作套餐</h2>
      <div class="grid grid-cols-3 gap-[18px] max-[1024px]:grid-cols-2 max-[640px]:grid-cols-1">
        <PlanCard v-for="plan in projectPlans" :key="plan.subtitle" v-bind="plan" />
      </div>
    </div>

    <div class="grid gap-4">
      <h2 class="m-0 text-lg font-bold">长期合作</h2>
      <div class="grid grid-cols-2 gap-[18px] max-[1024px]:grid-cols-1">
        <PlanCard v-for="plan in retainerPlans" :key="plan.subtitle" v-bind="plan" />
      </div>
      <div class="grid grid-cols-1 gap-[18px]">
        <PlanCard v-bind="customPlan" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import PlanCard from '@/components/PlanCard/index.vue'

type Plan = {
  title: string
  subtitle: string
  badge?: string
  price: string
  note?: string
  features: string[]
  footerNote: string
  highlight?: boolean
}

const projectPlans: Plan[] = [
  {
    title: '企业官网 / 落地页',
    subtitle: '品牌展示 · SEO 基础',
    badge: '快速交付',
    price: '¥ 按需求报价',
    note: '适合活动页、产品官网、品牌介绍、营销落地。',
    features: ['响应式适配 · 兼容主流浏览器', '高还原 UI + 动效', 'SEO/OG/站点地图（按需）', '表单/埋点/转化链路（按需）'],
    footerNote: '交付：源码 + 部署说明',
  },
  {
    title: '后台管理系统',
    subtitle: '权限 · 表格 · 图表',
    badge: '业务提效',
    price: '¥ 按需求报价',
    note: '适合数据看板、运营后台、CRM/ERP 子系统。',
    features: ['账号/角色/权限模型', '列表/筛选/导出/批处理', '接口联调 + 错误处理', '可维护的组件与路由结构'],
    footerNote: '交付：可部署版本 + 使用说明',
    highlight: true,
  },
  {
    title: 'Web3D 互动展示',
    subtitle: 'Three.js / Babylon.js',
    badge: '更强体验',
    price: '¥ 按需求报价',
    note: '适合产品展示、展厅导览、互动营销、3D 组件开发。',
    features: ['模型加载/压缩（glTF/DRACO）', '交互与镜头控制', '性能优化（LOD/合批/纹理）', '与页面业务联动（UI/数据）'],
    footerNote: '交付：可复用组件 + 性能建议',
  },
  {
    title: '3D建模与渲染',
    subtitle: '建模 · 材质 · PBR · 出片',
    badge: '可出视频',
    price: '￥ 按需求报价',
    note: '适合产品/角色/场景资产制作，支持从建模到渲染出片（静帧/视频）。',
    features: [
      '高模/低模建模 + 拓扑优化（按需）',
      'UV 展开与贴图烘焙（Normal/AO 等）',
      'PBR 材质流程（Substance/Blender 等）',
      '灯光/渲染/合成与视频输出（按需）',
    ],
    footerNote: '交付：源文件 + 贴图 + 成片',
  },
]

const retainerPlans: Plan[] = [
  {
    title: '长期迭代（按月）',
    subtitle: '稳定排期 · 迭代交付',
    badge: '长期合作',
    price: '¥ 按月报价',
    note: '适合长期运营产品、版本迭代、活动频繁的团队。',
    features: ['每周同步进度与风险', '按里程碑验收与交付', '代码规范/CI/质量把控', '线上问题响应（按约定）'],
    footerNote: '方式：远程协作 · 里程碑结算',
  },
  {
    title: '全栈开发（按需求）',
    subtitle: '接口 · 数据库 · 部署',
    badge: '从 0 到 1',
    price: '¥ 按需求报价',
    note: '适合需要后端接口、数据建模、部署上线的一体化项目。',
    features: ['API 设计与鉴权（JWT/OAuth）', '数据库建模与迁移', '日志/监控/告警（按需）', 'Docker/服务器部署（按需）'],
    footerNote: '交付：接口文档 + 部署脚本（按需）',
  },
]

const customPlan: Plan = {
  title: '定制合作',
  subtitle: '按需求评估报价',
  badge: '欢迎咨询',
  price: '¥ 面议',
  note: '把你的需求发我：目标、时间、参考风格、已有资料/接口。我会给出排期与报价建议。',
  features: ['支持接手存量项目：重构/性能优化/修 Bug', '支持小程序开发：微信小程序/uni-app（按需）', '支持设计对接：Figma/蓝湖/Sketch', '可签 NDA/合同与发票（按需）'],
  footerNote: '微信/邮箱咨询 · 先评估再开工',
}
</script>
