---
import Icon from './Icon.astro';
import type { T, Lang } from '../i18n/strings';

interface Props { t: T; lang: Lang }
const { t, lang } = Astro.props;

// 中文走 /zh/docs/*，其余语言暂共用英文文档（/docs/*）。
const base = lang === 'zh' ? '/zh/docs' : '/docs';

const docs = [
  { icon: 'rocket', t: 'docs.1t', d: 'docs.1d', slug: 'quickstart' },
  { icon: 'circle-help', t: 'docs.2t', d: 'docs.2d', slug: 'faq' },
  { icon: 'shield-check', t: 'docs.3t', d: 'docs.3d', slug: 'protocol' },
  { icon: 'lock', t: 'docs.4t', d: 'docs.4d', slug: 'privacy' },
];
---
<section id="docs">
  <div class="wrap center">
    <div class="eyebrow">{t('docs.eyebrow')}</div>
    <h2 class="h-sec">{t('docs.h')}</h2>
    <p class="sub-sec">{t('docs.sub')}</p>
  </div>
  <div class="wrap">
    <div class="docs-grid">
      {docs.map((d) => (
        <a class="doc" href={`${base}/${d.slug}/`}>
          <div class="ico"><Icon name={d.icon} /></div>
          <h3>{t(d.t)}</h3>
          <p>{t(d.d)}</p>
          <span class="ln">{t('docs.read')}<Icon name="arrow-right" /></span>
        </a>
      ))}
    </div>
  </div>
</section>