// TypographyContent.tsx — WING-OPS Typography 콘텐츠 (다크/라이트 테마 지원)

import type { DesignTheme } from './designTheme';

// ---------- 데이터 타입 ----------

// interface FontFamily {
//   name: string;
//   className: string;
//   stack: string;
//   usage: string;
//   sampleText: string;
// }

interface TypeScaleItem {
  token: string;
  cssVar: string;
  tailwind: string;
  size: string;
  px: string;
  weight: number;
  lineHeight: number;
  letterSpacing: string;
  role: string;
  sample: string;
}

interface TypeCategory {
  name: string;
  description: string;
  items: TypeScaleItem[];
}

// ---------- Font Family 데이터 ----------

// const FONT_FAMILIES: FontFamily[] = [
//   {
//     name: 'PretendardGOV',
//     className: 'font-sans / font-korean / font-mono',
//     stack: "'PretendardGOV', sans-serif",
//     usage: '프로젝트 전체 통합 폰트. 한국어/영문 UI 텍스트, 수치 데이터, 좌표 표시 등 모든 콘텐츠에 사용됩니다.',
//     sampleText: '해양 방제 운영 지원 시스템 WING-OPS 35.1284° N',
//   },
// ];

// ---------- Typography Categories ----------

const TYPE_CATEGORIES: TypeCategory[] = [
  {
    name: 'Display',
    description:
      '화면에서 가장 큰 텍스트. 배너, 마케팅, 랜딩 영역에 사용됩니다. 자유롭게 변형 가능하나 과도한 크기는 지양합니다.',
    items: [
      {
        token: 'Display 1',
        cssVar: '--font-size-display-1',
        tailwind: 'text-display-1',
        size: '3.75rem',
        px: '60px',
        weight: 700,
        lineHeight: 1.3,
        letterSpacing: '0.06em',
        role: '최상위 헤드라인',
        sample: '해양 방제 운영 지원',
      },
      {
        token: 'Display 2',
        cssVar: '--font-size-display-2',
        tailwind: 'text-display-2',
        size: '2.5rem',
        px: '40px',
        weight: 700,
        lineHeight: 1.3,
        letterSpacing: '0.06em',
        role: '메인 타이틀',
        sample: '확산 예측 시뮬레이션',
      },
      {
        token: 'Display 3',
        cssVar: '--font-size-display-3',
        tailwind: 'text-display-3',
        size: '2.25rem',
        px: '36px',
        weight: 500,
        lineHeight: 1.4,
        letterSpacing: '0.06em',
        role: '강조형 헤드라인',
        sample: '오염 종합 상황판',
      },
    ],
  },
  {
    name: 'Heading',
    description:
      '페이지 수준의 제목과 모듈 수준의 역할 강조에 사용합니다. 시각적 계층 구조를 수립합니다.',
    items: [
      {
        token: 'Heading 1',
        cssVar: '--font-size-heading-1',
        tailwind: 'text-heading-1',
        size: '2rem',
        px: '32px',
        weight: 700,
        lineHeight: 1.4,
        letterSpacing: '0.02em',
        role: '페이지 상위 제목',
        sample: '사고 현황 분석',
      },
      {
        token: 'Heading 2',
        cssVar: '--font-size-heading-2',
        tailwind: 'text-heading-2',
        size: '1.5rem',
        px: '24px',
        weight: 700,
        lineHeight: 1.4,
        letterSpacing: '0.02em',
        role: '하위 제목',
        sample: '유출유 풍화 상태',
      },
      {
        token: 'Heading 3',
        cssVar: '--font-size-heading-3',
        tailwind: 'text-heading-3',
        size: '1.375rem',
        px: '22px',
        weight: 500,
        lineHeight: 1.4,
        letterSpacing: '0.02em',
        role: '소제목, 그룹 제목',
        sample: '기상 데이터 요약',
      },
    ],
  },
  {
    name: 'Body',
    description: '제목과 특수 역할을 제외한 본문/콘텐츠 텍스트에 적용됩니다.',
    items: [
      {
        token: 'Body 1',
        cssVar: '--font-size-body-1',
        tailwind: 'text-body-1',
        size: '0.875rem',
        px: '14px',
        weight: 400,
        lineHeight: 1.6,
        letterSpacing: '0em',
        role: '기본 본문',
        sample: '예측 결과는 기상 조건에 따라 달라질 수 있습니다.',
      },
      {
        token: 'Body 2',
        cssVar: '--font-size-body-2',
        tailwind: 'text-body-2',
        size: '0.8125rem',
        px: '13px',
        weight: 400,
        lineHeight: 1.6,
        letterSpacing: '0em',
        role: '보조 본문',
        sample: '최근 업데이트: 2026-03-24 09:00 KST',
      },
      {
        token: 'Caption',
        cssVar: '--font-size-caption',
        tailwind: 'text-caption',
        size: '0.6875rem',
        px: '11px',
        weight: 400,
        lineHeight: 1.5,
        letterSpacing: '0em',
        role: '캡션, 메타 정보',
        sample: 'v2.1 | 해양환경공단',
      },
    ],
  },
  {
    name: 'Navigation',
    description:
      '사이트 내 길잡이 역할을 하는 컴포넌트(패널 제목, 사이드바 헤더, 탭 레이블 등)에 사용되는 특수 역할 토큰입니다.',
    items: [
      {
        token: 'Title 1',
        cssVar: '--font-size-title-1',
        tailwind: 'text-title-1',
        size: '1.125rem',
        px: '18px',
        weight: 700,
        lineHeight: 1.5,
        letterSpacing: '0.02em',
        role: '컴포넌트 제목',
        sample: '확산 예측 시뮬레이션',
      },
      {
        token: 'Title 2',
        cssVar: '--font-size-title-2',
        tailwind: 'text-title-2',
        size: '1rem',
        px: '16px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.02em',
        role: '패널 제목',
        sample: '기본 정보 입력',
      },
      {
        token: 'Title 3',
        cssVar: '--font-size-title-3',
        tailwind: 'text-title-3',
        size: '0.875rem',
        px: '14px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.02em',
        role: '서브 네비게이션',
        sample: '예측 결과 보기',
      },
      {
        token: 'Title 4',
        cssVar: '--font-size-title-4',
        tailwind: 'text-title-4',
        size: '0.8125rem',
        px: '13px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.02em',
        role: '탭 버튼',
        sample: '확산 예측',
      },
      {
        token: 'Title 5',
        cssVar: '--font-size-title-5',
        tailwind: 'text-title-5',
        size: '0.75rem',
        px: '12px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.02em',
        role: '메뉴 항목',
        sample: '거리 재기',
      },
      {
        token: 'Title 6',
        cssVar: '--font-size-title-6',
        tailwind: 'text-title-6',
        size: '0.6875rem',
        px: '11px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.02em',
        role: '소형 네비게이션',
        sample: '유출량 (kL)',
      },
    ],
  },
  {
    name: 'Label',
    description: '컴포넌트의 레이블, 플레이스홀더, 버튼 텍스트 등에 사용되는 특수 역할 토큰입니다.',
    items: [
      {
        token: 'Label 1',
        cssVar: '--font-size-label-1',
        tailwind: 'text-label-1',
        size: '0.75rem',
        px: '12px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.04em',
        role: '레이블, 버튼',
        sample: '시뮬레이션 실행',
      },
      {
        token: 'Label 2',
        cssVar: '--font-size-label-2',
        tailwind: 'text-label-2',
        size: '0.6875rem',
        px: '11px',
        weight: 500,
        lineHeight: 1.5,
        letterSpacing: '0.04em',
        role: '소형 레이블, 데이터',
        sample: '유출량 (kL)',
      },
    ],
  },
];

