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

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

const cards = [
  { icon: 'gift', t: 'why.1t', d: 'why.1d' },
  { icon: 'monitor-smartphone', t: 'why.2t', d: 'why.2d' },
  { icon: 'badge-check', t: 'why.3t', d: 'why.3d' },
];
---
<section id="why-signup">
  <div class="wrap center">
    <div class="eyebrow">{t('why.eyebrow')}</div>
    <h2 class="h-sec">{t('why.h')}</h2>
    <p class="sub-sec">{t('why.sub')}</p>
  </div>
  <div class="wrap">
    <div class="why-grid">
      {cards.map((c) => (
        <div class="why">
          <div class="ico"><Icon name={c.icon} /></div>
          <h3>{t(c.t)}</h3>
          <p>{t(c.d)}</p>
        </div>
      ))}
    </div>
    <div class="steps">
      <div class="step"><span class="n">1</span><Icon name="mail" /><span class="t">{t('why.s1')}</span></div>
      <span class="step-arr"><Icon name="arrow-right" /></span>
      <div class="step"><span class="n">2</span><Icon name="shield-check" /><span class="t">{t('why.s2')}</span></div>
      <span class="step-arr"><Icon name="arrow-right" /></span>
      <div class="step"><span class="n">3</span><Icon name="power" /><span class="t">{t('why.s3')}</span></div>
    </div>
    <div class="why-cta">
      <a class="btn btn-primary btn-lg" href="#signup"><span>{t('why.cta')}</span></a>
    </div>
  </div>
</section>