src/feature/home/Home.tsx

import { NavLink } from 'react-router';
import filmImg from '../../assets/categories/film.jpg';
import musicImg from '../../assets/categories/music.jpg';
import gameImg from '../../assets/categories/game.jpg';
import otherImg from '../../assets/categories/other.jpg';
// 假设你有排行榜数据，这里模拟一下，实际根据接口等替换
const filmRankList = [
  { id: 1, name: '影视作品1', view: '1.2万' },
  { id: 2, name: '影视作品2', view: '1.1万' },
  { id: 3, name: '影视作品3', view: '1.0万' },
];
const musicRankList = [
  { id: 1, name: '音乐作品1', view: '1.5万' },
  { id: 2, name: '音乐作品2', view: '1.3万' },
  { id: 3, name: '音乐作品3', view: '1.2万' },
];
const gameRankList = [
  { id: 1, name: '游戏作品1', view: '2.0万' },
  { id: 2, name: '游戏作品2', view: '1.8万' },
  { id: 3, name: '游戏作品3', view: '1.6万' },
];
const otherRankList = [
  { id: 1, name: '其他作品1', view: '0.8万' },
  { id: 2, name: '其他作品2', view: '0.7万' },
  { id: 3, name: '其他作品3', view: '0.6万' },
];

function Home() {
  const categories = [
    { id: 'film', name: '影视', image: filmImg, rankList: filmRankList },
    { id: 'music', name: '音乐', image: musicImg, rankList: musicRankList },
    { id: 'game', name: '游戏', image: gameImg, rankList: gameRankList },
    { id: 'other', name: '其他', image: otherImg, rankList: otherRankList },
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 py-16 flex flex-col items-center">
      {/* 页面标题 */}
      <h1 className="text-[clamp(2rem,5vw,3.5rem)] font-bold text-center mb-12 text-gray-800 tracking-tight">
        欢迎访问创意协作平台
      </h1>

      {/* 分区 + 排行榜 容器，改为 flex 布局 */}
      <div className="w-full flex max-w-6xl mx-auto">
        {/* 分区卡片容器 - 响应式网格布局 */}
        <div className="grid grid-cols-4 gap-6 w-3/4">
          {categories.map((category) => (
            <div 
              key={category.id}
              className="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
            >
              <NavLink to={`/categories/${category.id}`} className="block">
                {/* 图片容器 */}
                <div className="aspect-[4/3] relative overflow-hidden">
                  {/* 背景图片 - 带模糊和亮度调整 */}
                  <img 
                    src={category.image}
                    alt={category.name}
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                    style={{ filter: 'blur(1px) brightness(0.85)' }}
                  />

                  {/* 渐变遮罩层 - 增强文字可读性 */}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>

                  {/* 文字内容 */}
                  <div className="absolute inset-0 flex flex-col items-center justify-center p-4 z-20">
                    {/* 分类标题 - 艺术字体 */}
                    <h2 className="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white text-center mb-2" style={{
                      fontFamily: '"Playfair Display", serif',
                      textShadow: '0 4px 12px rgba(0,0,0,0.8)',
                      transform: 'translateY(10px)',
                      transition: 'transform 0.3s ease-out',
                      letterSpacing: '2px',
                      borderBottom: '2px solid rgba(255,255,255,0.6)',
                      paddingBottom: '4px'
                    }}>
                      {category.name}
                    </h2>

                    {/* 描述文本 - 悬停显示 */}
                    <p className="text-indigo-100 text-center opacity-0 transform translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 mt-2" style={{
                      fontFamily: '"Merriweather", serif',
                      textShadow: '0 2px 6px rgba(0,0,0,0.6)'
                    }}>
                      探索{category.name}创意项目
                    </p>
                  </div>
                </div>
              </NavLink>
            </div>
          ))}
        </div>

        {/* 排行榜区域 - 右侧 */}
        <div className="w-1/4 pl-6">
          {categories.map((category) => (
            <div key={category.id} className="mb-8">
              <h3 className="text-xl font-bold text-gray-800 mb-4">{category.name}排行榜</h3>
              <ul>
                {category.rankList.map((item) => (
                  <li key={item.id} className="flex justify-between items-center mb-2">
                    <span>{item.name}</span>
                    <span className="text-gray-600">{item.view}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Home;