/* =============================================================
   三藏閣 — 작업 기록 (Release Notes)
   -------------------------------------------------------------
   방문자가 읽을 수 있도록 정리한 공개 변화 기록.
   ============================================================= */

window.RELEASES = [
  {
    version: 'v0.6.6',
    date: '2026.06.01',
    title: '원전 표기와 수행 백과 구조 정리',
    type: 'Design',
    summary: '홈 화면의 원전 표기를 한국어 사용자가 이해하기 쉬운 말로 바로잡고, 수행 백과를 대주제·중주제·소주제로 찾아볼 수 있게 정리했다.',
    changes: [
      '홈 화면에서 빨리 불전 표기를 빨리대장경으로 통일',
      '티벳대장경 설명에 깐규르, 뗀규르와 함께 솜붐 자료를 포함',
      '외부 원문 목록이 아직 연결되지 않았을 때 빈 개발용 패널이 보이지 않도록 정리',
      '수행 백과에 항목 태그와 대주제·중주제·소주제형 목차를 추가',
      '공개된 수행 항목과 준비 중인 항목이 구분되어 보이도록 수정',
    ],
  },
  {
    version: 'v0.6.5',
    date: '2026.06.01',
    title: '한국어 우선 화면 문구 정리',
    type: 'Design',
    summary: '메뉴와 안내 문구에서 장식적으로 쓰이던 한자를 줄이고, 한국어 사용자가 먼저 읽기 쉬운 방향으로 화면 문구를 정리했다.',
    changes: [
      '더보기 메뉴에서 큰 한자 라벨 제거',
      '상단 브랜드와 푸터 표기를 한국어 중심으로 변경',
      '안내, 백과, 사전, 연구, 색인, 명상 화면의 섹션 라벨을 한국어 우선으로 수정',
      '원전 제목과 실제 용어처럼 의미가 필요한 한자는 콘텐츠 영역에만 제한적으로 유지',
    ],
  },
  {
    version: 'v0.6.4',
    date: '2026.06.01',
    title: '기여 형식과 연락처 추가',
    type: 'Documentation',
    summary: '방문자가 오류 제안, 참고자료 추천, 항목 제안, 원어 검토를 어떻게 보내면 되는지 안내 페이지에 구체적인 형식으로 추가했다.',
    changes: [
      '오류와 자료 제안을 보낼 수 있는 이메일 연락처 추가',
      '오류·오탈자 제보 형식 추가',
      '참고자료 추천과 백과 항목 제안 형식 추가',
      '원어와 번역 검토를 보낼 때 필요한 정보 정리',
    ],
  },
  {
    version: 'v0.6.3',
    date: '2026.06.01',
    title: '라이선스와 참고자료 안내 보강',
    type: 'Documentation',
    summary: '안내 페이지에서 공개 백과 콘텐츠의 라이선스, 외부 자료의 저작권 원칙, 참고하는 원전과 사전 자료를 더 자세히 설명했다.',
    changes: [
      '참여 영역의 외부 링크를 공개 백과 저장소 하나로 정리',
      '새로 작성한 백과 콘텐츠, 코드, 메타데이터, 외부 자료의 라이선스 기준을 구분해 설명',
      '저작권이 있는 원문, OCR, 장문 발췌, 출판사 이미지를 공개하지 않는 원칙 명시',
      '한역대장경, 빨리대장경, 티벳대장경과 솜붐, 사전과 현대 연구서의 참고 방식 보강',
    ],
  },
  {
    version: 'v0.6.2',
    date: '2026.06.01',
    title: '공개 전환과 안내 문서 정리',
    type: 'Public',
    summary: '오픈소스 지원과 공개 검토를 위해 사이트 접근 제한을 해제하고, 안내와 작업 기록을 방문자가 이해하기 쉬운 말로 다시 정리했다.',
    changes: [
      '홈페이지 전체를 비밀번호 없이 열람할 수 있도록 전환',
      '안내 페이지를 사이트 소개, 만든 이유, 공개 자료, 편집 원칙의 흐름으로 재구성',
      '개발 기록에서 내부 파일명과 작업자용 표현을 걷어내고 공개 기록에 맞는 문장으로 정리',
      '비공개 검수 단계의 흔적은 역사로 남기되, 현재 공개 상태가 분명히 보이도록 수정',
    ],
  },
  {
    version: 'v0.6.1',
    date: '2026.06.01',
    title: '백과 화면의 큰 갈래 정리',
    type: 'Design',
    summary: '백과 탭을 불교 개념 사전과 수행 백과의 두 갈래로 나누어, 화면의 목표와 실제 내용이 맞도록 정리했다.',
    changes: [
      '상단에 불교 개념 사전과 수행 백과를 나누는 1차 탭 추가',
      '불교 개념 사전은 기존 불교 사전처럼 개념, 인물, 문헌, 종파, 역사 항목을 찾는 구조로 유지',
      '수행 백과는 기초 수행어, 집중과 통찰, 함께 읽을 개념 묶음으로 재배치',
      '백과 화면에서 편집 배경 설명처럼 보이던 문구를 제거',
    ],
  },
  {
    version: 'v0.6.0',
    date: '2026.06.01',
    title: '한국어 수행 백과 준비',
    type: 'Encyclopedia',
    summary: 'Dhamma Reader 안에 수행 백과를 올릴 수 있도록 첫 항목군과 연구 기록의 자리를 만들었다.',
    changes: [
      '수행, 사띠, 사마타, 위빠사나, 삼매 항목을 백과 데이터에 추가',
      '사전 표제어와 개념 지도에서 수행 핵심어를 함께 찾아갈 수 있게 연결',
      '연구 탭에 한국어 수행 백과 구축 시리즈 추가',
      '안내 페이지에 프로젝트의 이유와 공개 협업 방향을 보강',
    ],
  },
  {
    version: 'v0.5.1',
    date: '2026.05.28',
    title: '프로젝트 출발점 정리',
    type: 'Documentation',
    summary: '웹사이트가 처음 배포된 날짜와 번역·온톨로지 작업이 실제로 시작된 날짜를 구분해 기록했다.',
    changes: [
      '웹사이트 공개 준비는 2026년 5월에 시작되었지만, 번역과 지식 구조 작업은 2026년 4월부터 진행되었음을 정리',
      '초기 번역 자동화 기록, 검수 메모, 온톨로지 설계 흔적을 공개 설명에 맞게 요약',
      '방문자가 프로젝트의 시간 흐름을 이해할 수 있도록 시작 지점을 별도로 표시',
    ],
  },
  {
    version: 'v0.5.0',
    date: '2026.05.28',
    title: '작업 기록 페이지 추가',
    type: 'Documentation',
    summary: '변경 사항을 개발자만 보는 로그가 아니라 방문자도 읽을 수 있는 기록으로 정리하기 시작했다.',
    changes: [
      '더보기 메뉴에 작업 기록 페이지 추가',
      '초기 화면, 공개 준비, 접근 제한, 백과 정리 같은 주요 변화를 버전 단위로 정리',
      'GitHub의 원본 기록과 홈페이지의 읽기 쉬운 기록을 분리',
    ],
  },
  {
    version: 'v0.4.1',
    date: '2026.05.28',
    title: '비공개 검수 단계 운영',
    type: 'Operations',
    summary: '공개 전 검수 기간 동안 제한된 사람만 사이트를 확인할 수 있도록 접근 코드를 운영했다.',
    changes: [
      '검수용 접속 방식을 갱신하고 접속 흐름을 확인',
      '공개 전 단계에 맞춰 검색 노출을 제한',
      '정식 공개 전까지 내용과 화면을 조용히 점검할 수 있는 상태로 운영',
    ],
  },
  {
    version: 'v0.4.0',
    date: '2026.05.28',
    title: '비공개 열람 모드',
    type: 'Operations',
    summary: '초기 검수와 내용 점검을 위해 사이트를 잠시 비공개 검수 모드로 운영했다.',
    changes: [
      '홈페이지 진입 전에 검수용 확인 화면 추가',
      '코드는 저장소에 넣지 않고 배포 환경에서만 관리',
      '비공개 운영 중에는 검색 엔진에 노출되지 않도록 설정',
    ],
  },
  {
    version: 'v0.3.0',
    date: '2026.05.28',
    title: '학술 열람실 디자인 개편',
    type: 'Design',
    summary: '단순한 홈페이지가 아니라 경전과 지식을 오래 읽는 열람실처럼 보이도록 화면 구조와 분위기를 다시 잡았다.',
    changes: [
      '삼장각 정체성과 서지적인 화면 톤 적용',
      '신수대장경, 빨리대장경, 티벳대장경 진입 구조 정리',
      '백과, 사전, 연구 노트, 명상 화면을 주요 흐름으로 연결',
      '모바일 하단 탭과 반응형 레이아웃 정리',
    ],
  },
  {
    version: 'v0.2.0',
    date: '2026.05.25',
    title: '대용량 원문을 따로 불러오는 구조',
    type: 'Data',
    summary: '사이트 첫 화면은 가볍게 유지하고, 대장경 원문처럼 큰 자료는 필요할 때 따로 불러오는 구조를 만들었다.',
    changes: [
      '대장경 본문을 작은 단위로 나누어 불러오는 방식 준비',
      '본문 목록과 개별 본문을 분리해 확장 가능한 자료 구조 마련',
      '앞으로 더 많은 원문 자료를 연결할 수 있는 기반 정리',
    ],
  },
  {
    version: 'v0.1.0',
    date: '2026.05.25',
    title: '도메인과 첫 배포',
    type: 'Deployment',
    summary: 'Dhamma Reader를 dhammareader.com에서 접속할 수 있도록 GitHub, Vercel, 도메인을 연결했다.',
    changes: [
      'GitHub 저장소와 배포 프로젝트 연결',
      'dhammareader.com과 www.dhammareader.com 도메인 연결',
      'HTTPS 접속과 기본 리다이렉트 확인',
    ],
  },
  {
    version: 'v0.0.1',
    date: '2026.05.25',
    title: '첫 정적 프로토타입',
    type: 'Prototype',
    summary: '경전 읽기 화면과 지식 화면의 기본 골격을 만든 첫 공개용 웹사이트 초안이다.',
    changes: [
      '첫 화면, 읽기 화면, 백과와 사전의 기본 구조 추가',
      '정적 배포가 가능한 기본 파일 구성',
      '향후 원문과 백과 데이터를 붙일 수 있는 자리 마련',
    ],
  },
  {
    version: 'foundation',
    date: '2026.04.09',
    title: '번역과 온톨로지 작업의 출발',
    type: 'Foundation',
    summary: 'Dhamma Reader 웹사이트 이전부터 대장경 번역과 불교 지식 구조화 작업은 별도로 진행되고 있었다.',
    changes: [
      '대장경 번역을 위한 초기 작업 흐름 정리',
      '용어, 문헌, 관계를 연결하기 위한 온톨로지 설계 시작',
      '이후 웹사이트의 백과, 사전, 연구 기록으로 이어질 지식 기반 형성',
    ],
  },
];

