fad-trade-next/components/home/index.tsx

'use client'
import { useTranslations } from "next-intl";

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

  return (
    <>
      <section className="mx-auto text-center">
        {/* 轮播图区域, 先用一张图片占位， 宽度100%， 盖度100vh */}
        <img src="/placeholder.svg" 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="/placeholder.svg"
              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">天津友发钢管集团股份有限公司</h2>
            </div>

            {/* 第二部分：介绍 */}
            <div className="mb-8">
              <p className="text-lg text-gray-700 leading-relaxed">
                友发集团是集直缝焊接圆管（含热浸镀锌）、直缝焊接方矩管（含热浸镀锌）、钢塑复合管、不锈钢管及管件、螺旋焊管（含承插及防腐加工）、热镀锌无缝管、石油管道、管件、保温管道、塑料管及管件、盘扣脚手架、光伏支架及地桩等多种产品生产销售于一体的大型企业集团，拥有'友发'和'正金'两个品牌。已经形成天津、河北唐山、河北邯郸、河北沧州、陕西韩城、江苏溧阳、辽宁葫芦岛、云南玉溪、安徽临泉、吉林磐石10个生产基地，同时正在建设四川成都基地。
              </p>
            </div>

            {/* 第三部分：按钮 */}
            <div>
              <button className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded transition-colors">
                了解更多
              </button>
            </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">5</div>
                <div className="text-gray-700">国家级绿色产品</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">3+</div>
                <div className="text-gray-700">国家级绿色工厂</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">7</div>
                <div className="text-gray-700">CNAS（国家认可）实验室</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">10</div>
                <div className="text-gray-700">生产基地</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">5</div>
                <div className="text-gray-700">国家级绿色产品</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">3+</div>
                <div className="text-gray-700">国家级绿色工厂</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">7</div>
                <div className="text-gray-700">CNAS（国家认可）实验室</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">10</div>
                <div className="text-gray-700">生产基地</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">
              最新资讯
              <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">
            {/* 第一张卡片 */}
            <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">2025/11/17</div>
                <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">核聚变区，智创未来，友发集团亮相202...</div>
              </div>
              <div className="p-4 h-48 overflow-hidden">
                <img src="/placeholder.svg" alt="资讯图片1" className="w-full h-full object-cover rounded" />
              </div>
            </div>

            {/* 第二张卡片 - 中间突出显示 */}
            <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">2025/11/17</div>
                <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">携手再攀产业新高峰，友发集团应邀出席...</div>
              </div>
              <div className="p-4 h-48 overflow-hidden">
                <img src="/placeholder.svg" alt="资讯图片2" className="w-full h-full object-cover rounded" />
              </div>
            </div>

            {/* 第三张卡片 */}
            <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">2025/09/20</div>
                <div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">友发集团与中诚投建工集团签订战略合作...</div>
              </div>
              <div className="p-4 h-48 overflow-hidden">
                <img src="/placeholder.svg" alt="资讯图片3" className="w-full h-full object-cover rounded" />
              </div>
            </div>
          </div>

          {/* 了解更多按钮 */}
          <div className="text-center mt-12">
            <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">
              了解更多 &gt;
            </button>
          </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">
              产品中心
              <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="/placeholder.svg"
                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">直缝高频焊接圆管(含热浸镀锌)</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', '/placeholder.svg');
                  document.getElementById('productImage')?.setAttribute('alt', '直缝高频焊接圆管');
                  document.getElementById('productTitle')!.textContent = '直缝高频焊接圆管(含热浸镀锌)';
                }}
              >
                <span>直缝高频焊接圆管(含热浸镀锌)</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', '/placeholder.svg');
                  document.getElementById('productImage')?.setAttribute('alt', '方形焊接钢管');
                  document.getElementById('productTitle')!.textContent = '方形焊接钢管(含热浸镀锌)';
                }}
              >
                <span>方形焊接钢管(含热浸镀锌)</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', '/placeholder.svg');
                  document.getElementById('productImage')?.setAttribute('alt', '钢塑复合管');
                  document.getElementById('productTitle')!.textContent = '钢塑复合管';
                }}
              >
                <span>钢塑复合管</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', '/placeholder.svg');
                  document.getElementById('productImage')?.setAttribute('alt', '管路连接件');
                  document.getElementById('productTitle')!.textContent = '管路连接件';
                }}
              >
                <span>管路连接件</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', '/placeholder.svg');
                  document.getElementById('productImage')?.setAttribute('alt', '盘扣脚手架');
                  document.getElementById('productTitle')!.textContent = '盘扣脚手架';
                }}
              >
                <span>盘扣脚手架</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', '/placeholder.svg');
                  document.getElementById('productImage')?.setAttribute('alt', '不锈钢管及管件');
                  document.getElementById('productTitle')!.textContent = '不锈钢管及管件';
                }}
              >
                <span>不锈钢管及管件</span>
              </div>
            </div>
          </div>
        </div>

        {/* 应用领域 */}
        <div className="py-16 px-4 bg-gray-50 relative overflow-hidden">
          {/* 标题 */}
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
              应用领域
              <span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
            </h2>
          </div>

          {/* 轮播容器 */}
          <div className="relative max-w-7xl mx-auto">
            {/* 左切换按钮 */}
            <button
              id="prevSlide"
              className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
            >
              &lt;
            </button>

            {/* 右切换按钮 */}
            <button
              id="nextSlide"
              className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
            >
              &gt;
            </button>

            {/* 轮播内容 */}
            <div className="overflow-hidden">
              <div
                id="carouselTrack"
                className="flex transition-transform duration-500 ease-in-out"
                style={{ transform: 'translateX(0)' }}
              >
                {/* 第一组卡片拼图 */}
                <div className="min-w-full flex flex-wrap gap-4 p-4">
                  {/* 第一行 */}
                  <div className="w-full flex gap-4 mb-4">
                    {/* 电梯井道 */}
                    <div className="w-1/4 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="电梯井道"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        电梯井道
                      </div>
                    </div>

                    {/* 塔机制造 - 宽度为其他卡片的两倍 */}
                    <div className="w-1/2 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="塔机制造"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        塔机制造
                      </div>
                    </div>

                    {/* 工程机械 */}
                    <div className="w-1/4 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="工程机械"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        工程机械
                      </div>
                    </div>
                  </div>

                  {/* 第二行 */}
                  <div className="w-full flex gap-4">
                    {/* 高速护栏 - 宽度为其他卡片的两倍 */}
                    <div className="w-1/2 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="高速护栏"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        高速护栏
                      </div>
                    </div>

                    {/* 桥梁 */}
                    <div className="w-1/4 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="桥梁"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        桥梁
                      </div>
                    </div>

                    {/* 钢结构 */}
                    <div className="w-1/4 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="钢结构"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        钢结构
                      </div>
                    </div>
                  </div>
                </div>

                {/* 第二组卡片拼图（可扩展更多组） */}
                <div className="min-w-full flex flex-wrap gap-4 p-4">
                  {/* 第一行 */}
                  <div className="w-full flex gap-4 mb-4">
                    {/* 建筑工程 */}
                    <div className="w-1/3 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="建筑工程"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        建筑工程
                      </div>
                    </div>

                    {/* 水利水电 */}
                    <div className="w-1/3 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="水利水电"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        水利水电
                      </div>
                    </div>

                    {/* 轨道交通 */}
                    <div className="w-1/3 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="轨道交通"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        轨道交通
                      </div>
                    </div>
                  </div>

                  {/* 第二行 */}
                  <div className="w-full flex gap-4">
                    {/* 市政工程 */}
                    <div className="w-1/3 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="市政工程"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        市政工程
                      </div>
                    </div>

                    {/* 农业设施 */}
                    <div className="w-1/3 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="农业设施"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        农业设施
                      </div>
                    </div>

                    {/* 能源化工 */}
                    <div className="w-1/3 relative overflow-hidden rounded-lg">
                      <img
                        src="/placeholder.svg"
                        alt="能源化工"
                        className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
                      />
                      <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
                        能源化工
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 生产案例 */}
      </section>
    </>
  );
}