<template>
  <section class="grid gap-10 pt-3 pb-12">
    <header class="grid gap-3 text-center">
      <div class="text-[13px] text-gray-500">能力与服务 / 交付型合作 / 可长期维护</div>
      <h1 class="m-0 text-[clamp(28px,4vw,44px)] font-extrabold tracking-[-0.02em]">把需求做成可交付的产品</h1>
      <p class="m-0 mx-auto max-w-[680px] leading-[1.7] text-gray-600">
        我能做前端、全栈、Web3D（Babylon.js / Three.js）、3D 建模/渲染（PBR）、官网与后台管理、小程序开发等。你给目标和素材，我负责方案、实现、联调、上线。
      </p>
      <div class="inline-flex justify-center gap-3 max-[640px]:w-full max-[640px]:justify-center">
        <Button @click="router.push('/cooperation')">查看报价</Button>
        <Button variant="secondary" @click="router.push('/cooperation')">合作流程</Button>
      </div>
    </header>

    <div class="grid gap-[18px]">
      <div class="mt-2 text-center text-[22px] font-bold">覆盖从设计对接到上线交付的全流程</div>
      <div class="grid grid-cols-3 gap-5 max-[1024px]:grid-cols-2 max-[640px]:grid-cols-1">
        <Card v-for="(feature, index) in features" :key="feature.title" hoverable class="grid content-start gap-3">
          <div
            class="-mt-0.5 -ml-0.5 inline-flex h-12 w-12 items-center justify-center rounded-[14px] border border-gray-200 bg-gray-50 shadow-[0_8px_18px_rgba(0,0,0,0.08)]"
          >
            <component :is="feature.icon" class="h-6 w-6 text-gray-700" />
          </div>
          <h3 class="mt-2 text-[17px] font-bold">{{ feature.title }}</h3>
          <p class="m-0 text-sm leading-relaxed text-gray-600">{{ feature.description }}</p>
          <div
            class="mt-3 grid gap-2 rounded-2xl border border-slate-100 bg-slate-50 px-3 py-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),0_10px_24px_rgba(0,0,0,0.05)]"
          >
            <div class="flex gap-1.5">
              <span class="h-2.5 w-2.5 rounded-full bg-red-400 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-amber-400 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-emerald-400 shadow-[0_0_0_1px_rgba(0,0,0,0.06)]"></span>
            </div>
            <TypeItTerminal
              :segments="featureTerminalScripts[index]"
              :align="featureTerminalAlign[index]"
              :minLines="featureTerminalMinLines[index]"
              class="rounded-xl bg-white/80 px-3.5 py-2.5 font-mono text-[13px] leading-relaxed whitespace-pre-wrap text-slate-900 shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]"
            />
          </div>
        </Card>
      </div>
    </div>

    <div class="grid gap-[18px]">
      <div class="text-center font-semibold text-gray-700">适合的项目类型</div>
      <div class="grid grid-cols-2 gap-5 max-[1024px]:grid-cols-1">
        <Card v-for="item in scenarios" :key="item" hoverable class="grid grid-cols-[32px_1fr] items-center gap-3">
          <div
            class="grid h-7 w-7 place-items-center rounded-[10px] border border-gray-200 bg-gray-50 text-base text-gray-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.8),0_6px_12px_rgba(0,0,0,0.08)]"
          >
            ✓
          </div>
          <p class="m-0 leading-relaxed text-gray-600">{{ item }}</p>
        </Card>
      </div>
    </div>

    <div class="grid gap-[18px]">
      <div class="text-center font-semibold text-gray-700">合作优势</div>
      <div class="grid grid-cols-3 gap-5 max-[1024px]:grid-cols-2 max-[640px]:grid-cols-1">
        <Card v-for="stat in stats" :key="stat.value" class="text-center">
          <div class="text-[38px] font-extrabold tracking-[-0.02em]">{{ stat.value }}</div>
          <div class="mt-1.5 text-sm text-gray-600">{{ stat.label }}</div>
        </Card>
      </div>
    </div>

    <Card hoverable class="text-center">
      <div class="text-xl font-bold">想把需求尽快落地？</div>
      <p class="m-0 text-gray-500">把你的目标、参考链接、时间节点发我，我会给出方案与排期建议。</p>
      <div class="mt-4 inline-flex gap-3 max-[640px]:w-full max-[640px]:justify-center">
        <Button @click="router.push('/cooperation')">获取报价</Button>
        <Button variant="secondary" @click="router.push('/markdown')">查看案例</Button>
      </div>
    </Card>
  </section>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  Boxes,
  Cloud,
  Code2,
  Cpu,
  Cuboid,
  LayoutTemplate,
  Layers,
  Sparkles,
  ShieldCheck,
} from 'lucide-vue-next'
import Button from '@/components/Button/index.vue'
import Card from '@/components/Card/index.vue'
import TypeItTerminal, { type TypeItTerminalSegment } from '@/components/TypeItTerminal.vue'

