---
import { getLangFromUrl, useTranslations } from "../i18n/utils";
import Link from "./Link.astro";
import WaveSVG from "./WaveSVG.astro";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<div class="footer">
  <div 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 content={t("footer.madeWithLove")} />
    </div>
  </div>
  <div class="footer-bottom">
    <div class="footer-links">
      <Link href="https://titaniumnetwork.org" newTab content={t("footer.poweredBy")} />

      <div class="footer-copyright">
        <p>&copy; {t("footer.aluProject")} 2024</p>
      </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: 200px;
      gap: 50px;
    }
    .footer-top,
    .footer-bottom {
      width: 90%;
      margin: 0 auto;
    }

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

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