<template>
  <div>
    <section class="relative overflow-hidden bg-gradient-to-b from-gray-950 to-gray-900 text-white">
      <div class="pointer-events-none absolute left-1/2 top-[-140px] h-[420px] w-[900px] -translate-x-1/2 rounded-full bg-green-500/20 blur-3xl" />
      <div class="mx-auto max-w-screen-xl px-4 py-16 sm:py-24 relative">
        <a-tag color="orange" class="mb-6">
          <span class="flex items-center gap-1">
            <span class="text-lg">🦞</span>
            {{ $t('home.heroTag') }}
          </span>
        </a-tag>

        <a-typography-title :level="1" class="!text-white !mb-4">
          {{ $t('home.heroTitle') }}
        </a-typography-title>
        <a-typography-paragraph class="!text-gray-300 !text-lg !mb-8">
          {{ $t('home.heroDesc') }}
        </a-typography-paragraph>

        <a-space size="middle" wrap>
          <a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.bookDemo') }}</a-button>
          <a-button size="large" @click="navigateTo('/flow')">{{ $t('home.viewFlow') }}</a-button>
          <a-button size="large" @click="navigateTo('/deploy')">{{ $t('home.deploy') }}</a-button>
        </a-space>

        <a-row class="mt-10" :gutter="[16, 16]">
          <a-col :xs="12" :md="6">
<!--            <a-statistic title="平台定位" value="SaaS" />-->
          </a-col>
          <a-col :xs="12" :md="6">
<!--            <a-statistic title="交付模式" value="私有化" />-->
          </a-col>
          <a-col :xs="12" :md="6">
<!--            <a-statistic title="能力" value="模板/插件" />-->
          </a-col>
          <a-col :xs="12" :md="6">