// ---------- Props ----------

interface TypographyContentProps {
  theme: DesignTheme;
}

// ---------- 컴포넌트 ----------

export const TypographyContent = ({ theme }: TypographyContentProps) => {
  const t = theme;
  const isDark = t.mode === 'dark';
  return (
    <div className="pt-24 px-8 pb-16 flex flex-col gap-16 items-start justify-start max-w-[1440px]">
      {/* ── 섹션 1: 헤더 + 개요 ── */}
      <div
        className="w-full border-b border-solid pb-8 flex flex-col gap-6"
        style={{ borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0' }}
      >
        <div className="flex flex-col gap-2">
          <h1 className="font-sans text-3xl leading-9 font-bold" style={{ color: t.textPrimary }}>
            Typography
          </h1>
          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
            WING-OPS 인터페이스에서 사용되는 타이포그래피 체계입니다. 폰트 패밀리, 크기, 두께를
            토큰과 컴포넌트 클래스로 정의하여 시각적 계층 구조와 일관성을 유지합니다.
          </p>
        </div>

        <div className="flex flex-col gap-2">
          <h3 className="font-korean text-body-2 font-bold" style={{ color: t.textPrimary }}>
            개요
          </h3>
          <ul
            className="flex flex-col gap-1 list-disc list-inside font-korean text-body-2"
            style={{ color: t.textSecondary }}
          >
            <li>
              Display, Heading, Body, Navigation, Label의 5가지 용도 카테고리로 타이포그래피를
              구성합니다.
            </li>
            <li>폰트 크기, 폰트 두께, 줄 높이, 자간을 각각 토큰으로 정의합니다.</li>
            <li>시스템 폰트를 기반으로 다양한 환경에서 일관된 사용자 경험을 보장합니다.</li>
          </ul>
        </div>
      </div>

      {/* ── 글꼴 (Font Family) ── */}
      <div className="w-full flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            글꼴
          </h2>
          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
            사용자의 디바이스 환경을 고려하여, 시스템 폰트와 웹 폰트를 조합하여 사용합니다. 한국어
            UI에 최적화된 폰트 스택으로 다양한 기기에서 일관된 가독성을 보장합니다.
          </p>
        </div>

        {/* body 기본 폰트 스택 코드 블록 */}
        <div
          className="rounded-lg border border-solid px-5 py-4 overflow-x-auto"
          style={{
            backgroundColor: isDark ? '#0f1524' : '#f1f5f9',
            borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0',
          }}
        >
          <pre
            className="font-mono text-body-2 leading-6"
            style={{ color: isDark ? '#c0c8dc' : '#475569' }}
          >
            <span style={{ color: t.textAccent }}>font-family</span>
            {`: 'PretendardGOV', -apple-system, BlinkMacSystemFont,\n             'Apple SD Gothic Neo', 'Pretendard Variable', Pretendard,\n             Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic',\n             'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n             sans-serif;`}
          </pre>
        </div>

        {/* 폰트 카드 */}
        {/* <div className="flex flex-col gap-6">
              {FONT_FAMILIES.map((font) => (
                <div
                  key={font.name}
                  className="rounded-lg border border-solid overflow-hidden"
                  style={{
                    backgroundColor: t.cardBg,
                    borderColor: t.cardBorder,
                    boxShadow: t.cardShadow,
                  }}
                >
                  <div
                    className="flex flex-row items-center gap-4 px-5 py-4 border-b border-solid"
                    style={{ borderColor: isDark ? 'rgba(66,71,84,0.15)' : '#e2e8f0' }}
                  >
                    <span className="font-sans text-lg font-bold" style={{ color: t.textPrimary }}>{font.name}</span>
                    <span
                      className="font-mono text-label-2 rounded border border-solid px-2 py-0.5"
                      style={{
                        color: t.textAccent,
                        backgroundColor: isDark ? 'rgba(6,182,212,0.05)' : 'rgba(6,182,212,0.08)',
                        borderColor: isDark ? 'rgba(6,182,212,0.20)' : 'rgba(6,182,212,0.25)',
                      }}
                    >
                      {font.className}
                    </span>
                  </div>
                  <div className="px-5 py-5 flex flex-col gap-4">
                    <div
                      className="font-mono text-caption leading-5 rounded px-3 py-2"
                      style={{
                        color: isDark ? '#9ba3b8' : '#64748b',
                        backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)',
                      }}
                    >
                      {font.stack}
                    </div>
                    <p className="font-korean text-caption leading-5" style={{ color: t.textSecondary }}>{font.usage}</p>
                    <div className="flex flex-col gap-3 pt-2">
                      <div className="flex flex-col gap-1">
                        <span className="font-mono text-caption uppercase" style={{ letterSpacing: '1px', color: t.textMuted }}>Regular</span>
                        <span className="text-xl leading-7" style={{ color: t.textPrimary, fontWeight: 400 }}>{font.sampleText}</span>
                      </div>
                      <div className="flex flex-col gap-1">
                        <span className="font-mono text-caption uppercase" style={{ letterSpacing: '1px', color: t.textMuted }}>Bold</span>
                        <span className="text-xl leading-7 font-bold" style={{ color: t.textPrimary }}>{font.sampleText}</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div> */}
      </div>

      {/* ── 카테고리별 타입 스케일 ── */}
      <div className="w-full flex flex-col gap-16">
        <div className="flex flex-col gap-2">
          <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
            타입 스케일
          </h2>
          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
            Display, Heading, Body, Navigation, Label의 5가지 용도 카테고리에 맞게 조합하여
            사용합니다.
          </p>
        </div>

        {TYPE_CATEGORIES.map((category) => (
          <div key={category.name} className="flex flex-col gap-6">
            {/* 카테고리 헤더 */}
            <div className="flex flex-col gap-1">
              <h3 className="font-sans text-lg font-bold" style={{ color: t.textPrimary }}>
                {category.name}
              </h3>
              <p className="font-korean text-caption leading-5" style={{ color: t.textSecondary }}>
                {category.description}
              </p>
            </div>

            {/* 토큰 테이블 */}
            <div
              className="rounded-lg overflow-hidden"
              style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
            >
              <div
                className="grid grid-cols-[1fr_80px_80px_80px_90px_140px] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                style={{
                  backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                  color: t.textMuted,
                }}
              >
                <span>Style</span>
                <span>Size</span>
                <span>Weight</span>
                <span>Line-H</span>
                <span>Spacing</span>
                <span>Tailwind</span>
              </div>
              {category.items.map((row) => (
                <div
                  key={row.token}
                  className="grid grid-cols-[1fr_80px_80px_80px_90px_140px] gap-2 items-center px-4 py-3"
                  style={{
                    borderTop: `1px solid ${isDark ? 'rgba(66,71,84,0.10)' : '#e5e7eb'}`,
                    backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                  }}
                >
                  <span
                    className="font-mono text-caption font-semibold"
                    style={{ color: t.textAccent }}
                  >
                    {row.token}
                  </span>
                  <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                    {row.px}
                  </span>
                  <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                    {row.weight}
                  </span>
                  <span
                    className="font-mono text-caption"
                    style={{ color: t.textMuted }}
                  >{`${(row.lineHeight * 100).toFixed(0)}%`}</span>
                  <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                    {row.letterSpacing}
                  </span>
                  <span
                    className="font-mono text-caption rounded border border-solid px-1.5 py-0.5 w-fit"
                    style={{
                      color: t.textAccent,
                      backgroundColor: isDark ? 'rgba(6,182,212,0.05)' : 'rgba(6,182,212,0.08)',
                      borderColor: isDark ? 'rgba(6,182,212,0.20)' : 'rgba(6,182,212,0.25)',
                    }}
                  >
                    {row.tailwind}
                  </span>
                </div>
              ))}
            </div>

            {/* 실물 프리뷰 */}
            <div className="flex flex-col gap-3">
              {category.items.map((row) => (
                <div
                  key={row.token}
                  className="rounded-lg px-5 py-4 flex items-center gap-6"
                  style={{
                    backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                    border: `1px solid ${isDark ? 'rgba(66,71,84,0.10)' : '#e5e7eb'}`,
                  }}
                >
                  <div className="shrink-0 w-[100px]">
                    <div
                      className="font-mono text-caption font-semibold"
                      style={{ color: t.textAccent }}
                    >
                      {row.token}
                    </div>
                    <div className="font-mono text-caption mt-0.5" style={{ color: t.textMuted }}>
                      {row.size} · {row.weight} · {row.lineHeight}
                    </div>
                  </div>
                  <div className="flex-1">
                    <span
                      className="font-korean"
                      style={{
                        fontSize: row.size,
                        fontWeight: row.weight,
                        lineHeight: row.lineHeight,
                        letterSpacing: row.letterSpacing,
                        color: t.textPrimary,
                      }}
                    >
                      {row.sample}
                    </span>
                  </div>
                  <div className="shrink-0 text-caption font-korean" style={{ color: t.textMuted }}>
                    {row.role}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* ── 기본 토큰 참조 ── */}
      <div className="w-full flex flex-col gap-12">
        {/* Font Weight */}
        <div className="flex flex-col gap-4">
          <div>
            <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
              폰트 두께 토큰
            </h2>
            <p className="text-body-2" style={{ color: t.textSecondary }}>
              기본 두께 Regular(400), 강조 Bold(700). Medium(500)은 레이블과 소제목, Thin(300)은
              장식적 대형 텍스트에 사용합니다.
            </p>
          </div>
          <div
            className="rounded-lg overflow-hidden"
            style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
          >
            <div
              className="grid grid-cols-[1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
              style={{
                backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                color: t.textMuted,
              }}
            >
              <span>Token</span>
              <span>Value</span>
              <span>Name</span>
              <span>Preview</span>
            </div>
            {[
              {
                token: '--font-weight-thin',
                value: '300',
                name: 'Thin',
                preview: '해양 방제 운영 WING-OPS',
              },
              {
                token: '--font-weight-regular',
                value: '400',
                name: 'Regular',
                preview: '해양 방제 운영 WING-OPS',
              },
              {
                token: '--font-weight-medium',
                value: '500',
                name: 'Medium',
                preview: '해양 방제 운영 WING-OPS',
              },
              {
                token: '--font-weight-bold',
                value: '700',
                name: 'Bold',
                preview: '해양 방제 운영 WING-OPS',
              },
            ].map((row) => (
              <div
                key={row.token}
                className="grid grid-cols-[1fr_80px_1fr_1fr] gap-2 items-center px-4 py-3"
                style={{
                  borderTop: `1px solid ${isDark ? 'rgba(66,71,84,0.10)' : '#e5e7eb'}`,
                  backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                }}
              >
                <span
                  className="font-mono text-caption font-semibold"
                  style={{ color: t.textAccent }}
                >
                  {row.token}
                </span>
                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                  {row.value}
                </span>
                <span className="text-caption" style={{ color: t.textSecondary }}>
                  {row.name}
                </span>
                <span
                  className="font-korean text-body-2"
                  style={{ color: t.textPrimary, fontWeight: Number(row.value) }}
                >
                  {row.preview}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Line Height */}
        <div className="flex flex-col gap-4">
          <div>
            <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
              줄 높이 토큰
            </h2>
            <p className="text-body-2" style={{ color: t.textSecondary }}>
              대형 텍스트는 타이트하게(1.3), 본문은 여유롭게(1.6). 가독성과 공간 효율의 균형을
              맞춥니다.
            </p>
          </div>
          <div
            className="rounded-lg overflow-hidden"
            style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
          >
            <div
              className="grid grid-cols-[1fr_80px_100px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
              style={{
                backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                color: t.textMuted,
              }}
            >
              <span>Token</span>
              <span>Value</span>
              <span>Percentage</span>
              <span>적용</span>
            </div>
            {[
              {
                token: '--line-height-tight',
                value: '1.3',
                pct: '130%',
                desc: 'Display (대형 텍스트)',
              },
              {
                token: '--line-height-snug',
                value: '1.4',
                pct: '140%',
                desc: 'Heading, Navigation',
              },
              { token: '--line-height-normal', value: '1.5', pct: '150%', desc: 'Label, Caption' },
              { token: '--line-height-relaxed', value: '1.6', pct: '160%', desc: 'Body (본문)' },
            ].map((row) => (
              <div
                key={row.token}
                className="grid grid-cols-[1fr_80px_100px_1fr] gap-2 items-center px-4 py-3"
                style={{
                  borderTop: `1px solid ${isDark ? 'rgba(66,71,84,0.10)' : '#e5e7eb'}`,
                  backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                }}
              >
                <span
                  className="font-mono text-caption font-semibold"
                  style={{ color: t.textAccent }}
                >
                  {row.token}
                </span>
                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                  {row.value}
                </span>
                <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                  {row.pct}
                </span>
                <span className="text-caption" style={{ color: t.textSecondary }}>
                  {row.desc}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Letter Spacing */}
        <div className="flex flex-col gap-4">
          <div>
            <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
              자간 토큰
            </h2>
            <p className="text-body-2" style={{ color: t.textSecondary }}>
              카테고리별로 자간을 정의합니다. Display는 넓게, Body는 기본값을 사용합니다.
            </p>
          </div>
          <div
            className="rounded-lg overflow-hidden"
            style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
          >
            <div
              className="grid grid-cols-[1fr_80px_140px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
              style={{
                backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                color: t.textMuted,
              }}
            >
              <span>Token</span>
              <span>Value</span>
              <span>Tailwind</span>
              <span>카테고리</span>
            </div>
            {[
              {
                token: '--letter-spacing-display',
                value: '0.06em',
                tw: 'tracking-display',
                category: 'Display',
              },
              {
                token: '--letter-spacing-heading',
                value: '0.02em',
                tw: 'tracking-heading',
                category: 'Heading',
              },
              {
                token: '--letter-spacing-body',
                value: '0em',
                tw: 'tracking-body',
                category: 'Body',
              },
              {
                token: '--letter-spacing-navigation',
                value: '0.02em',
                tw: 'tracking-navigation',
                category: 'Navigation',
              },
              {
                token: '--letter-spacing-label',
                value: '0.04em',
                tw: 'tracking-label',
                category: 'Label',
              },
            ].map((row) => (
              <div
                key={row.token}
                className="grid grid-cols-[1fr_80px_140px_1fr] gap-2 items-center px-4 py-3"
                style={{
                  borderTop: `1px solid ${isDark ? 'rgba(66,71,84,0.10)' : '#e5e7eb'}`,
                  backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                }}
              >
                <span
                  className="font-mono text-caption font-semibold"
                  style={{ color: t.textAccent }}
                >
                  {row.token}
                </span>
                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                  {row.value}
                </span>
                <span
                  className="font-mono text-caption rounded border border-solid px-1.5 py-0.5 w-fit"
                  style={{
                    color: t.textAccent,
                    backgroundColor: isDark ? 'rgba(6,182,212,0.05)' : 'rgba(6,182,212,0.08)',
                    borderColor: isDark ? 'rgba(6,182,212,0.20)' : 'rgba(6,182,212,0.25)',
                  }}
                >
                  {row.tw}
                </span>
                <span className="text-caption" style={{ color: t.textSecondary }}>
                  {row.category}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default TypographyContent;
