<script>
  // /study — 학습 hub.
  // 자료 학습 (자료실 자료 + 회독 추적) / 필사 세션 (Apple Pencil) / Phase 2~ 퀴즈/SRS.
  // 학습 워크스페이스(주제) — 필기·자료를 묶어 보는 1차 컨테이너.
  import { BookOpen, PenLine, GraduationCap, FolderKanban } from 'lucide-svelte';
</script>

<div class="p-4 md:p-6 max-w-5xl mx-auto">
  <header class="mb-6">
    <h1 class="text-xl font-semibold text-text flex items-center gap-2">
      <GraduationCap size={22} /> 공부
    </h1>
    <p class="text-sm text-dim mt-1">학습 자료 회독 / 손글씨 필사 세션 / (예정) 퀴즈·복습.</p>
  </header>

  <a
    href="/study/topics"
    class="block mb-3 p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
  >
    <div class="flex items-center gap-2 mb-2">
      <FolderKanban size={18} class="text-accent" />
      <h2 class="text-base font-semibold text-text">주제로 보기</h2>
    </div>
    <p class="text-xs text-dim">"가스기사" 같은 학습 주제 아래에 필기 세션과 자료를 함께 묶어 본다. 한 주제 안에서 필기·자료를 한눈에.</p>
  </a>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    <a
      href="/study/sources"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <BookOpen size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">자료 학습</h2>
      </div>
      <p class="text-xs text-dim">자료실에 올린 학습 자료를 카테고리별로 읽고 회독 카운트를 누적합니다. "안 본 자료만" 필터로 진도 관리.</p>
    </a>

    <a
      href="/study/write"
      class="block p-5 rounded-lg border border-default bg-surface hover:border-accent hover:bg-accent/5 transition-colors"
    >
      <div class="flex items-center gap-2 mb-2">
        <PenLine size={18} class="text-accent" />
        <h2 class="text-base font-semibold text-text">손글씨 필사 세션</h2>
      </div>
      <p class="text-xs text-dim">iPad + Apple Pencil 로 자격증 교재 / 어학 한자·단어를 손으로 필사. 세션 단위 stroke 보존.</p>
    </a>
  </div>

  <div class="mt-6 p-4 rounded-lg border border-dashed border-default/60 text-xs text-dim">
    <div class="font-medium text-dim mb-1">예정 (Phase 2~)</div>
    <ul class="list-disc list-inside space-y-0.5">
      <li>모바일 암기노트 / 카드 복습</li>
      <li>AI 자료 기반 퀴즈 출제 + 정답률 분야별 통계</li>
      <li>SRS (1·3·7·14일 복습 일정)</li>
    </ul>
  </div>
</div>
