<template>
  <div>
    <!-- AWS产品与服务 Banner -->
    <section class="bg-white dark:bg-gray-900 py-16">
      <div
        class="container mx-auto flex flex-col md:flex-row items-center justify-center gap-8"
      >
        <div class="md:w-1/2 flex justify-center">
          <img
            src="/public/images/products/product.svg"
            alt="AWS产品与服务"
            class="w-full max-w-md object-contain dark:opacity-90"
          />
        </div>
        <div class="md:w-1/2">
          <h1 class="text-4xl font-bold text-[#333333] dark:text-white mb-6">
            {{ $t("products.banner.title") }}
          </h1>
          <p class="text-xl text-gray-600 dark:text-gray-300 mb-4">
            {{ $t("products.banner.subtitle") }}
          </p>
          <p class="text-gray-500 dark:text-gray-400 leading-relaxed">
            {{ $t("products.banner.desc") }}
          </p>
        </div>
      </div>
    </section>

    <!-- AWS开通流程 -->
    <Process />

    <!-- 产品分类 -->
    <section class="py-20 dark:bg-gray-900">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] dark:text-white mb-4">
            {{ $t("products.categories.title") }}
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
            {{ $t("products.categories.subtitle") }}
          </p>
        </div>

        <!-- tab切换 -->
        <div class="flex justify-center space-x-4 mb-8 flex-wrap">
          <button
            v-for="tab in productTabs"
            :key="tab.key"
            :class="[
              'px-8 py-3 rounded-lg font-semibold text-lg m-1',
              activeTab === tab.key
                ? 'bg-blue-600 text-white'
                : 'bg-[#F5F8FB] dark:bg-gray-800 text-blue-600 dark:text-blue-400',
            ]"
            @click="activeTab = tab.key"
          >
            {{ $t(tab.label) }}
          </button>
        </div>

        <!-- 卡片区 -->
        <div class="grid md:grid-cols-2 gap-6">
          <div
            v-for="(card, idx) in getActiveTabCards"
            :key="idx"
            class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg flex p-6 shadow-sm min-h-[135px]"
          >
            <div
              class="flex-shrink-0 flex items-center justify-center bg-[#F5F8FB] dark:bg-gray-700 rounded-lg mr-6"
              style="width: 160px; height: 180px"
            >
              <img
                :src="card.img"
                :alt="$t(card.titleKey)"
                class="object-contain dark:opacity-90"
              />
            </div>
            <div class="flex-1 flex flex-col h-full">
              <h3
                class="text-2xl font-extrabold mb-2 text-left mt-0 dark:text-white"
              >
                {{ $t(card.titleKey) }}
              </h3>
              <p
                class="text-gray-700 dark:text-gray-300 mb-4 text-left text-base leading-relaxed"
              >
                {{ $t(card.descKey) }}
              </p>
              <div class="flex justify-between mt-auto">
                <button
                  class="px-4 py-2 bg-blue-600 text-white rounded w-[48%]"
                >
                  {{ $t("products.tabCards.detail") }}
                </button>
                <button
                  class="px-4 py-2 border border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-500 rounded w-[48%]"
                >
                  {{ $t("products.tabCards.price") }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 产品信息tab板块后新增定价与优惠和专家咨询 -->
    <section class="py-20 bg-[#f8f9fa] dark:bg-gray-900">
      <div
        class="container mx-auto flex flex-col md:flex-row items-center justify-between gap-8"
      >
        <div class="md:w-1/2 mb-8 md:mb-0">
          <h2 class="text-2xl font-bold text-[#222] dark:text-white mb-4">
            {{ $t("products.pricing.title") }}
          </h2>
          <p class="text-gray-600 dark:text-gray-300 mb-4">
            {{ $t("products.pricing.subtitle") }}
          </p>
          <p class="text-gray-500 dark:text-gray-400 mb-8">
            {{ $t("products.pricing.desc") }}
          </p>
          <div class="flex space-x-4">
            <a href="http://calc.buddyscloud.com/awsSearch">
              <button
                class="px-6 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded transition-colors duration-300"
              >
                {{ $t("products.pricing.quoteBtn") }}
              </button></a
            >
            <button
              class="px-6 py-2 border border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-500 hover:bg-blue-50 dark:hover:bg-gray-700 rounded transition-colors duration-300"
            >
              {{ $t("products.pricing.planBtn") }}
            </button>
          </div>
        </div>
        <div class="md:w-1/2 flex justify-center">
          <div
            class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md"
          >
            <div
              class="bg-blue-600 dark:bg-blue-700 text-white rounded-t-lg px-6 py-3 text-lg font-bold"
            >
              {{ $t("products.pricing.agentTitle") }}
            </div>
            <ul class="divide-y divide-gray-200 dark:divide-gray-700 px-6 py-4">
              <li
                v-for="(item, idx) in agentBenefits"
                :key="idx"
                class="flex items-center py-2"
              >
                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                <span class="text-gray-700 dark:text-gray-300">{{
                  $t(item)
                }}</span>
              </li>
            </ul>
            <div
              class="px-6 pb-3 pt-1 text-xs text-gray-400 dark:text-gray-500"
            >
              {{ $t("products.pricing.agentNote") }}
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="py-14 bg-blue-600 dark:bg-blue-800">
      <div class="container mx-auto text-center text-white">
        <h2 class="text-3xl font-bold mb-4">
          {{ $t("products.consult.title") }}
        </h2>
        <p class="text-lg mb-8">{{ $t("products.consult.subtitle") }}</p>
        <button
          class="bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 px-8 py-3 rounded-lg font-semibold text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
        >
          {{ $t("products.consult.btn") }}
          <i class="fas fa-arrow-right ml-2"></i>
        </button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, computed } from "vue";
