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

const Wrap = styled.div`
  max-width:900px;margin:0 auto;padding:0 16px 40px;
  @media(max-width:640px){padding:0 12px 32px}
`;

const Hero = styled.div`text-align:center;padding:32px 0 28px;@media(max-width:640px){padding:18px 0 16px}`;
const Title = styled.h1`
  font-size:44px;font-weight:800;color:#1f2937;margin:0 0 12px;
  text-shadow:0 2px 8px rgba(0,0,0,0.1);letter-spacing:0.02em;
  @media(max-width:640px){font-size:30px;margin-bottom:10px}
`;

const Grid = styled(ModuleGrid)``;

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>
    <Wrap>
      <Hero>
        <Title>万象口袋</Title>
      </Hero>
      <Grid>
        {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>
          );
        })}
      </Grid>
    </Wrap>
  </PageWrapper>
);

export default HomePage;
