import { Box, Container, Typography, Divider, List, ListItem, ListItemText } from '@mui/material';

const GuidePage = () => {
    return (
        <Container maxWidth="md" sx={{ py: 4 }}>
            <Typography variant="h4" gutterBottom>숙제노기 사용법 안내 (v1.0)</Typography>
            <Typography variant="subtitle1" gutterBottom>
                숙제노기는 마비노기 모바일의 숙제 관리를 도와주는 웹서비스입니다.
            </Typography>

            <Divider sx={{ my: 3 }} />

            <Typography variant="h6">1. 캐릭터 등록</Typography>
            <List dense>
                <ListItem><ListItemText primary="상단 메뉴에서 '캐릭터 등록' 클릭" /></ListItem>
                <ListItem><ListItemText primary="서버, 캐릭터명, 전투력을 입력하고 저장" /></ListItem>
            </List>

            <Typography variant="h6" sx={{ mt: 3 }}>2. 숙제 등록</Typography>
            <List dense>
                <ListItem><ListItemText primary="숙제 제목, 설명, 반복주기(daily/weekly 등) 설정" /></ListItem>
                <ListItem><ListItemText primary="clear_count로 수행 횟수 설정" /></ListItem>
                <ListItem><ListItemText primary="reset_time에 초기화 시간 입력 (예: 06:00)" /></ListItem>
            </List>

            <Typography variant="h6" sx={{ mt: 3 }}>3. 숙제 지정</Typography>
            <List dense>
                <ListItem><ListItemText primary="각 캐릭터에 숙제를 연결해줄 수 있음" /></ListItem>
                <ListItem><ListItemText primary="연결된 숙제는 대시보드에 표시됨" /></ListItem>
            </List>

            <Typography variant="h6" sx={{ mt: 3 }}>4. 대시보드</Typography>
            <List dense>
                <ListItem><ListItemText primary="서버:캐릭터명 형태로 정렬됨" /></ListItem>
                <ListItem><ListItemText primary="숙제는 체크박스로 표시되고 완료 시 체크" /></ListItem>
                <ListItem><ListItemText primary="clear_count 만큼 체크하면 완료 처리됨" /></ListItem>
            </List>

            <Typography variant="h6" sx={{ mt: 3 }}>5. 숙제 초기화</Typography>
            <List dense>
                <ListItem><ListItemText primary="숙제는 매일/매주 지정된 시간에 자동 초기화됨" /></ListItem>
                <ListItem><ListItemText primary="사용자는 별도 조작 없이 다음 날 다시 체크 가능" /></ListItem>
            </List>

            <Divider sx={{ my: 3 }} />

            <Typography variant="caption" color="text.secondary">
                © 숙제노기. 본 가이드는 v1.0 기준으로 작성되었습니다.
            </Typography>
        </Container>
    );
};

export default GuidePage;