const router = useRouter()

type Feature = {
  title: string
  description: string
  icon: any
}

const features: Feature[] = [
  { title: '前端工程化', description: 'Vue/React + TypeScript + 构建与规范，让项目可维护、可迭代。', icon: Code2 },
  { title: '后台管理', description: '权限、表格、图表、导入导出与业务流程，按习惯做出“顺手”的后台。', icon: LayoutTemplate },
  { title: '全栈开发', description: '接口设计、鉴权、数据库建模与联调，打通前后端的交付链路。', icon: Layers },
  { title: 'Web3D', description: 'Three.js/Babylon.js 场景搭建、交互、性能优化与业务 UI 联动。', icon: Cuboid },
  { title: '官网/落地页', description: '品牌展示 + 动效 + SEO 基础，支持多端适配与上线部署。', icon: Sparkles },
  { title: '小程序开发', description: '微信小程序/uni-app（按需），从页面到接口联调与发布。', icon: Boxes },
  { title: '性能优化', description: '首屏、图片、缓存、包体与渲染优化，提升体验与转化。', icon: Cpu },
  { title: '部署上线', description: 'Docker/服务器部署（按需），支持环境隔离与灰度发布方案。', icon: Cloud },
  { title: '质量与安全', description: '边界处理、日志与监控建议，交付稳定可靠的线上版本。', icon: ShieldCheck },
]