window.ReleaseNotes = ({ onRoute }) => {
  const releases = window.RELEASES || [];
  const latest = releases[0];
  const origin = releases[releases.length - 1];

  return (
    <div className="releases" data-screen-label="작업 기록">
      <header className="releases__hero">
        <div className="releases__hero-inner">
          <div className="releases__eyebrow">작업 기록 · RELEASE NOTES</div>
          <h1 className="releases__title">작업 기록</h1>
          <p className="releases__sub">
            이 페이지는 삼장각이 어떤 순서로 만들어지고 있는지 남기는 공개 기록입니다.
            내부 개발 로그를 그대로 보여주기보다, 방문자가 이해할 수 있는 말로 중요한 변화만 정리합니다.
          </p>
          <div className="releases__meta">
            <div>
              <span>최신</span>
              <b>{latest.version}</b>
            </div>
            <div>
              <span>기록</span>
              <b>{releases.length}</b>
            </div>
            <div>
              <span>최근 정리</span>
              <b>{latest.date}</b>
            </div>
            <div>
              <span>기반 작업</span>
              <b>{origin.date}</b>
            </div>
          </div>
        </div>
      </header>

      <main className="releases__inner">
        <section className="releases__note">
          <div>
            <span>공개 기록</span>
            <strong>방문자를 위한 변화 요약</strong>
          </div>
          <p>
            이곳에는 사이트를 읽는 사람이 알아야 할 흐름, 공개 상태의 변화, 백과와 번역 작업의 방향을 중심으로 정리합니다.
            내부 작업 내역을 그대로 옮기기보다 공개 페이지에 필요한 맥락만 남깁니다.
          </p>
        </section>

        <section className="releases__timeline" aria-label="작업 기록 타임라인">
          {releases.map((release, index) => (
            <article key={release.version} className="release-card">
              <div className="release-card__rail">
                <span className="release-card__dot"/>
                {index < releases.length - 1 && <span className="release-card__line"/>}
              </div>
              <div className="release-card__body">
                <div className="release-card__top">
                  <div>
                    <div className="release-card__version">{release.version}</div>
                    <h2>{release.title}</h2>
                  </div>
                  <div className="release-card__side">
                    <span>{release.type}</span>
                    <time>{release.date}</time>
                  </div>
                </div>
                <p className="release-card__summary">{release.summary}</p>
                <ul className="release-card__changes">
                  {release.changes.map((change) => (
                    <li key={change}>{change}</li>
                  ))}
                </ul>
              </div>
            </article>
          ))}
        </section>
      </main>
    </div>
  );
};