sage-home/components/home/index.tsx

'use client'
import { Link as I18nLink } from "@/i18n/routing";
import { useTranslations } from "next-intl";

export default function HomeComponent() {
  const t = useTranslations("Home");

  // 客户端组件中直接使用翻译键，next-intl 会自动处理
  // 注意：在客户端组件中，我们不能使用 raw() 函数，需要直接访问翻译键

  return (
    <>
      <section className="mx-auto text-center">
        {/* 轮播图区域, 先用一张图片占位， 宽度100%， 盖度100vh */}
        <img src="/images/home.png" alt={t("carousel")} className="w-screen h-[80vh] object-cover rounded-lg" />
        {/* 公司介绍 - 左右布局 */}
        <div className="flex flex-col lg:flex-row w-full my-16 px-8">
          {/* 左边视频（图片占位） */}
          <div className="w-full lg:w-1/2 h-[50vh] lg:h-[60vh] relative overflow-hidden">
            <img
              src="/images/1.png"
              alt={t("company_video")}
              className="w-full h-full object-cover"
            />
          </div>

          {/* 右边内容 - 分三部分 */}
          <div className="w-full lg:w-1/2 flex flex-col justify-center p-8 lg:p-16">
            {/* 第一部分：标题 */}
            <div className="mb-6">
              <h2 className="text-3xl font-bold text-gray-900">{t("company.title")}</h2>
            </div>

            {/* 第二部分：介绍 */}
            <div className="mb-8">
              {/* 左对齐首行缩进2字符 */}
              <p className="text-left text-lg text-gray-700 leading-relaxed indent-8">
                {t("company.description")}
              </p>
            </div>

            {/* 第三部分：按钮 */}
            <div>
              <I18nLink href="/about">
                <button className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded transition-colors">
                  {t("company.button")}
                </button>
              </I18nLink>
            </div>
          </div>
        </div>


        {/* 隐式轮播图，没有控件，每张四个卡片 */}
        <div className="relative overflow-hidden py-16">
          <div className="flex w-full flex-nowrap animate-carousel">
            {/* 第一组卡片 */}
            <div className="min-w-full flex justify-center px-4 gap-6">
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card1.number")}</div>
                <div className="text-gray-700">{t("stats.card1.title")}</div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card2.number")}</div>
                <div className="text-gray-700">{t("stats.card2.title")}</div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card3.number")}</div>
                <div className="text-gray-700">{t("stats.card3.title")}</div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card4.number")}</div>
                <div className="text-gray-700">{t("stats.card4.title")}</div>
              </div>
            </div>
            {/* 第二组卡片 - 用于无缝轮播 */}
            <div className="min-w-full flex justify-center px-4 gap-6">
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card1.number")}</div>
                <div className="text-gray-700">{t("stats.card1.title")}</div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card2.number")}</div>
                <div className="text-gray-700">{t("stats.card2.title")}</div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card3.number")}</div>
                <div className="text-gray-700">{t("stats.card3.title")}</div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
                <div className="text-red-600 text-4xl font-bold mb-2">{t("stats.card4.number")}</div>
                <div className="text-gray-700">{t("stats.card4.title")}</div>
              </div>
            </div>
          </div>
        </div>

        <style jsx>{`
          @keyframes carousel {
            0% { transform: translateX(0); }
            90% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
            100% { transform: translateX(-100%); }
          }
          .animate-carousel {
            animation: carousel 5s infinite linear;
            animation-timing-function: linear;
            transition: transform 1.5s;
          }
        `}</style>


        {/* 最新资讯 */}
        <div className="py-16 px-4 bg-white relative overflow-hidden">
          {/* 标题 */}
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
              {t("news.title")}
              <span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
            </h2>
          </div>

          {/* 资讯卡片列表 */}
          <div className="flex flex-wrap justify-center gap-6 max-w-7xl mx-auto">
            {/* 第一张卡片 */}
            <I18nLink href={t("news.items.news1.link")}>
              <div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
                <div className="p-4">
                  <div className="text-red-600 mb-2 font-medium text-left">{t("news.items.news1.date")}</div>
                  <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news1.title")}</div>
                </div>
                <div className="p-4 h-48 overflow-hidden">
                  <img src="/images/blogs/1.jpg" alt={t("news.items.news1.title")} className="w-full h-full object-cover rounded" />
                </div>
              </div>
            </I18nLink>

            {/* 第二张卡片 */}
            <I18nLink href={t("news.items.news2.link")}>
              <div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative -mt-2 z-10">
                <div className="p-4">
                  <div className="text-red-600 mb-2 font-medium text-left">{t("news.items.news2.date")}</div>
                  <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news2.title")}</div>
                </div>
                <div className="p-4 h-48 overflow-hidden">
                  <img src="/images/blogs/2.png" alt={t("news.items.news2.title")} className="w-full h-full object-cover rounded" />
                </div>
              </div>
            </I18nLink>

            {/* 第三张卡片 */}
            <I18nLink href={t("news.items.news3.link")}>
              <div className="w-full md:w-[26vw] lg:w-[26vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
                <div className="p-4">
                  <div className="text-red-600 mb-2 font-medium text-left">{t("news.items.news3.date")}</div>
                  <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">{t("news.items.news3.title")}</div>
                </div>
                <div className="p-4 h-48 overflow-hidden">
                  <img src="/images/blogs/3.jpg" alt={t("news.items.news3.title")} className="w-full h-full object-cover rounded" />
                </div>
              </div>
            </I18nLink>

          </div>

          {/* 了解更多按钮 */}
          <div className="text-center mt-12">
            <I18nLink href="/blog">
              <button className="px-6 py-2 bg-white border border-red-600 text-red-600 hover:bg-red-600 hover:text-white transition-all duration-300 rounded-sm">
                {t("news.button")}
              </button>
            </I18nLink>
          </div>
        </div>
        {/* 产品中心 */}
        <div className="py-16 px-4 bg-white">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
              {t("products.title")}
              <span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
            </h2>
          </div>

          {/* 左右布局，左3右2 */}
          <div className="flex flex-col lg:flex-row w-full max-w-7xl mx-auto">
            {/* 左侧产品图 - 占3份 */}
            <div className="w-full lg:w-3/5 h-[50vh] lg:h-[70vh] relative overflow-hidden bg-gray-100 rounded-lg mb-8 lg:mb-0">
              {/* 默认显示第一张产品图 */}
              <img
                id="productImage"
                src={t("products.list.product1.image")}
                alt={t("products.list.product1.alt")}
                className="w-full h-full object-contain p-8 transition-opacity duration-300"
              />

              {/* 产品标题覆盖层 */}
              <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
                <h3 id="productTitle" className="text-white text-2xl font-bold">{t("products.list.product1.name")}</h3>
              </div>
            </div>

            {/* 右侧产品列表 - 占2份，两列布局 */}
            <div className="w-full lg:w-2/5 grid grid-cols-2 gap-4 lg:gap-6 p-4 lg:pl-8">
              {/* 产品1 */}
              <div
                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
                onMouseEnter={() => {
                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product1.image"));
                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product1.alt"));
                  document.getElementById('productTitle')!.textContent = t("products.list.product1.name");
                }}
              >
                <span>{t("products.list.product1.name")}</span>
              </div>

              {/* 产品2 */}
              <div
                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
                onMouseEnter={() => {
                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product2.image"));
                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product2.alt"));
                  document.getElementById('productTitle')!.textContent = t("products.list.product2.name");
                }}
              >
                <span>{t("products.list.product2.name")}</span>
              </div>

              {/* 产品3 */}
              <div
                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
                onMouseEnter={() => {
                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product3.image"));
                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product3.alt"));
                  document.getElementById('productTitle')!.textContent = t("products.list.product3.name");
                }}
              >
                <span>{t("products.list.product3.name")}</span>
              </div>

              {/* 产品4 */}
              <div
                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
                onMouseEnter={() => {
                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product4.image"));
                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product4.alt"));
                  document.getElementById('productTitle')!.textContent = t("products.list.product4.name");
                }}
              >
                <span>{t("products.list.product4.name")}</span>
              </div>

              {/* 产品5 */}
              <div
                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
                onMouseEnter={() => {
                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product5.image"));
                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product5.alt"));
                  document.getElementById('productTitle')!.textContent = t("products.list.product5.name");
                }}
              >
                <span>{t("products.list.product5.name")}</span>
              </div>

              {/* 产品6 */}
              <div
                className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
                onMouseEnter={() => {
                  document.getElementById('productImage')?.setAttribute('src', t("products.list.product6.image"));
                  document.getElementById('productImage')?.setAttribute('alt', t("products.list.product6.alt"));
                  document.getElementById('productTitle')!.textContent = t("products.list.product6.name");
                }}
              >
                <span>{t("products.list.product6.name")}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}