code

import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';

// 数据结构
const productData = {
  2026: [
    {
      category: '旗舰产品',
      name: 'Changsha V100R001',
      model: 'C20',
      images: ['📱', '📱']
    },
    {
      category: '中高端产品',
      name: 'Nanchang V100R001',
      model: 'C10',
      images: ['📱']
    },
    {
      category: 'PC产品',
      name: 'Changsha V100R005',
      model: 'C10 C20 C30',
      images: ['💻']
    }
  ],
  2025: [
    {
      category: '旗舰产品',
      name: 'Charlotte Pro V100R005',
      model: 'C50',
      images: ['🔴', '🔴']
    },
    {
      category: '中高端产品',
      name: 'Elite Series X200',
      model: 'E40',
      images: ['📱']
    },
    {
      category: 'PC产品',
      name: 'Desktop Pro Max',
      model: 'D60',
      images: ['💻']
    },
    {
      category: '穿戴产品',
      name: 'SmartWatch Ultra',
      model: 'W10',
      images: ['⌚']
    }
  ],
  2024: [
    {
      category: '旗舰产品',
      name: 'Premium V100R003',
      model: 'P40',
      images: ['📱']
    },
    {
      category: 'PC产品',
      name: 'Charlotte Pro V100R005',
      model: 'C50',
      images: ['💻', '❌']
    },
    {
      category: '穿戴产品',
      name: 'Fitness Band Pro',
      model: 'F15',
      images: ['⌚']
    }
  ],
  2023: [
    {
      category: '穿戴产品',
      name: 'Atherton V100R001',
      model: 'C30',
      images: ['⌚']
    }
  ]
};

export default function ProductTimeline() {
  const years = Object.keys(productData).sort((a, b) => b - a);
  const [selectedYear, setSelectedYear] = useState(years[0]);
  
  const products = productData[selectedYear] || [];

  return (
    <div className="min-h-screen bg-white">
      {/* 顶部标签栏 */}
      <div className="bg-slate-100 border-b-2 border-slate-200">
        <div className="max-w-6xl mx-auto px-8">
          <div className="flex justify-center items-end gap-3 pt-8">
            {years.map((year) => (
              <button
                key={year}
                onClick={() => setSelectedYear(year)}
                className={`
                  relative px-14 pb-4 pt-3 text-2xl font-medium
                  transition-all duration-200
                  ${selectedYear === year
                    ? 'text-slate-800 bg-white rounded-t-lg shadow-sm'
                    : 'text-slate-500 hover:text-slate-700'
                  }
                `}
              >
                {year}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* 产品展示区域 */}
      <div className="max-w-6xl mx-auto px-8 py-16">
        <div 
          className="grid gap-6"
          style={{
            gridTemplateColumns: `repeat(${Math.min(products.length, 5)}, 1fr)`
          }}
        >
          {products.map((product, index) => (
            <Card 
              key={index}
              className="hover:shadow-lg transition-shadow duration-200 border border-slate-200 bg-white"
            >
              <CardContent className="p-6 flex flex-col h-full">
                {/* 分类标题 */}
                <div className="mb-4">
                  <h3 className="text-base font-semibold text-slate-700">
                    {product.category}
                  </h3>
                </div>

                {/* 产品信息 */}
                <div className="flex-grow mb-6">
                  <h4 className="text-sm font-medium text-slate-800 mb-1">
                    {product.name}
                  </h4>
                  <p className="text-xs text-slate-500">
                    {product.model}
                  </p>
                </div>

                {/* 底部图标 - 背景色块 */}
                <div className="mt-auto">
                  <div className="bg-slate-50 rounded-md border border-slate-100 p-4 flex justify-center items-center gap-3 min-h-[80px]">
                    {product.images.map((image, imgIndex) => (
                      <div 
                        key={imgIndex}
                        className="text-4xl"
                      >
                        {image}
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* 空状态 */}
        {products.length === 0 && (
          <div className="text-center py-24">
            <div className="text-slate-300 text-6xl mb-4">📦</div>
            <p className="text-base text-slate-400">暂无产品数据</p>
          </div>
        )}
      </div>
    </div>
  );
}