const featureTerminalScripts: TypeItTerminalSegment[][] = [
  [
    {
      html: [
        '<div><span class="text-gray-500">$</span> pnpm create <span class="text-emerald-600">vite</span> my-app</div>',
        '<div><span class="text-gray-500">$</span> pnpm i <span class="text-amber-600">eslint</span> <span class="text-amber-600">prettier</span></div>',
        '<div><span class="text-gray-500">✓</span> <span class="text-emerald-600">tsconfig</span> + <span class="text-emerald-600">lint</span> ready</div>',
      ].join(''),
      speed: 28,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 20,
    },
    {
      html: [
        '<div><span class="text-blue-600">export</span> <span class="text-blue-600">type</span> Use r = { id: <span class="text-blue-600">string</span>; name: <span class="text-blue-600">string</span> }</div>',
        '<div><span class="text-blue-600">const</span> state = reactive&lt;{ user?: User }&gt;({})</div>',
      ].join(''),
      speed: 18,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-gray-500">roles</span> → <span class="text-gray-500">menus</span> → <span class="text-gray-500">actions</span></div>',
        '<div><span class="text-gray-500">✓</span> route guard + permission check</div>',
      ].join(''),
      speed: 22,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: [
        '<div><span class="text-slate-900">columns</span> = [<span class="text-amber-600">"ID"</span>, <span class="text-amber-600">"Name"</span>, <span class="text-amber-600">"Status"</span>]</div>',
        '<div><span class="text-gray-500">✓</span> filter · export · batch action</div>',
      ].join(''),
      speed: 26,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-blue-600">@Get</span>(<span class="text-amber-600">"/users"</span>)</div>',
        '<div><span class="text-blue-600">async</span> list(@Query() q) { <span class="text-blue-600">return</span> svc.list(q) }</div>',
      ].join(''),
      speed: 18,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 16,
    },
    {
      html: [
        '<div><span class="text-gray-500">POST /auth/login</span> → <span class="text-emerald-600">JWT</span></div>',
        '<div><span class="text-gray-500">DB</span>: users · roles · sessions</div>',
      ].join(''),
      speed: 22,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-blue-600">import</span> { Engine, Scene } <span class="text-blue-600">from</span> <span class="text-amber-600">"@babylonjs/core"</span></div>',
        '<div><span class="text-blue-600">const</span> engine = <span class="text-blue-600">new</span> Engine(canvas)</div>',
        '<div><span class="text-blue-600">const</span> scene = <span class="text-blue-600">new</span> Scene(engine)</div>',
      ].join(''),
      speed: 20,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: [
        '<div><span class="text-gray-500">glTF</span> + <span class="text-gray-500">DRACO</span> + <span class="text-gray-500">LOD</span></div>',
        '<div><span class="text-gray-500">✓</span> interaction · hotspot · UI sync</div>',
      ].join(''),
      speed: 24,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-gray-500">&lt;title&gt;</span>品牌官网<span class="text-gray-500">&lt;/title&gt;</span></div>',
        '<div><span class="text-gray-500">&lt;meta</span> name=<span class="text-amber-600">"description"</span> ... <span class="text-gray-500">/&gt;</span></div>',
      ].join(''),
      speed: 26,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 20,
    },
    {
      html: [
        '<div><span class="text-gray-500">hero</span> · <span class="text-gray-500">features</span> · <span class="text-gray-500">pricing</span> · <span class="text-gray-500">contact</span></div>',
        '<div><span class="text-gray-500">✓</span> responsive · animation · deploy</div>',
      ].join(''),
      speed: 18,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-blue-600">Page</span>({ data })</div>',
        '<div>onLoad(() =&gt; fetchList())</div>',
        '<div><span class="text-gray-500">✓</span> tab · list · detail</div>',
      ].join(''),
      speed: 22,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: [
        '<div><span class="text-gray-500">subpackages</span> · <span class="text-gray-500">request</span> · <span class="text-gray-500">upload</span></div>',
        '<div><span class="text-gray-500">✓</span> publish checklist</div>',
      ].join(''),
      speed: 18,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-gray-500">Lighthouse</span>: <span class="text-emerald-600">95+</span></div>',
        '<div><span class="text-gray-500">-</span> image optimize (webp/avif)</div>',
        '<div><span class="text-gray-500">-</span> code split + cache</div>',
      ].join(''),
      speed: 16,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 14,
    },
    {
      html: [
        '<div><span class="text-gray-500">TTFB</span> ↓ · <span class="text-gray-500">LCP</span> ↓ · <span class="text-gray-500">CLS</span> ↓</div>',
        '<div><span class="text-gray-500">✓</span> perf budget applied</div>',
      ].join(''),
      speed: 20,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-purple-600">services</span>:</div>',
        '<div>&nbsp;&nbsp;<span class="text-slate-900">web</span>: <span class="text-amber-600">nginx</span></div>',
        '<div>&nbsp;&nbsp;<span class="text-slate-900">api</span>: <span class="text-amber-600">node</span></div>',
        '<div>&nbsp;&nbsp;<span class="text-slate-900">db</span>: <span class="text-amber-600">postgres</span></div>',
      ].join(''),
      speed: 18,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 16,
    },
    {
      html: [
        '<div><span class="text-gray-500">env</span>: dev · staging · prod</div>',
        '<div><span class="text-gray-500">✓</span> deploy + rollback plan</div>',
      ].join(''),
      speed: 22,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: [
        '<div><span class="text-gray-500">fix</span>: edge case for empty list</div>',
        '<div><span class="text-gray-500">test</span>: add regression</div>',
        '<div><span class="text-gray-500">✓</span> release notes ready</div>',
      ].join(''),
      speed: 20,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 16,
    },
    {
      html: [
        '<div><span class="text-gray-500">v1.2.0</span> · new feature</div>',
        '<div><span class="text-gray-500">v1.2.1</span> · hotfix</div>',
      ].join(''),
      speed: 16,
      pauseAfter: 1200,
    },
  ],
]

const featureTerminalAlign: Array<'top' | 'center' | 'bottom'> = [
  'bottom',
  'top',
  'bottom',
  'top',
  'bottom',
  'top',
  'bottom',
  'top',
  'center',
]

const featureTerminalMinLines = [4, 3, 3, 4, 3, 3, 4, 4, 3]

const scenarios = [
  '品牌官网/产品官网：高还原 + 动效 + SEO 基础',
  '运营活动页：周期紧、改动频繁、注重转化',
  '后台管理：权限/表格/导入导出/图表看板',
  '全栈业务：接口 + 数据库 + 管理后台一体化交付',
  'Web3D 展示：模型加载、交互热点、镜头与动效',
  '3D 建模/渲染：建模、材质、灯光与出片（PBR 流程）',
  '小程序：列表/详情/下单/登录/授权等常见场景',
  '存量项目：重构、性能优化、修 Bug、继续迭代',
  '上线交付：部署方案、环境配置、监控建议（按需）',
]

const stats = [
  { value: '快', label: '沟通明确后快速推进' },
  { value: '稳', label: '注重边界与线上稳定' },
  { value: '清晰', label: '按里程碑可验收交付' },
  { value: '可维护', label: '工程化与可读结构' },
  { value: '可扩展', label: '考虑后续迭代成本' },
  { value: '可协作', label: '对接设计/后端/运营' },
]
</script>
