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

interface Props { t: T }
const { t } = Astro.props;
---
<footer class="ftr">
  <div class="wrap">
    <div class="top">
      <div>
        <div class="nm">
          <Brand variant="footer" size={28} />
          穿山甲
        </div>
        <p class="tag">{t('ft.tag')}</p>
      </div>
      <div>
        <h4>{t('ft.product')}</h4>
        <ul>
          <li><a href="#product">{t('ft.features')}</a></li>
          <li><a href="#pricing">{t('ft.pricing')}</a></li>
          <li><a href="#download">{t('ft.download')}</a></li>
        </ul>
      </div>
      <div>
        <h4>{t('ft.resources')}</h4>
        <ul>
          <li><a href="#docs">{t('ft.docs')}</a></li>
          <li><a href="#docs">{t('ft.faq')}</a></li>
          <li><a href="#docs">{t('ft.privacy')}</a></li>
        </ul>
      </div>
      <div>
        <h4>{t('ft.contact')}</h4>
        <ul>
          <li><a class="mono">{SITE.store.label}</a></li>
          <li><a class="mono" href={SITE.telegram.url} target="_blank" rel="noopener">Telegram {SITE.telegram.handle}</a></li>
          <li><a class="mono">LINE {SITE.line.handle}</a></li>
          <li><a class="mono" href={`mailto:${SITE.email}`}>{SITE.email}</a></li>
        </ul>
      </div>
    </div>
    <div class="bot">
      <span>{t('ft.copy')}</span>
      <span>{t('ft.madenote')}</span>
      <span>{t('ft.hours')}</span>
    </div>
  </div>
</footer>