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

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

const plats = [
  { icon: 'smartphone', name: 'iOS', ver: 'iOS 16+' },
  { icon: 'smartphone', name: 'Android', ver: 'Android 9+' },
  { icon: 'laptop', name: 'macOS', ver: 'macOS 12+' },
  { icon: 'monitor', name: 'Windows', ver: 'Win 10/11' },
  { 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>
          <a class="gb"><Icon name="download" /><span>{t('dl.get')}</span></a>
        </div>
      ))}
    </div>
  </div>
</section>