<!--            <a-statistic title="开通" value="自动化" />-->
          </a-col>
        </a-row>

        <!-- 平台介绍视频 -->
        <div class="mt-12 rounded-2xl overflow-hidden shadow-2xl border border-gray-700/50 bg-gray-900/50">
          <ClientOnly>
            <video
              class="w-full aspect-video"
              :src="videoSrc"
              poster="/images/video-poster.jpg"
              controls
              preload="metadata"
              playsinline
              @error="handleVideoError"
            >
              <p class="text-white text-center py-8">{{ $t('home.videoNotSupported') }}</p>
            </video>
            <template #fallback>
              <div class="w-full aspect-video bg-gray-800 flex items-center justify-center">
                <span class="text-gray-400">{{ $t('common.loading') }}</span>
              </div>
            </template>
          </ClientOnly>
        </div>
      </div>
    </section>

    <!-- OpenClaw AI 智能体生态 -->
    <section class="relative overflow-hidden bg-gradient-to-r from-orange-50 via-orange-100/50 to-orange-50">
      <div class="pointer-events-none absolute left-1/4 top-0 h-[300px] w-[300px] rounded-full bg-orange-200/50 blur-3xl" />
      <div class="pointer-events-none absolute right-1/4 bottom-0 h-[200px] w-[250px] rounded-full bg-red-200/50 blur-3xl" />
      <div class="mx-auto max-w-screen-xl px-4 py-16 relative">
        <div class="text-center mb-10">
          <div class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 rounded-full text-white text-sm font-medium mb-4">
            <span class="text-xl">🦞</span>
            {{ $t('home.openclawTitle') }}
          </div>
          <a-typography-title :level="2" class="!text-gray-900 !mb-2">
            {{ $t('home.openclawSubtitle') }}
          </a-typography-title>
          <a-typography-paragraph class="!text-gray-600 !mb-0 !text-base">
            {{ $t('home.openclawDesc') }}
          </a-typography-paragraph>
        </div>

        <a-row :gutter="[24, 24]" class="px-4">
          <a-col :xs="24" :md="8">
            <div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
              <div class="text-4xl mb-4">🔗</div>
              <div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiPlatform') }}</div>
              <div class="text-gray-600 text-sm">{{ $t('home.multiPlatformDesc') }}</div>
            </div>
          </a-col>
          <a-col :xs="24" :md="8">
            <div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
              <div class="text-4xl mb-4">🧠</div>
              <div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiModel') }}</div>
              <div class="text-gray-600 text-sm">{{ $t('home.multiModelDesc') }}</div>
            </div>
          </a-col>
          <a-col :xs="24" :md="8">
            <div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
              <div class="text-4xl mb-4">⚡</div>
              <div class="text-gray-900 font-semibold mb-2">{{ $t('home.autoWorkflow') }}</div>
              <div class="text-gray-600 text-sm">{{ $t('home.autoWorkflowDesc') }}</div>
            </div>
          </a-col>
        </a-row>

        <div class="text-center mt-10">
          <a-space size="middle">
            <a-button type="primary" @click="navigateTo('/ai-agent')">
              <span class="flex items-center gap-2">
                <span>🦞</span> {{ $t('home.experienceAI') }}
              </span>
            </a-button>
            <a-button @click="navigateTo('/openclaw')">{{ $t('common.learnMore') }}</a-button>
          </a-space>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 py-14">
      <a-typography-title :level="2" class="!mb-2">{{ $t('home.productMatrix') }}</a-typography-title>
      <a-typography-paragraph class="!text-gray-500 !mb-8">
        {{ $t('home.productMatrixDesc') }}
      </a-typography-paragraph>

      <a-row :gutter="[16, 16]">
        <a-col v-for="p in products" :key="p.title" :xs="24" :md="12" :lg="8">
          <a-card :title="p.title">
            <template #extra>
              <a-tag v-if="p.recommend" color="green">{{ $t('home.recommend') }}</a-tag>
            </template>
            <a-typography-paragraph class="!text-gray-600">
              {{ p.desc }}
            </a-typography-paragraph>
            <div class="flex flex-wrap gap-2">
              <a-tag v-for="t in p.tags" :key="t">{{ t }}</a-tag>
            </div>
            <div class="mt-5 flex justify-between items-center">
              <a-tag color="green">{{ p.domain }}</a-tag>
              <a-button type="primary" @click="go(p.adminUrl)">{{ $t('common.goNow') }}</a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <div class="mt-6">
        <a-button @click="navigateTo('/products')">{{ $t('home.viewAll') || $t('common.viewAll') }}</a-button>
      </div>
    </section>

    <section class="bg-gray-50">
      <div class="mx-auto max-w-screen-xl px-4 py-14">
        <a-typography-title :level="2" class="!mb-2">{{ $t('home.coreCapabilities') }}</a-typography-title>
        <a-typography-paragraph class="!text-gray-500 !mb-8">
          {{ $t('home.coreCapabilitiesDesc') }}
        </a-typography-paragraph>

        <a-row :gutter="[16, 16]">
          <a-col v-for="item in capabilities" :key="item.title" :xs="24" :md="12" :lg="8">
            <a-card :title="item.title">
              <template #extra>
                <a-tag color="green">{{ item.badge }}</a-tag>
              </template>
              <a-typography-paragraph class="!mb-0 !text-gray-600">
                {{ item.desc }}
              </a-typography-paragraph>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </section>

    <section>
      <div class="mx-auto max-w-screen-xl px-4 py-14">
        <a-row :gutter="[24, 24]">
          <a-col :xs="24" :lg="12">
            <a-typography-title :level="2" class="!mb-2">{{ $t('home.payToActivate') }}</a-typography-title>
            <a-typography-paragraph class="!text-gray-600 !mb-6">
              {{ $t('home.payToActivateDesc') }}
            </a-typography-paragraph>
            <a-button type="primary" @click="navigateTo('/flow')">{{ $t('home.viewFullFlow') }}</a-button>
          </a-col>
          <a-col :xs="24" :lg="12">
            <a-card>
              <a-steps direction="vertical" :current="-1" size="small">
                <a-step :title="$t('home.selectProduct')" :description="$t('home.selectProductDesc')" />
                <a-step :title="$t('home.placeOrder')" :description="$t('home.placeOrderDesc')" />
                <a-step :title="$t('home.createTenant')" :description="$t('home.createTenantDesc')" />
                <a-step :title="$t('home.initModules')" :description="$t('home.initModulesDesc')" />
                <a-step :title="$t('home.deliverOnline')" :description="$t('home.deliverOnlineDesc')" />
              </a-steps>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </section>

    <section class="bg-gray-50">
      <div class="mx-auto max-w-screen-xl px-4 py-14">
        <a-typography-title :level="2" class="!mb-2">{{ $t('home.templatePluginEcosystem') }}</a-typography-title>
        <a-typography-paragraph class="!text-gray-500 !mb-8">
          {{ $t('home.templatePluginDesc') }}
        </a-typography-paragraph>

        <a-tabs>
          <a-tab-pane key="template" :tab="$t('home.template')">
            <a-row :gutter="[16, 16]">
              <a-col :xs="24" :md="12">
                <a-card :title="$t('home.industryTemplate')">
                  <a-typography-paragraph class="!mb-0 !text-gray-600">
                    {{ $t('home.industryTemplateDesc') }}
                  </a-typography-paragraph>
                </a-card>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-card :title="$t('home.deliveryStandard')">
                  <a-typography-paragraph class="!mb-0 !text-gray-600">
                    {{ $t('home.deliveryStandardDesc') }}
                  </a-typography-paragraph>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="plugin" :tab="$t('home.plugin')">
            <a-row :gutter="[16, 16]">
              <a-col :xs="24" :md="12">
                <a-card :title="$t('home.capabilityExtend')">
                  <a-typography-paragraph class="!mb-0 !text-gray-600">
                    {{ $t('home.capabilityExtendDesc') }}
                  </a-typography-paragraph>
                </a-card>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-card :title="$t('home.upgradeAuth')">
                  <a-typography-paragraph class="!mb-0 !text-gray-600">
                    {{ $t('home.upgradeAuthDesc') }}
                  </a-typography-paragraph>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>

        <div class="mt-6">
          <a-button @click="navigateTo('/market')">{{ $t('home.exploreMarket') }}</a-button>
        </div>
      </div>
    </section>

    <section class="bg-white">
      <div class="mx-auto max-w-screen-xl px-4 py-12 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div class="text-xl font-semibold">{{ $t('home.ctaTitle') }}</div>
          <div class="mt-1 text-gray-500">{{ $t('home.ctaDesc') }}</div>
        </div>
        <a-space>
          <a-button size="large" @click="navigateTo('/products')">{{ $t('home.viewProducts') }}</a-button>
          <a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.contactNow') }}</a-button>
        </a-space>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'