import { useHead } from "nuxt/app";
import Process from "~/components/Process.vue";
const { t } = useI18n(); // 添加页面元数据

// 添加页面元数据
useHead({
  title: () => t("meta.products.title"),
  meta: [
    { name: "description", content: () => t("meta.products.description") },
    { name: "keywords", content: () => t("meta.products.keywords") },
  ],
});
// 产品分类
const productCategories = {
  compute: {
    icon: "fas fa-server",
    nameKey: "products.categories.items.compute.name",
    descriptionKey: "products.categories.items.compute.description",
  },
  storage: {
    icon: "fas fa-database",
    nameKey: "products.categories.items.storage.name",
    descriptionKey: "products.categories.items.storage.description",
  },
  network: {
    icon: "fas fa-sitemap",
    nameKey: "products.categories.items.network.name",
    descriptionKey: "products.categories.items.network.description",
  },
  security: {
    icon: "fas fa-shield-alt",
    nameKey: "products.categories.items.security.name",
    descriptionKey: "products.categories.items.security.description",
  },
  database: {
    icon: "fas fa-chart-line",
    nameKey: "products.categories.items.database.name",
    descriptionKey: "products.categories.items.database.description",
  },
  ai: {
    icon: "fas fa-robot",
    nameKey: "products.categories.items.ai.name",
    descriptionKey: "products.categories.items.ai.description",
  },
};

// 产品列表
const products = {
  ec2: {
    icon: "fas fa-server",
    nameKey: "products.list.items.ec2.name",
    descriptionKey: "products.list.items.ec2.description",
    features: [
      "products.list.items.ec2.features.0",
      "products.list.items.ec2.features.1",
      "products.list.items.ec2.features.2",
      "products.list.items.ec2.features.3",
    ],
    pricingKey: "products.list.items.ec2.pricing",
  },
  s3: {
    icon: "fas fa-database",
    nameKey: "products.list.items.s3.name",
    descriptionKey: "products.list.items.s3.description",
    features: [
      "products.list.items.s3.features.0",
      "products.list.items.s3.features.1",
      "products.list.items.s3.features.2",
      "products.list.items.s3.features.3",
    ],
    pricingKey: "products.list.items.s3.pricing",
  },
  rds: {
    icon: "fas fa-table",
    nameKey: "products.list.items.rds.name",
    descriptionKey: "products.list.items.rds.description",
    features: [
      "products.list.items.rds.features.0",
      "products.list.items.rds.features.1",
      "products.list.items.rds.features.2",
      "products.list.items.rds.features.3",
    ],
    pricingKey: "products.list.items.rds.pricing",
  },
};

// 服务优势
const advantages = {
  deployment: {
    icon: "fas fa-tachometer-alt",
    titleKey: "products.advantages.items.deployment.title",
    descriptionKey: "products.advantages.items.deployment.description",
  },
  cost: {
    icon: "fas fa-hand-holding-usd",
    titleKey: "products.advantages.items.cost.title",
    descriptionKey: "products.advantages.items.cost.description",
  },
  security: {
    icon: "fas fa-lock",
    titleKey: "products.advantages.items.security.title",
    descriptionKey: "products.advantages.items.security.description",
  },
  support: {
    icon: "fas fa-headset",
    titleKey: "products.advantages.items.support.title",
    descriptionKey: "products.advantages.items.support.description",
  },
};

const productTabs = [
  { key: "all", label: "products.categories.items.all.name" },
  { key: "compute", label: "products.categories.items.compute.name" },
  { key: "storage", label: "products.categories.items.storage.name" },
  { key: "database", label: "products.categories.items.database.name" },
  { key: "network", label: "products.categories.items.network.name" },
  { key: "security", label: "products.categories.items.security.name" },
  { key: "ai", label: "products.categories.items.ai.name" },
];

// 卡片数据类型声明，适配ts
interface ProductCard {
  titleKey: string;
  descKey: string;
  img: string;
}

// 先定义computeTab内容
const computeTab: ProductCard[] = [
  {
    titleKey: "products.tabCards.compute.ec2.title",
    descKey: "products.tabCards.compute.ec2.desc",
    img: "/images/products/ec2.svg",
  },
  {
    titleKey: "products.tabCards.compute.lambda.title",
    descKey: "products.tabCards.compute.lambda.desc",
    img: "/images/products/lambda.svg",
  },
  {
    titleKey: "products.tabCards.compute.beanstalk.title",
    descKey: "products.tabCards.compute.beanstalk.desc",
    img: "/images/products/beanstalk.svg",
  },
  {
    titleKey: "products.tabCards.compute.ecs.title",
    descKey: "products.tabCards.compute.ecs.desc",
    img: "/images/products/ecs.svg",
  },
];

