import React from 'react';
import { FiActivity, FiGrid, FiTool, FiCpu } from 'react-icons/fi';
import {
  PageWrapper,
  ModuleGrid,
  ModuleCard,
  ModuleIconBox,
  ModuleInfo,
  ModuleTitle,
  ModuleDesc,
  ModuleTags,
  ModuleTag,
} from '../styles/shared';

const modules = [
  {
    path: '/60sapi',
    icon: FiActivity,
    title: '60s API',
    desc: '热搜榜单 · 资讯 · 实用工具',
    bg: 'linear-gradient(135deg,#22c55e,#4ade80)',
    tags: ['资讯', '榜单', '工具', '娱乐'],
  },
  {
    path: '/smallgame',
    icon: FiGrid,
    title: '休闲游戏',
    desc: '经典小游戏，即点即玩',
    bg: 'linear-gradient(135deg,#3b82f6,#60a5fa)',
    tags: ['2048', '俄罗斯方块', '贪吃蛇'],
  },
  {
    path: '/toolbox',
    icon: FiTool,
    title: '工具箱',
    desc: '本地静态小工具，部分支持 PWA 离线',
    bg: 'linear-gradient(135deg,#f59e0b,#fbbf24)',
    tags: ['工具', '记事本', 'JSON'],
  },
  {
    path: '/aimodel',
    icon: FiCpu,
    title: 'AI 应用',
    desc: '大语言模型智能应用',
    bg: 'linear-gradient(135deg,#8b5cf6,#a78bfa)',
    tags: ['翻译', '写作', '对话'],
  },
];

const HomePage = () => (
  <PageWrapper>
    <div className="max-w-[900px] mx-auto px-4 pb-10 sm:px-3 sm:pb-8">
      <div className="text-center pt-8 pb-7 sm:pt-[18px] sm:pb-4">
        <h1 className="text-[44px] sm:text-[30px] font-extrabold text-gray-800 mb-0 [text-shadow:0_2px_8px_rgba(0,0,0,0.1)] tracking-[0.02em]">
          万象口袋
        </h1>
      </div>
      <ModuleGrid>
        {modules.map((m) => {
          const Icon = m.icon;
          return (
            <ModuleCard key={m.path} to={m.path}>
              <ModuleIconBox $bg={m.bg}>
                <Icon />
              </ModuleIconBox>
              <ModuleInfo>
                <ModuleTitle>{m.title}</ModuleTitle>
                <ModuleDesc>{m.desc}</ModuleDesc>
                <ModuleTags>
                  {m.tags.map((t) => (
                    <ModuleTag key={t}>{t}</ModuleTag>
                  ))}
                </ModuleTags>
              </ModuleInfo>
            </ModuleCard>
          );
        })}
      </ModuleGrid>
    </div>
  </PageWrapper>
);

export default HomePage;
