---
import { SITE_FOUNDED, FORUM_URL } from '../consts';
const year = new Date().getFullYear();
---

<footer class="site-footer">
  <div class="container footer-inner">
    <div>© {SITE_FOUNDED}–{year} pushkinohistory.ru</div>
    <div class="footer-nav">
      <a href="/feed.xml">RSS</a>
      <a href="/sitemap-index.xml">Карта сайта</a>
      <a href={FORUM_URL} target="_blank" rel="noopener noreferrer">Форум ↗</a>
      <a href="/privacy/">Политика</a>
    </div>
  </div>
  <div class="container dev-credit">
    <a href="https://hhivp.com/" target="_blank" rel="noopener" class="hhivp-credit" aria-label="Сделано в hhivp.com">
      <span class="hhivp-credit-mark" aria-hidden="true">
        <img src="/hhivp-mark.svg" alt="" width="20" height="20" />
      </span>
      <span class="hhivp-credit-text">Сделано&nbsp;в&nbsp;hhivp.com</span>
    </a>
  </div>
</footer>

<style>
  .site-footer {
    border-top: 1px solid var(--rule);
    margin-top: 3rem;
    padding: 1.25rem 0;
    background: rgba(255, 252, 244, 0.4);
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--muted);
  }
  .footer-nav { display: flex; gap: 1.25rem; }
  .footer-nav a { color: var(--muted); text-decoration: none; }
  .footer-nav a:hover { color: var(--accent); }
  .dev-credit {
    margin-top: 0.75rem;
    color: var(--muted);
    text-align: center;
  }
  .hhivp-credit {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    text-decoration: none;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 3px;
    gap: 0;
    line-height: 1;
    opacity: 0.6;
    transition: gap 240ms ease, padding-right 240ms ease, opacity 240ms ease;
  }
  .hhivp-credit:hover,
  .hhivp-credit:focus-visible {
    opacity: 1;
    gap: 8px;
    padding-right: 12px;
    outline: none;
  }
  .hhivp-credit-mark { display: inline-flex; flex-shrink: 0; }
  .hhivp-credit-mark img { display: block; width: 20px; height: 20px; }
  .hhivp-credit-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    font-size: 0.74rem;
    transition: max-width 240ms ease;
  }
  .hhivp-credit:hover .hhivp-credit-text,
  .hhivp-credit:focus-visible .hhivp-credit-text { max-width: 200px; }
</style>
