// page-tokens.jsx — Design tokens reference

function PageTokens({ dark, lang, headingFont }) {
  const p = palette(dark);
  const en = lang === 'en';

  const swatch = (label, value, ink) => (
    <div style={{ border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.sm, overflow: 'hidden', background: p.paper }}>
      <div style={{ height: 100, background: value, borderBottom: `0.5px solid ${p.line}` }} />
      <div style={{ padding: '12px 14px' }}>
        <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.ink, fontWeight: 500 }}>{label}</div>
        <div style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted, marginTop: 4 }}>{value}</div>
      </div>
    </div>
  );

  return (
    <Page dark={dark}>
      <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
      <div style={{ padding: '48px 80px 80px' }}>
        <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Reference · 04' : '参考 · 04'}</Mono>
        <H as="h1" dark={dark} font={headingFont} size={42} style={{ marginBottom: 16, letterSpacing: -1 }}>
          {en ? 'Design tokens' : '设计 tokens'}
        </H>
        <p style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: p.inkSoft, marginBottom: 40, maxWidth: 620, lineHeight: 1.6 }}>
          {en ? 'Warm-white / gold / graphite. Tokens export 1:1 to CSS variables. Dark mode is a token swap, not a separate theme.' : '暖白 / 金 / 石墨。Tokens 与 CSS 变量 1:1 对应，深色模式仅为 token 替换。'}
        </p>

        {/* Color swatches */}
        <div style={{ marginBottom: 48 }}>
          <H as="h2" dark={dark} font={headingFont} size={22} style={{ marginBottom: 18 }}>{en ? 'Color' : '颜色'}</H>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {swatch('paper', '#F7F4EE')}
            {swatch('paperSoft', '#EFEBE2')}
            {swatch('ink', '#1D1D1F')}
            {swatch('inkMuted', '#76716A')}
            {swatch('gold', '#B7925A')}
            {swatch('goldSoft', '#D9C7A7')}
            {swatch('goldDeep', '#8E6F40')}
            {swatch('success', '#4E5B4F')}
          </div>
        </div>

        {/* Type scale */}
        <div style={{ marginBottom: 48 }}>
          <H as="h2" dark={dark} font={headingFont} size={22} style={{ marginBottom: 18 }}>{en ? 'Type scale' : '字号阶梯'}</H>
          <Card dark={dark} padding={28}>
            {[
              { l: 'display', size: 64, t: en ? 'Discover Musical Growth' : '发现音乐成长', font: 'heading' },
              { l: 'h1', size: 42, t: en ? 'Programs & tuition' : '课程与学费', font: 'heading' },
              { l: 'h2', size: 28, t: en ? 'Available trial slots' : '可预约试听', font: 'heading' },
              { l: 'h3', size: 18, t: en ? 'Next lesson · Wed 4:15 pm' : '下一节课 · 周三 16:15', font: 'sans' },
              { l: 'body', size: 14, t: en ? 'Body copy at 14 / 1.6 — comfortable for portal text and form labels.' : '正文 14px / 行高 1.6 — Portal 文案与表单常用尺寸。', font: 'sans' },
              { l: 'mono', size: 10, t: 'EYEBROW · OVERLINE · 10 / 0.6', font: 'mono' },
            ].map((row, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 70px 1fr', alignItems: 'baseline', padding: '14px 0', borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none', gap: 16 }}>
                <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted, letterSpacing: 0.6, textTransform: 'uppercase' }}>{row.l}</span>
                <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted }}>{row.size}px</span>
                <span style={{
                  fontFamily: row.font === 'heading' ? (headingFont === 'serif' ? TOKENS.font.serif : TOKENS.font.sans) : (row.font === 'mono' ? TOKENS.font.mono : TOKENS.font.sans),
                  fontSize: row.size, color: p.ink,
                  fontWeight: row.l === 'mono' ? 400 : (row.font === 'heading' && headingFont === 'serif' ? 500 : 500),
                  letterSpacing: row.l === 'mono' ? 0.6 : (row.size >= 28 ? -0.6 : 0),
                  textTransform: row.l === 'mono' ? 'uppercase' : 'none',
                }}>{row.t}</span>
              </div>
            ))}
          </Card>
        </div>

        {/* Spacing & radius */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <Card dark={dark} padding={28}>
            <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Spacing scale' : '间距阶梯'}</Mono>
            {[['xs', 4], ['sm', 8], ['md', 12], ['lg', 20], ['xl', 32], ['xxl', 56]].map(([k, v], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '8px 0', borderTop: i ? `0.5px solid ${p.lineSoft}` : 'none' }}>
                <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted, width: 32 }}>{k}</span>
                <div style={{ height: 12, width: v * 4, background: p.gold, opacity: 0.6 }} />
                <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted }}>{v}px</span>
              </div>
            ))}
          </Card>
          <Card dark={dark} padding={28}>
            <Mono dark={dark} style={{ marginBottom: 14, display: 'inline-block' }}>{en ? 'Radius scale' : '圆角阶梯'}</Mono>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-end' }}>
              {[['xs', 3], ['sm', 5], ['md', 8], ['lg', 12], ['xl', 20]].map(([k, v]) => (
                <div key={k} style={{ textAlign: 'center' }}>
                  <div style={{ width: 56, height: 56, background: p.paperSoft, border: `0.5px solid ${p.line}`, borderRadius: v, marginBottom: 8 }} />
                  <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted }}>{k} · {v}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </Page>
  );
}

window.PageTokens = PageTokens;