import { TrkSectionHeader, Trk } from '../lib/Trk';

export function IntroSection() {
  return (
    <>
      <TrkSectionHeader
        id="TRK-SEC-intro"
        title="KCG Design System"
        description="kcg-ai-monitoring 프론트엔드의 시각 언어 · 컴포넌트 · 레이아웃 규칙 단일 참조 페이지"
      />

      <Trk id="TRK-INTRO-overview" className="ds-sample">
        <h3 className="text-sm font-semibold text-heading mb-2">이 페이지의 목적</h3>
        <ul className="text-xs text-label space-y-1.5 list-disc list-inside leading-relaxed">
          <li>
            <strong className="text-heading">모든 스타일의 뼈대</strong> — 페이지 파일은 이 쇼케이스에 정의된 컴포넌트와 토큰만
            사용한다. 임의의 `className="bg-red-600"` 같은 직접 스타일은 금지.
          </li>
          <li>
            <strong className="text-heading">미세조정의 단일 지점</strong> — 색상 · 여백 · 텍스트 크기 등 모든 변경은 이 페이지에서
            먼저 시각적으로 검증한 후 실제 페이지에 적용한다.
          </li>
          <li>
            <strong className="text-heading">ID 기반 참조</strong> — 각 쇼케이스 항목에 <code>TRK-*</code> 추적 ID가 부여되어 있어,
            특정 변형을 정확히 가리키며 논의 · 수정이 가능하다.
          </li>
        </ul>
      </Trk>

      <Trk id="TRK-INTRO-howto" className="ds-sample mt-3">
        <h3 className="text-sm font-semibold text-heading mb-2">사용 방법</h3>
        <ol className="text-xs text-label space-y-1.5 list-decimal list-inside leading-relaxed">
          <li>
            상단 <strong className="text-heading">"ID 복사 모드"</strong> 체크박스를 켜면 쇼케이스 항목 클릭 시 ID가 클립보드에
            복사된다.
          </li>
          <li>
            URL 해시 <code className="font-mono text-blue-400">#trk=TRK-BADGE-critical-sm</code> 으로 특정 항목 딥링크 — 스크롤
            + 하이라이트.
          </li>
          <li>
            상단 <strong className="text-heading">Dark / Light</strong> 토글로 두 테마에서 동시에 검증.
          </li>
          <li>
            좌측 네비게이션으로 섹션 이동. 각 섹션 제목 옆에 섹션의 <code>TRK-SEC-*</code> ID가 노출된다.
          </li>
        </ol>
      </Trk>

      <Trk id="TRK-INTRO-naming" className="ds-sample mt-3">
        <h3 className="text-sm font-semibold text-heading mb-2">추적 ID 명명 규칙</h3>
        <code className="ds-code">
          {`TRK-<카테고리>-<슬러그>[-<변형>]

예시:
  TRK-TOKEN-text-heading        → 시맨틱 토큰 --text-heading
  TRK-BADGE-critical-sm         → Badge intent=critical size=sm
  TRK-BUTTON-primary-md         → Button variant=primary size=md
  TRK-LAYOUT-page-container     → PageContainer 루트
  TRK-CAT-alert-level-HIGH      → alertLevels 카탈로그의 HIGH 배지
  TRK-SEC-badge                 → Badge 섹션 자체

카테고리: SEC, INTRO, TOKEN, TYPO, BADGE, BUTTON, FORM, CARD, LAYOUT, CAT, GUIDE`}
        </code>
      </Trk>
    </>
  );
}