import {
  Box,
  Button,
  Chip,
  Divider,
  Paper,
  Stack,
  TextField,
  Typography,
} from '@mui/material'

export function HomePage() {
  return (
    <Stack spacing={3}>
      <Paper
        sx={{
          p: { xs: 2.5, md: 4 },
          border: '1px solid #e6ded1',
          background: 'linear-gradient(120deg, rgba(255,250,242,0.95), rgba(255,245,230,0.9))',
        }}
      >
        <Stack spacing={2}>
          <Box>
            <Typography variant="h1">第七史诗资讯站</Typography>
            <Typography color="text.secondary">
              日式官方感视觉，聚合公告、更新、角色与神器资料。
            </Typography>
          </Box>
          <TextField
            placeholder="搜索角色、神器、活动或公告"
            fullWidth
            size="medium"
            sx={{
              background: '#fffdf8',
              borderRadius: 2,
              '& .MuiOutlinedInput-notchedOutline': { borderColor: '#eadfce' },
            }}
          />
          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
            <Chip label="最新公告" color="primary" variant="outlined" />
            <Chip label="版本更新" variant="outlined" />
            <Chip label="节日活动" variant="outlined" />
            <Chip label="新角色" variant="outlined" />
            <Chip label="神器推荐" variant="outlined" />
          </Stack>
        </Stack>
      </Paper>

      <Box
        sx={{
          display: 'grid',
          gap: 2.5,
          gridTemplateColumns: { xs: '1fr', md: '2fr 1fr' },
        }}
      >
        <Stack spacing={2.5}>
          <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
            <Typography variant="h2">最新公告</Typography>
            <Divider sx={{ my: 2 }} />
            <Stack spacing={1.5}>
              {[
                '3月版本更新预告：全新支线与神器强化',
                '限时活动：冬日庆典兑换商店开放',
                '竞技场平衡调整说明',
              ].map((item) => (
                <Box
                  key={item}
                  sx={{
                    p: 1.5,
                    borderRadius: 2,
                    background: '#fffdf8',
                    border: '1px solid #efe3d2',
                  }}
                >
                  <Typography sx={{ fontWeight: 600 }}>{item}</Typography>
                  <Typography color="text.secondary" variant="body2">
                    2026-03-04 · 官方公告
                  </Typography>
                </Box>
              ))}
            </Stack>
          </Paper>

          <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
            <Typography variant="h2">活动与更新</Typography>
            <Divider sx={{ my: 2 }} />
            <Box
              sx={{
                display: 'grid',
                gap: 2,
                gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
              }}
            >
              {[
                { title: '节日活动入口', desc: '兑换、任务、挑战关卡' },
                { title: '版本更新摘要', desc: '职业平衡与UI优化' },
                { title: '新角色专题', desc: '技能、刻印与养成' },
                { title: '装备周报', desc: '热门套装推荐' },
              ].map((card) => (
                <Box
                  key={card.title}
                  sx={{
                    p: 2,
                    borderRadius: 2,
                    background: '#fffdf8',
                    border: '1px solid #efe3d2',
                  }}
                >
                  <Typography sx={{ fontWeight: 600 }}>{card.title}</Typography>
                  <Typography color="text.secondary" variant="body2">
                    {card.desc}
                  </Typography>
                </Box>
              ))}
            </Box>
          </Paper>
        </Stack>

        <Stack spacing={2.5}>
          <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
            <Typography variant="h2">快速入口</Typography>
            <Divider sx={{ my: 2 }} />
            <Stack spacing={1}>
              <Button variant="contained" color="primary">
                角色资料库
              </Button>
              <Button variant="outlined" color="primary">
                神器资料库
              </Button>
              <Button variant="outlined" color="primary">
                公告归档
              </Button>
            </Stack>
          </Paper>

          <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
            <Typography variant="h2">热门角色</Typography>
            <Divider sx={{ my: 2 }} />
            <Stack spacing={1}>
              {['永恒·夏绿蒂', '流浪者·希格尔', '月光·优芬妮'].map((name) => (
                <Box
                  key={name}
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    p: 1.2,
                    borderRadius: 2,
                    background: '#fffdf8',
                    border: '1px solid #efe3d2',
                  }}
                >
                  <Typography sx={{ fontWeight: 600 }}>{name}</Typography>
                  <Typography variant="body2" color="text.secondary">
                    查看
                  </Typography>
                </Box>
              ))}
            </Stack>
          </Paper>

          <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
            <Typography variant="h2">神器推荐</Typography>
            <Divider sx={{ my: 2 }} />
            <Stack spacing={1}>
              {['黎明之剑', '王座之冠', '圣域之铃'].map((name) => (
                <Box
                  key={name}
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    p: 1.2,
                    borderRadius: 2,
                    background: '#fffdf8',
                    border: '1px solid #efe3d2',
                  }}
                >
                  <Typography sx={{ fontWeight: 600 }}>{name}</Typography>
                  <Typography variant="body2" color="text.secondary">
                    查看
                  </Typography>
                </Box>
              ))}
            </Stack>
          </Paper>
        </Stack>
      </Box>
    </Stack>
  )
}
