<template>
  <div>
    <!-- 英雄区域 -->
    <HeroBanner
      :line1Key="'home.hero.line1'"
      :line2Key="'home.hero.line2'"
      :line3Key="'home.hero.line3'"
      :line4Key="'home.hero.line4'"
      :line5Key="'home.hero.line5'"
      bgImage="/images/index/banner.webp"
    >
      <a
        href="#features"
        class="w-full sm:w-auto px-6 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-md transition-colors duration-300 text-sm text-center shadow-md hover:shadow-lg"
        >{{ $t("home.hero.cta") }}</a
      >
      <a
        href="/contact"
        class="w-full sm:w-auto px-6 py-2.5 bg-transparent hover:bg-white/10 text-white font-medium rounded-md transition-colors duration-300 text-sm border border-white text-center shadow-sm hover:shadow-md"
        >{{ $t("home.hero.contact") }}</a
      >
    </HeroBanner>

    <Service id="features" />

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

    <!-- 为什么选择AWS -->
    <section class="bg-light-gray py-20 dark:bg-gray-800">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2
            class="text-4xl md:text-[40px] font-bold text-[#333333] dark:text-white mb-6 leading-tight"
          >
            {{ $t("home.features.title") }}
          </h2>
          <p
            class="text-xl md:text-[20px] text-[#333333] dark:text-gray-200 mb-4 leading-relaxed"
          >
            {{ $t("home.features.subtitle") }}
          </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <!-- 安全可靠 -->
          <div class="bg-white dark:bg-gray-700 p-8 text-center">
            <div
              class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fas fa-shield-alt text-[#0066CC] dark:text-[#4da6ff] text-5xl"
              ></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
              {{ $t("home.features.items.security.title") }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
            >
              {{ $t("home.features.items.security.description") }}
            </p>
          </div>

          <!-- 高性能 -->
          <div class="bg-white dark:bg-gray-700 p-8 text-center">
            <div
              class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fas fa-chart-line text-[#0066CC] dark:text-[#4da6ff] text-5xl"
              ></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
              {{ $t("home.features.items.performance.title") }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
            >
              {{ $t("home.features.items.performance.description") }}
            </p>
          </div>

          <!-- 成本优化 -->
          <div class="bg-white dark:bg-gray-700 p-8 text-center">
            <div
              class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fas fa-dollar-sign text-[#0066CC] dark:text-[#4da6ff] text-5xl"
              ></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
              {{ $t("home.features.items.cost.title") }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
            >
              {{ $t("home.features.items.cost.description") }}
            </p>
          </div>

          <!-- 弹性伸缩 -->
          <div class="bg-white dark:bg-gray-700 p-8 text-center">
            <div
              class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fas fa-expand-arrows-alt text-[#0066CC] dark:text-[#4da6ff] text-5xl"
              ></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
              {{ $t("home.features.items.elastic.title") }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
            >
              {{ $t("home.features.items.elastic.description") }}
            </p>
          </div>

          <!-- 丰富工具 -->
          <div class="bg-white dark:bg-gray-700 p-8 text-center">
            <div
              class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fas fa-tools text-[#0066CC] dark:text-[#4da6ff] text-5xl"
              ></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
              {{ $t("home.features.items.tools.title") }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
            >
              {{ $t("home.features.items.tools.description") }}
            </p>
          </div>

          <!-- 专业支持 -->
          <div class="bg-white dark:bg-gray-700 p-8 text-center">
            <div
              class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
            >
              <i
                class="fas fa-headset text-[#0066CC] dark:text-[#4da6ff] text-5xl"
              ></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
              {{ $t("home.features.items.support.title") }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
            >
              {{ $t("home.features.items.support.description") }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心产品 -->
    <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("home.products.title") }}
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
            {{ $t("home.products.subtitle") }}
          </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <div
            v-for="(product, key) in productsData"
            :key="key"
            class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
          >
            <div
              class="h-48 bg-cover bg-center"
              :style="`background-image: url('/images/index/${key}.png')`"
            >
              <div class="h-full w-full flex items-center justify-center">
                <!-- 移除图标 -->
              </div>
            </div>
            <div class="p-8">
              <h3 class="text-2xl font-semibold mb-4 dark:text-white">
                {{ $t(product.titleKey) }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
                {{ $t(product.descriptionKey) }}
              </p>
              <NuxtLink
                to="/products"
                class="inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors duration-300"
              >
                {{ $t("home.products.more") }}
                <i class="fas fa-arrow-right ml-2"></i>
              </NuxtLink>
            </div>
          </div>
        </div>

        <div class="text-center mt-12">
          <NuxtLink
            to="/products"
            class="inline-flex items-center px-8 py-3 border border-primary text-primary dark:text-[#4da6ff] dark:border-[#4da6ff] hover:bg-primary/5 dark:hover:bg-[#4da6ff]/10 rounded-md transition-colors duration-300"
          >
            {{ $t("home.products.viewAll") }}
            <i class="fas fa-arrow-right ml-2"></i>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 客户案例 -->
    <section class="py-16 relative dark:bg-gray-800">
      <div
        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-10"
        style="background-image: url('/images/bg/cases-bg.webp')"
      ></div>
      <div class="container relative z-10">
        <h2 class="text-4xl font-bold text-center mb-4 dark:text-white">
          {{ $t("home.cases.title") }}
        </h2>
        <p class="text-xl text-center text-gray-600 dark:text-gray-300 mb-12">
          {{ $t("home.cases.subtitle") }}
        </p>

        <div class="flex flex-col space-y-8">
          <div
            v-for="(caseData, index) in casesData"
            :key="index"
            class="flex bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"
          >
            <div
              class="w-2/5 flex items-center justify-center overflow-hidden"
              :style="` background-size: cover; background-position: center;`"
            >
              <div
                class="w-full h-full flex items-center justify-center backdrop-blur-sm p-4"
              >
                <img
                  :src="caseData.image"
                  :alt="caseData.title"
                  class="w-full h-full"
                />
              </div>
            </div>
            <div class="w-3/5 p-6">
              <h3 class="text-2xl font-bold mb-4 dark:text-white">
                {{ $t(caseData.title) }}
              </h3>
              <div class="mb-6">
                <p
                  v-for="(highlight, highlightIndex) in caseData.highlights"
                  :key="highlightIndex"
                  class="text-gray-600 dark:text-gray-300 text-sm flex items-center mb-2"
                >
                  <span
                    class="w-1 h-1 rounded-full bg-gray-500 dark:bg-gray-400 mr-2"
                  ></span>
                  {{ $t(highlight) }}
                </p>
              </div>
              <a
                :href="caseData.link"
                class="inline-flex items-center text-primary dark:text-[#4da6ff] hover:text-primary/90 bg-white dark:bg-gray-700 border border-primary dark:border-[#4da6ff] px-4 py-2 rounded-md"
              >
                {{ $t(caseData.button) }}
                <i class="fas fa-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
        </div>

        <div class="text-center mt-12">
          <NuxtLink
            to="/cases"
            class="inline-flex items-center px-8 py-3 border border-primary dark:border-[#4da6ff] text-primary dark:text-[#4da6ff] hover:bg-primary/5 dark:hover:bg-[#4da6ff]/10 rounded-md transition-colors duration-300"
          >
            {{ $t("home.cases.readMore") }}
            <i class="fas fa-arrow-right ml-2"></i>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- AWS资讯 -->
    <section class="py-10 md:py-20 bg-white dark:bg-gray-900">
      <div class="container">
        <h2
          class="text-2xl md:text-4xl font-bold text-center text-[#333333] dark:text-white mb-8 md:mb-16"
        >
          {{ $t("home.awsnews.title") }}
        </h2>

        <div
          class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 max-w-5xl mx-auto"
        >
          <NuxtLink
            v-for="(item, index) in news"
            :key="index"
            :to="`/awsnews/${item.path.split('/').pop()}`"
            class="group"
          >
            <div
              class="flex flex-col bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 p-4 md:p-6 min-h-[160px] md:h-[200px] border border-gray-100 dark:border-gray-600 hover:border-primary/20 dark:hover:border-[#4da6ff]/20 hover:shadow-lg rounded-lg"
            >
              <h3
                class="text-lg md:text-xl font-medium text-[#333333] dark:text-white group-hover:text-[#0066CC] dark:group-hover:text-[#4da6ff] mb-2 md:mb-3 line-clamp-1 min-h-[2rem] truncate"
              >
                {{ item.title }}
              </h3>
              <p
                class="text-xs md:text-sm text-gray-900 dark:text-gray-300 mb-1 md:mb-2"
              >
                {{ item.date }}
              </p>
              <p class="text-gray-500 dark:text-gray-300 line-clamp-2">
                {{ item.description }}
              </p>
              <div
                class="mt-auto pt-2 md:pt-3 text-primary dark:text-[#4da6ff] text-xs md:text-sm group-hover:translate-x-2 transition-transform duration-300"
              >
                  {{ $t("home.awsnews.readmore") }} →
              </div>
            </div>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 开启云计算之旅 -->
    <section class="py-20 bg-[#0066CC] relative overflow-hidden">
      <div class="container relative z-10">
        <div class="max-w-4xl mx-auto text-center text-white">
          <h2 class="text-4xl font-bold mb-6">
            {{ $t("home.startJourney.title") }}
          </h2>
          <p class="text-xl mb-12">{{ $t("home.startJourney.subtitle") }}</p>
          <NuxtLink
            to="/contact"
            class="inline-flex items-center px-8 py-4 bg-white text-[#0066CC] rounded-lg hover:bg-opacity-90 transition-colors duration-300"
          >
            {{ $t("home.startJourney.button") }}
            <img
              src="/images/index/call.svg"
              alt="contact"
              class="w-6 h-6 mx-2"
            />
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useAsyncData, useHead } from "nuxt/app";
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n(); // 添加页面元数据
useHead({
  title: () => t("meta.home.title"),
  meta: [
    { name: "description", content: () => t("meta.home.description") || '' },
    { name: "keywords", content: () => t("meta.home.keywords") || '' },
  ],
});
const news = ref<NewsItem[]>([]);

interface NewsItem {
  title: string;
  date: string;
  description: string;
  path: string;
}

// 获取新闻数据
const getNews = async () => {
  // 直接使用默认数据，避免内容模块相关问题
  news.value = getDefaultNews();
};

// 默认新闻数据
const getDefaultNews = () => {
  return [
    {
      title: "AWS推出新一代EC2计算优化型实例：C7g",
      date: "2025.05.15",
      description:
        "亚马逊云科技推出基于AWS Graviton3处理器的新一代计算优化型EC2实例，为计算密集型工作负载提供更高性能和能效",
      path: "aws-ec2-new-instance-types",
    },
    {
      title: "Amazon Bedrock现已支持Anthropic Claude 3.5 Sonnet模型",
      date: "2024.03.22",
      description:
        "AWS宣布在Amazon Bedrock上推出Anthropic的最新生成式AI模型Claude 3.5 Sonnet，帮助企业构建更智能的AI应用",
      path: "amazon-bedrock-claude-3-5-sonnet",
    },
    {
      title: "AWS Shield Advanced增强功能助力企业应对复杂DDoS攻击",
      date: "2024.06.01",
      description:
        "亚马逊云科技宣布AWS Shield Advanced新增智能威胁检测和自动缓解功能，为企业提供更强大的DDoS防护能力",
      path: "aws-shield-advanced-enhancements",
    },
    {
      title: "RDS数据库服务新增支持MongoDB引擎",
      date: "2024.06.15",
      description:
        "亚马逊云科技宣布RDS数据库服务新增支持MongoDB引擎，为企业提供更灵活的数据库解决方案",
      path: "rds",
    },
  ];
};

// 立即调用获取新闻函数，不需要等待组件挂载
getNews();

// 在组件挂载后重新获取一次，以确保在客户端导航时也能正确加载
onMounted(() => {
  getNews();
});

// AWS特性数据
const featuresData = {
  security: {
    icon: "fas fa-shield-alt",
    titleKey: "home.features.items.security.title",
    descriptionKey: "home.features.items.security.description",
  },
  performance: {
    icon: "fas fa-bolt",
    titleKey: "home.features.items.performance.title",
    descriptionKey: "home.features.items.performance.description",
  },
  cost: {
    icon: "fas fa-dollar-sign",
    titleKey: "home.features.items.cost.title",
    descriptionKey: "home.features.items.cost.description",
  },
};

// 核心产品数据
const productsData = {
  ec2: {
    icon: "fas fa-server",
    titleKey: "home.products.items.ec2.title",
    descriptionKey: "home.products.items.ec2.description",
  },
  s3: {
    icon: "fas fa-database",
    titleKey: "home.products.items.s3.title",
    descriptionKey: "home.products.items.s3.description",
  },
  rds: {
    icon: "fas fa-network-wired",
    titleKey: "home.products.items.rds.title",
    descriptionKey: "home.products.items.rds.description",
  },
};

// 客户案例数据（国际化）
const casesData = [
  {
    image: "/images/index/DBS.svg",
    title: "home.cases.items.case1.title",
    highlights: [
      "home.cases.items.case1.description1",
      "home.cases.items.case1.description2",
    ],
    link: "/cases",
    button: "home.cases.readMore",
  },
  {
    image: "/images/index/market.svg",
    title: "home.cases.items.case2.title",
    highlights: [
      "home.cases.items.case2.description1",
      "home.cases.items.case2.description2",
    ],
    link: "/cases",
    button: "home.cases.readMore",
  },
];
</script>
