---
import { i18n } from "@i18n/utils";
import Link from "./Link.astro";
import WaveSVG from "../WaveSVG.astro";
const t = i18n.inferLangUseTranslations(Astro.url);
---

<footer class="footer">
  <div aria-hidden="true" class="wave-svg-container">
    <WaveSVG />
  </div>
  <div class="footer-top">
    <div class="footer-title">
      <h2>{t("footer.brand")}</h2>
    </div>

    <div class="footer-madeby">
      <Link href="https://wearr.dev" newTab>{t("footer.madeWithLove")}</Link>
    </div>
  </div>
  <div class="footer-bottom">
    <div class="footer-left">
      <div class="footer-links">
        <Link href="https://discord.gg/unblock" newTab>Join the discord!</Link>
        <Link href="https://titaniumnetwork.org" newTab>{t("footer.poweredBy")}</Link>

        <div class="footer-copyright">
          <p>&copy; {t("footer.aluProject")} 2024</p>
        </div>
      </div>
    </div>
    <div class="footer-right">
      <div class="footer-links">
        <Link href="/privacy">Privacy</Link>
        <Link href="/terms">Terms</Link>
        <Link href="https://wearr.dev/contact" newTab>Contact</Link>
      </div>
    </div>
  </div>

  <style>
    .wave-svg-container {
      bottom: 0;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: -1;
      overflow: hidden;
      height: 300px;
      filter: brightness(1.5);
    }

    .footer {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      color: var(--text-color);
      position: relative;
      padding-top: 275px;
      gap: 20px;
    }
    .footer-top,
    .footer-bottom {
      width: 90%;
      margin: 0 auto;
    }

    .footer-title {
      font-size: 20px;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
    }

    .footer-links {
      display: flex;
      gap: 10px;
      flex-direction: column;
    }

    a {
      color: var(--text-color);
    }
  </style>
</footer>
