<template>
  <section class="grid gap-10 pt-3 pb-12">
    <header class="grid gap-3 text-center">
      <div class="text-[13px] text-gray-500">Web3D 场景 SDK · 相机/灯光/环境贴图/热点/模型/材质</div>
      <h1 class="m-0 text-[clamp(28px,4vw,44px)] font-extrabold tracking-[-0.02em]">让三维展示可配置、可热更新</h1>
      <p class="m-0 mx-auto max-w-[760px] leading-[1.7] text-gray-600">
        开箱即用的 Web3D SDK，内置相机控制、灯光与 HDRI、配置化热点、事件总线、模型热加载/销毁/替换与材质切换。适用于在线展厅、产品配置器、互动热点讲解等场景。
      </p>
      <div class="inline-flex justify-center gap-3 max-[640px]:w-full max-[640px]:justify-center">
        <Button @click="router.push('/docs')">查看 SDK 文档</Button>
        <Button variant="secondary" @click="router.push('/docs')">示例与 API</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.label" 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">准备好把 Web3D 能力接入产品了吗？</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('/docs')">立即查看文档</Button>
        <a
          class="rounded-full border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 shadow-[0_8px_18px_rgba(0,0,0,0.06)] transition hover:border-slate-900"
          :href="`mailto:${site.contact.email}`"
        >
          邮件支持
        </a>
      </div>
    </Card>
  </section>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  Camera,
  Layers,
  MousePointer2,
  Palette,
  ShieldCheck,
  Sparkles,
  SunMedium,
} 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'
import { site } from '@/config/site'

const router = useRouter()

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

const features: Feature[] = [
  {
    title: '相机控制与动画',
    description: 'set/animateTo 支持位置、目标、FOV、近远裁剪，带缓动过渡与回调。',
    icon: Camera,
  },
  {
    title: '灯光与环境贴图',
    description: '主光/辅光/环境光参数化配置；HDRI 切换、曝光、旋转、模糊一键生效。',
    icon: SunMedium,
  },
  {
    title: '热点渲染与事件',
    description: '配置驱动热点 UI，click/hover/focus 抛出事件；可绑定业务 Payload。',
    icon: MousePointer2,
  },
  {
    title: '模型热加载 / 替换',
    description: '按 ID 管理模型，支持加载、销毁、替换与并行队列，状态事件可订阅。',
    icon: Layers,
  },
  {
    title: '材质切换与预设',
    description: '按部件/分组应用材质预设，支持批量切换与回滚默认材质。',
    icon: Palette,
  },
  {
    title: '事件总线与调试',
    description: '统一事件接口；kernel.debug 输出加载、事件、性能日志，便于排障。',
    icon: ShieldCheck,
  },
]

const featureTerminalScripts: TypeItTerminalSegment[][] = [
  [
    {
      html: '<div><span class="text-gray-500">kernel.camera.set</span>({ fov: 45, position: [2,1.2,3] })</div>',
      speed: 26,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: '<div><span class="text-gray-500">kernel.camera.animateTo</span>({ target: [0,0.8,0] }, { duration: 0.8 })</div>',
      speed: 24,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: '<div><span class="text-gray-500">kernel.lights.update</span>(<span class="text-amber-600">"key"</span>, { intensity: 1.4, castShadow: true })</div>',
      speed: 24,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: '<div><span class="text-gray-500">kernel.environment.setHDRI</span>("showroom.hdr", { exposure: 1.1, rotation: [0,45,0] })</div>',
      speed: 22,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: '<div><span class="text-gray-500">kernel.hotspot.render</span>([{ id: "engine", event: "show-engine" }])</div>',
      speed: 24,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: '<div><span class="text-gray-500">kernel.on</span>(<span class="text-emerald-600">"hotspot:click"</span>, ({ id }) =&gt; highlight(id))</div>',
      speed: 22,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: '<div><span class="text-gray-500">kernel.model.load</span>({ id: "car", url: "/car.glb" })</div>',
      speed: 24,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: '<div><span class="text-gray-500">kernel.model.replace</span>("car", { url: "/car-white.glb" })</div>',
      speed: 24,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: '<div><span class="text-gray-500">kernel.material.apply</span>({ target: "body", material: "paint/blue" })</div>',
      speed: 24,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: '<div><span class="text-gray-500">kernel.material.batch</span>([{ target: "glass", material: "glass/clear" }])</div>',
      speed: 22,
      pauseAfter: 1200,
    },
  ],
  [
    {
      html: '<div><span class="text-gray-500">kernel.on</span>(<span class="text-emerald-600">"model:loaded"</span>, log)</div>',
      speed: 22,
      pauseAfter: 900,
      deleteAfter: true,
      deleteSpeed: 18,
    },
    {
      html: '<div><span class="text-gray-500">kernel.debug</span>(<span class="text-amber-600">true</span>)</div>',
      speed: 18,
      pauseAfter: 1200,
    },
  ],
]

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

const featureTerminalMinLines = [3, 3, 3, 3, 3, 2]

const scenarios = [
  '在线产品展示/VR 展厅：相机巡览 + 热点讲解 + 材质切换',
  'Web3D 配置器：颜色/部件切换、材质预设与模型替换',
  '工业/汽车/家居互动：分部件热点、事件驱动 UI 联动',
  '营销与培训页面：按配置渲染热点，引导用户操作或答题',
]

const stats = [
  { value: '<10 s', label: '完成初始化并渲染首个模型' },
  { value: '7 APIs', label: '核心高频能力（相机/灯光/热点/模型/材质）' },
  { value: '<3 s', label: '缓存场景下平均热替换耗时' },
]
</script>