const storageTab: ProductCard[] = [
  {
    titleKey: "products.tabCards.storage.s3.title",
    descKey: "products.tabCards.storage.s3.desc",
    img: "/images/products/s3.svg",
  },
  {
    titleKey: "products.tabCards.storage.ebs.title",
    descKey: "products.tabCards.storage.ebs.desc",
    img: "/images/products/ebs.svg",
  },
  {
    titleKey: "products.tabCards.storage.glacier.title",
    descKey: "products.tabCards.storage.glacier.desc",
    img: "/images/products/glacier.svg",
  },
  {
    titleKey: "products.tabCards.storage.efs.title",
    descKey: "products.tabCards.storage.efs.desc",
    img: "/images/products/efs.svg",
  },
];

const databaseTab: ProductCard[] = [
  {
    titleKey: "products.tabCards.database.rds.title",
    descKey: "products.tabCards.database.rds.desc",
    img: "/images/products/rds.webp",
  },
  {
    titleKey: "products.tabCards.database.dynamodb.title",
    descKey: "products.tabCards.database.dynamodb.desc",
    img: "/images/products/dynamodb.png",
  },
  {
    titleKey: "products.tabCards.database.aurora.title",
    descKey: "products.tabCards.database.aurora.desc",
    img: "/images/products/aurora.jpg",
  },
  {
    titleKey: "products.tabCards.database.redshift.title",
    descKey: "products.tabCards.database.redshift.desc",
    img: "/images/products/redshift.jpg",
  },
];

const networkTab: ProductCard[] = [
  {
    titleKey: "products.tabCards.network.vpc.title",
    descKey: "products.tabCards.network.vpc.desc",
    img: "/images/products/vpc.jpg",
  },
  {
    titleKey: "products.tabCards.network.cloudfront.title",
    descKey: "products.tabCards.network.cloudfront.desc",
    img: "/images/products/cloudfront.jpg",
  },
  {
    titleKey: "products.tabCards.network.directconnect.title",
    descKey: "products.tabCards.network.directconnect.desc",
    img: "/images/products/aws-direct-connect.jpg",
  },
  {
    titleKey: "products.tabCards.network.route53.title",
    descKey: "products.tabCards.network.route53.desc",
    img: "/images/products/route-53.jpg",
  },
];

const securityTab: ProductCard[] = [
  {
    titleKey: "products.tabCards.security.iam.title",
    descKey: "products.tabCards.security.iam.desc",
    img: "/images/products/iam.jpg",
  },
  {
    titleKey: "products.tabCards.security.shield.title",
    descKey: "products.tabCards.security.shield.desc",
    img: "/images/products/shield.jpg",
  },
  {
    titleKey: "products.tabCards.security.waf.title",
    descKey: "products.tabCards.security.waf.desc",
    img: "/images/products/waf.jpg",
  },
  {
    titleKey: "products.tabCards.security.kms.title",
    descKey: "products.tabCards.security.kms.desc",
    img: "/images/products/kms.jpg",
  },
];

const aiTab: ProductCard[] = [
  {
    titleKey: "products.tabCards.ai.sagemaker.title",
    descKey: "products.tabCards.ai.sagemaker.desc",
    img: "/images/products/sagemaker.jpg",
  },
  {
    titleKey: "products.tabCards.ai.rekognition.title",
    descKey: "products.tabCards.ai.rekognition.desc",
    img: "/images/products/rekognition.jpg",
  },
  {
    titleKey: "products.tabCards.ai.comprehend.title",
    descKey: "products.tabCards.ai.comprehend.desc",
    img: "/images/products/comprehend.jpg",
  },
  {
    titleKey: "products.tabCards.ai.lex.title",
    descKey: "products.tabCards.ai.lex.desc",
    img: "/images/products/lex.jpg",
  },
];

const productTabCards: Record<string, ProductCard[]> = {
  compute: computeTab,
  storage: storageTab,
  database: databaseTab,
  network: networkTab,
  security: securityTab,
  ai: aiTab,
};

const activeTab = ref("all");

// 获取当前活动标签的卡片
const getActiveTabCards = computed(() => {
  if (activeTab.value === "all") {
    // 合并所有标签页的卡片，每个标签页取前2个
    let allCards: ProductCard[] = [];
    Object.values(productTabCards).forEach((cards) => {
      allCards = [...allCards, ...cards];
    });
    return allCards;
  }
  return productTabCards[activeTab.value] || [];
});

const agentBenefits = [
  "products.pricing.agentBenefits.0",
  "products.pricing.agentBenefits.1",
  "products.pricing.agentBenefits.2",
  "products.pricing.agentBenefits.3",
];
</script>
