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

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="#blog">{t('ft.blog')}</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">shop.pangolin.vpn</a></li>
          <li><a class="mono">Telegram @PangolinVPN_bot</a></li>
          <li><a class="mono">LINE @pangolinvpn</a></li>
          <li><a class="mono">support@pangolin.vpn</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>
