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

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

const items = [
  { icon: 'power', t: 'feat.1t', d: 'feat.1d' },
  { icon: 'zap', t: 'feat.2t', d: 'feat.2d' },
  { icon: 'globe', t: 'feat.3t', d: 'feat.3d' },
  { icon: 'eye-off', t: 'feat.4t', d: 'feat.4d' },
  { icon: 'shield', t: 'feat.5t', d: 'feat.5d' },
  { icon: 'monitor-smartphone', t: 'feat.6t', d: 'feat.6d' },
];
---
<section id="product" class="sec-tan">
  <div class="wrap center">
    <div class="eyebrow">{t('feat.eyebrow')}</div>
    <h2 class="h-sec">{t('feat.h')}</h2>
    <p class="sub-sec">{t('feat.sub')}</p>
  </div>
  <div class="wrap">
    <div class="feat-grid">
      {items.map((it) => (
        <div class="feat">
          <div class="ico"><Icon name={it.icon} /></div>
          <h3>{t(it.t)}</h3>
          <p>{t(it.d)}</p>
        </div>
      ))}
    </div>
  </div>
</section>