---
import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";

const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---

<footer class="footer">
  <p set:html={t.footer.githubIntro} />
  <p set:html={t.footer.repoIntro} />

  <div
    style="display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; padding-bottom: 12px;"
  >
    <!-- 备案信息 -->
    <div class="beian" style="display: flex; gap: 4px; justify-content: center">
      <a href="https://beian.miit.gov.cn" target="_blank" style="color: gray;"
        >赣ICP备2025059789号</a
      >
      <span>|</span>
      <a
        href="https://beian.mps.gov.cn/#/query/webSearch?code=36020002000597"
        target="_blank"
        style="display: flex; gap: 2px; color: gray;"
      >
        <img
          src="/images/beian.png"
          style="height: 1em; vertical-align: middle; margin-top: 4px;"
        />
        <span>赣公网安备36020002000597号</span>
      </a>
    </div>
  </div>

  <style>
    .footer {
      margin-top: 1rem;
      padding: 1.5rem 0 0;
      font-size: 0.95rem;
      opacity: 0.9;
      position: relative;
    }

    .footer::before {
      content: "";
      display: block;
      width: 100%;
      height: 12px;
      margin-bottom: 1rem;
      background: repeating-linear-gradient(
        -45deg,
        #e96b6b 0 14px,
        transparent 14px 28px,
        #7da2ff 28px 42px,
        transparent 42px 56px
      );
      pointer-events: none;
    }

    .footer p {
      margin: 0.4rem 0;
    }

    .footer a {
      color: #7fb3ff;
      font-weight: 700;
      text-decoration: underline;
    }

    :global(.dark) .footer::before {
      background: repeating-linear-gradient(
        -45deg,
        #ff8a8a 0 14px,
        transparent 14px 28px,
        #9ecbff 28px 42px,
        transparent 42px 56px
      );
    }
  </style>
</footer>