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

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

const docs = [
  { icon: 'rocket', t: 'docs.1t', d: 'docs.1d' },
  { icon: 'circle-help', t: 'docs.2t', d: 'docs.2d' },
  { icon: 'shield-check', t: 'docs.3t', d: 'docs.3d' },
  { icon: 'lock', t: 'docs.4t', d: 'docs.4d' },
];
---
<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">
      {/* 文档页未就绪:卡片暂作信息展示(非链接),写好真实文档后改回 <a href> + 恢复「阅读」。 */}
      {docs.map((d) => (
        <div class="doc">
          <div class="ico"><Icon name={d.icon} /></div>
          <h3>{t(d.t)}</h3>
          <p>{t(d.d)}</p>
        </div>
      ))}
    </div>
  </div>
</section>