import { productMatrix } from '@/config/products'
const { t } = useI18n()

// 视频路径（使用 public 目录，可直接通过 URL 访问）
const videoSrc = '/videos/websopy-intro.mp4'

usePageSeo({
  title: t('pageTitle.homeTitle'),
  description: t('pageTitle.homeDescription')
})

const go = (url?: string) => {
  if (!url) return
  if (/^https?:\/\//i.test(url)) {
    if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
    return
  }
  return navigateTo(url)
}

// 视频加载错误处理
const handleVideoError = (e: Event) => {
  console.error('视频加载失败:', e)
}

const products = productMatrix

const capabilities = [
  {
    title: t('home.openclawAI'),
    badge: 'NEW',
    desc: t('home.openclawAIDesc')
  },
  {
    title: t('home.ragKnowledge'),
    badge: 'AI',
    desc: t('home.ragKnowledgeDesc')
  },
  {
    title: t('home.saasMultiTenant'),
    badge: '核心',
    desc: t('home.saasMultiTenantDesc')
  },
  {
    title: t('home.privateDeploy'),
    badge: '可选',
    desc: t('home.privateDeployDesc')
  },
  {
    title: t('home.templateMarket'),
    badge: '生态',
    desc: t('home.templateMarketDesc')
  },
  {
    title: t('home.autoActivate'),
    badge: '交付',
    desc: t('home.autoActivateDesc')
  }
]
</script>
