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

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

// href 缺省 = 本轮未接入下载（iOS / macOS / Linux），按钮渲染为禁用态占位。
const plats: { icon: string; name: string; ver: string; href?: string }[] = [
  { icon: 'smartphone', name: 'iOS', ver: 'iOS 16+' },
  { icon: 'smartphone', name: 'Android', ver: 'Android 9+', href: SITE.downloads.android },
  { icon: 'laptop', name: 'macOS', ver: 'macOS 12+' },
  { icon: 'monitor', name: 'Windows', ver: 'Win 10/11', href: SITE.downloads.windows },
  { icon: 'terminal', name: 'Linux', ver: 'deb / rpm' },
];
---
<section id="download" class="sec-tan">
  <div class="wrap center">
    <div class="eyebrow">{t('dl.eyebrow')}</div>
    <h2 class="h-sec">{t('dl.h')}</h2>
    <p class="sub-sec">{t('dl.sub')}</p>
  </div>
  <div class="wrap">
    <div class="dl-grid">
      {plats.map((p) => (
        <div class="dl">
          <div class="ico"><Icon name={p.icon} /></div>
          <div class="pn">{p.name}</div>
          <div class="pv">{p.ver}</div>
          {p.href ? (
            <a class="gb" href={p.href}><Icon name="download" /><span>{t('dl.get')}</span></a>
          ) : (
            <span class="gb disabled" aria-disabled="true"><Icon name="download" /><span>{t('dl.soon')}</span></span>
          )}
        </div>
      ))}
    </div>
  </div>
</section>