<?php
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/auth.php';
require_once __DIR__ . '/includes/layout.php';

renderHeader('도움말', 'help');

$guideItems = [
    [
        'icon' => 'fa-solid fa-play',
        'title' => '음악 재생',
        'body' => '곡 목록에서 재생 버튼을 누르면 하단 플레이어에서 바로 재생됩니다. 전체화면 플레이어에서는 대기열과 가사를 함께 확인할 수 있습니다.',
        'href' => 'index.php?view=all',
        'action' => '전체 음악 보기',
    ],
    [
        'icon' => 'fa-solid fa-magnifying-glass',
        'title' => '검색과 필터',
        'body' => '곡명, 아티스트, 앨범, 가사를 검색하고 장르, 연도, 태그 같은 필터로 빠르게 좁힐 수 있습니다.',
        'href' => 'search.php',
        'action' => '검색 열기',
    ],
    [
        'icon' => 'fa-solid fa-list',
        'title' => '플레이리스트',
        'body' => '좋아하는 곡을 플레이리스트에 추가하거나 자동 플레이리스트로 분위기에 맞는 목록을 만들 수 있습니다.',
        'href' => 'playlists.php',
        'action' => '플레이리스트 보기',
    ],
    [
        'icon' => 'fa-solid fa-music',
        'title' => '가사',
        'body' => '곡 상세 화면이나 전체화면 플레이어에서 가사를 볼 수 있습니다. 가사가 없다면 가사 등록/수정 화면에서 직접 추가할 수 있습니다.',
        'href' => 'search.php?q=',
        'action' => '곡 검색하기',
    ],
    [
        'icon' => 'fa-solid fa-heart',
        'title' => '좋아요와 최근 재생',
        'body' => '좋아요로 자주 듣는 곡을 모으고, 최근 재생 목록에서 이어듣기를 빠르게 시작할 수 있습니다.',
        'href' => 'recent.php',
        'action' => '최근 재생 보기',
    ],
    [
        'icon' => 'fa-solid fa-sliders',
        'title' => '사용자 설정',
        'body' => '테마, 플레이어 표시 방식, 알림, PWA 안내, 목록 밀도 같은 개인 설정을 조정할 수 있습니다.',
        'href' => 'user_settings.php',
        'action' => '설정 열기',
    ],
    [
        'icon' => 'fa-solid fa-comment-dots',
        'title' => '피드백 / 오류 신고',
        'body' => '화면이 깨지거나 재생 문제가 있으면 피드백 버튼으로 현재 페이지 정보와 함께 신고할 수 있습니다. 실제 파일 경로는 수집하지 않습니다.',
        'href' => '#',
        'action' => '피드백 열기',
        'attrs' => 'data-feedback-open',
    ],
    [
        'icon' => 'fa-solid fa-signal',
        'title' => '서비스 상태',
        'body' => '재생, 스캔, 백업, PWA 상태와 최근 오류 요약을 확인할 수 있습니다.',
        'href' => 'status.php',
        'action' => '상태 확인',
    ],
    [
        'icon' => 'fa-solid fa-scale-balanced',
        'title' => '서비스 정책 안내',
        'body' => '이용 안내, 개인정보 안내, 저작권 안내와 비로그인 미리듣기, 가사 등록 기준을 확인할 수 있습니다.',
        'href' => 'policies.php',
        'action' => '정책 보기',
    ],
    [
        'icon' => 'fa-solid fa-mobile-screen-button',
        'title' => 'PWA 설치',
        'body' => '모바일이나 태블릿에서는 홈 화면에 추가해 앱처럼 사용할 수 있습니다. 설치 안내는 설정에서 다시 볼 수 있습니다.',
        'href' => 'user_settings.php',
        'action' => '설정에서 보기',
    ],
    [
        'icon' => 'fa-solid fa-clock',
        'title' => '비로그인 미리듣기',
        'body' => '비로그인 상태에서는 서버 정책에 따라 미리듣기 시간이 제한될 수 있습니다. 전체 감상은 로그인 후 이용하세요.',
        'href' => 'login.php',
        'action' => '로그인',
    ],
];
?>
<div class="help-page">
    <section class="help-hero">
        <div>
            <span class="help-kicker"><i class="fa-solid fa-circle-question"></i> 사용 가이드</span>
            <h1 class="page-main-title">처음 사용하는 분들을 위한 도움말</h1>
            <p class="page-subtitle">음악 재생, 검색, 플레이리스트, 가사, 설정, 피드백 같은 주요 기능을 짧게 정리했습니다.</p>
        </div>
        <div class="help-hero-actions">
            <button type="button" class="btn btn-primary" data-onboarding-open><i class="fa-solid fa-route"></i> 온보딩 다시 보기</button>
            <a class="btn btn-secondary" href="user_settings.php"><i class="fa-solid fa-sliders"></i> 설정 센터</a>
        </div>
    </section>

    <section class="help-guide-grid" aria-label="주요 기능 도움말">
        <?php foreach ($guideItems as $item): ?>
            <article class="help-guide-card">
                <div class="help-guide-icon"><i class="<?php echo h($item['icon']); ?>"></i></div>
                <div class="help-guide-body">
                    <h2><?php echo h($item['title']); ?></h2>
                    <p><?php echo h($item['body']); ?></p>
                    <a class="btn btn-secondary btn-sm" href="<?php echo h($item['href']); ?>" <?php echo $item['attrs'] ?? ''; ?>><?php echo h($item['action']); ?></a>
                </div>
            </article>
        <?php endforeach; ?>
    </section>
</div>
<?php renderFooter(); ?>
