---
import SkipNavLink from "./SkipNavLink.astro";

// import Logo from "../assets/ci/side-gradient.svg";

function getCurrentYear() {
  return new Date().getFullYear();
}
---

<footer>
  <SkipNavLink contentId="main-content" />

  {/* Footer nav */}
  <nav>
    {/* Explore */}
    <div class="explore">
      <span class="list-title">Explore</span>
      <ul>
        <li><a href="/">Home</a></li>
        {/* <li><a href="/blog">Blog</a></li> */}
      </ul>
    </div>

    {/* Follow us */}
    <div class="follow">
      <span class="list-title">Reach out to us</span>
      <ul>
        <li><a href="tel:+436704011885">+43 670 4011 885</a></li>
        <li>
          <a href="mailto:office@tideshiftdigital.com"
            >office@tideshiftdigital.com</a
          >
        </li>
      </ul>

      {/* Socials */}
      {
        /*<ul class="socials">
                <li>icon</li>
                <li>icon</li>
                <li>icon</li>
            </ul> */
      }
    </div>

    {/* Legal */}
    <div class="legal">
      <span class="list-title">Legal</span>
      <ul>
        <li><a href="/privacy-policy">Privacy Policy</a></li>
        <li><a href="/imprint">Imprint</a></li>
      </ul>
    </div>
  </nav>

  {/* Copyright */}
  <div class="info">
    <span>&copy; {getCurrentYear()} Tideshift Digital e.U.</span>

    <span class="made">Made with ❤️ in Vienna.</span>

    <div class="no-ai">All content made by humans.</div>
  </div>

  {/* Logo, commented out because of gradient issues */}
  {/* <Logo class="logo"/> */}
</footer>

<style>
  footer {
    max-width: var(--max-content-width);
    margin-inline: auto;
    padding-block: 8rem 5.5rem;
    padding-inline: 5rem;
  }

  nav,
  .info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2remm;
    font-size: 0.875rem;
    line-height: var(--leading-title);
  }

  ul {
    list-style: none;

    & * {
      margin-top: 0.75rem;
    }
  }

  .explore {
  }

  .follow {
    text-align: center;
  }

  .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
  }

  .legal {
    text-align: end;
  }

  .list-title {
    color: var(--clr-light-600);
  }

  .info {
    align-items: center;
    justify-content: center;
    margin-top: 3.5rem;
    color: var(--clr-light-600);

    & .made {
      text-align: center;
    }

    & .no-ai {
      text-align: end;
    }
  }

  .logo {
    width: 100%;
    height: auto;
    margin-top: 8rem;
  }
</style>