<template>
  <div class="flex min-h-screen flex-col bg-white text-slate-900">
    <header
      :class="[
        'sticky top-0 z-10 border-b transition-[border-color,background,backdrop-filter] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)]',
        isScrolled ? 'border-transparent bg-transparent [backdrop-filter:none]' : 'border-gray-200 bg-white/90 backdrop-blur-[6px]',
      ]"
    >
      <div
        class="mx-auto max-w-[1200px] transition-[width] ease-[cubic-bezier(0.34,1.56,0.64,1)]"
        :style="{ width: `${capsuleWidth}%`, transitionDuration: isScrolled ? '1000ms' : '1500ms' }"
      >
        <div
          :class="[
            'flex items-center justify-between transition-[height,margin-top,padding,background,border-radius,box-shadow] duration-[400ms] ease-[cubic-bezier(0.22,1,0.36,1)] max-[640px]:h-auto max-[640px]:flex-col max-[640px]:items-start max-[640px]:gap-3 max-[640px]:px-0 max-[640px]:py-3',
            isScrolled
              ? 'mt-3 h-14 rounded-full bg-white/[0.98] px-5 shadow-[0_4px_24px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)]'
              : 'mt-0 h-[72px] rounded-none bg-transparent px-6 shadow-none',
          ]"
        >
          <div class="inline-flex items-center gap-2.5">
            <div class="h-5 w-5 rotate-45 rounded-[4px] border-2 border-slate-900 shadow-[0_2px_6px_rgba(0,0,0,0.08)]" />
            <div class="grid leading-tight">
              <span class="text-sm font-semibold">{{ site.brand }}</span>
              <!-- <span class="text-[11px] text-gray-500">{{ site.subtitle }}</span> -->
            </div>
          </div>

          <nav class="flex items-center gap-[18px] max-[900px]:hidden">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              :class="[
                'border-b-2 border-transparent pb-1.5 text-sm text-gray-500 transition-colors hover:text-gray-900',
                activeId === tab.id ? 'border-black text-black' : '',
              ]"
              @click="handleNav(tab.path)"
            >
              {{ tab.label }}
            </button>
          </nav>

          <div class="flex items-center gap-3 max-[640px]:w-full max-[640px]:justify-between">
            <a
              class="rounded-full border border-slate-900 bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-[0_10px_24px_rgba(0,0,0,0.12)] transition-[transform,box-shadow,background,color] duration-200 hover:shadow-[0_12px_28px_rgba(0,0,0,0.16)] active:translate-y-px"
              :href="`mailto:${site.contact.email}`"
            >
              咨询合作
            </a>
      
          </div>
        </div>
      </div>
    </header>

    <main class="mx-auto w-full max-w-[1200px] flex-1 px-6 pt-8 pb-12 max-[640px]:px-4 max-[640px]:pt-6 max-[640px]:pb-10">
      <RouterView />
    </main>

    <footer class="border-t border-gray-200 bg-white">
      <div class="mx-auto grid w-full max-w-[1200px] grid-cols-5 gap-6 px-6 pt-10 pb-6 max-[900px]:grid-cols-2 max-[640px]:grid-cols-1">
        <div class="col-span-2 grid gap-3 max-[900px]:col-span-2 max-[640px]:col-span-1">
          <div class="inline-flex items-center gap-2.5">
            <div class="h-5 w-5 rotate-45 rounded-[4px] border-2 border-slate-900 shadow-[0_2px_6px_rgba(0,0,0,0.08)]" />
            <span class="text-sm font-semibold">{{ site.brand }}</span>
          </div>
          <p class="m-0 leading-relaxed text-gray-600">{{ site.tagline }}</p>
          <div class="grid gap-1 text-xs text-gray-500">
            <div>微信：{{ site.contact.wechat }}</div>
            <div>邮箱：{{ site.contact.email }}</div>
          </div>
          <p class="m-0 text-xs text-gray-400">© 2025 {{ site.brand }}. All rights reserved.</p>
        </div>

        <div class="grid gap-2">
          <div class="font-bold text-gray-900">服务</div>
          <ul class="m-0 grid list-none gap-1.5 p-0 text-gray-600">
            <li>企业官网 / 落地页</li>
            <li>后台管理系统</li>
            <li>全栈业务开发</li>
            <li>Web3D 互动展示</li>
            <li>3D建模与渲染（PBR）</li>
          </ul>
        </div>

        <div class="grid gap-2">
          <div class="font-bold text-gray-900">技术栈</div>
          <ul class="m-0 grid list-none gap-1.5 p-0 text-gray-600">
            <li>Vue / React / TypeScript</li>
            <li>Node.js / NestJS / Express</li>
            <li>MySQL / PostgreSQL / Redis</li>
            <li>Three.js / Babylon.js</li>
          </ul>
        </div>

        <div class="grid gap-2">
          <div class="font-bold text-gray-900">合作</div>
          <ul class="m-0 grid list-none gap-1.5 p-0 text-gray-600">
            <li>按需求评估报价</li>
            <li>按里程碑验收交付</li>
            <li>支持远程协作</li>
            <li>可提供维护服务</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-200 py-3 text-center text-xs text-gray-400">合作条款 · 交付说明</div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useScroll } from '@vueuse/core'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { site } from '@/config/site'

const route = useRoute()
const router = useRouter()

const tabs = [
  { id: 'features', label: '能力与服务', path: '/' },
  // { id: 'pricing', label: '报价', path: '/' },
  { id: 'cooperation', label: '合作流程', path: '/cooperation' },
  { id: 'markdown', label: '案例/文章', path: '/markdown' },
] as const

const activeId = computed(() => {
  if (route.name === 'features') return 'features'
  if (route.name === 'cooperation') return 'cooperation'
  if (route.name === 'markdown') return 'markdown'
  return 'pricing'
})

const handleNav = (path: string) => {
  if (route.path !== path) router.push(path)
}

const { y } = useScroll(window, { throttle: 16 })
const isScrolled = computed(() => y.value > 50)
const capsuleWidth = computed(() => (isScrolled.value ? 40 : 100))
</script>
