<script>
  import { resolve } from '$app/paths';
  import { t } from '$lib/translations';
  import logo from '$lib/assets/logo.svg';

  import ArrowTopIcon from './icons/ArrowTopIcon.svelte';
  import LinkedInIcon from './icons/LinkedInIcon.svelte';
  import MailIcon from './icons/MailIcon.svelte';
</script>

<footer>
  <div id="content-container">
    <section class="footer-block">
      <img
        src={logo}
        style="height: 80px; width: auto; margin-lft: -5px;"
        alt={$t('footer.logoAlt')}
      />
      <p>
        {$t('footer.tagline')}
      </p>
    </section>
    <section class="footer-block" aria-labelledby="contact-title">
      <h1 id="contact-title">{$t('footer.contactHeading')}</h1>
      <p>{$t('footer.contactLead')}</p>

      <address class="contact-container">
        <div class="contact-item">
          <MailIcon size={30} />

          <a href="mailto:leo@leomurca.xyz" aria-label={$t('footer.emailAria')}
            >leo@leomurca.xyz</a
          >
        </div>
      </address>

      <address class="contact-container">
        <div class="contact-item">
          <LinkedInIcon size={30} />

          <a
            href="https://linkedin.com/in/leonardoamurca"
            target="_blank"
            aria-label={$t('footer.linkedinAria')}>/leonardoamurca</a
          >
        </div>
      </address>
    </section>
    <section class="footer-block">
      <h1>{$t('footer.resourcesHeading')}</h1>
      <nav class="social-container" aria-label={$t('footer.resourcesNavAria')}>
        <a
          href="https://git.leomurca.xyz/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label={$t('footer.gitAria')}>{$t('footer.gitRepos')}</a
        >
        <a href={resolve('/privacy-policy')}>{$t('footer.privacyPolicy')}</a>
      </nav>
      <button
        class="back-to-top-button"
        aria-label={$t('footer.backToTop')}
        onclick={() => scrollTo({ top: 0, behavior: 'smooth' })}
      >
        <ArrowTopIcon size={30} />{$t('footer.backToTop')}</button
      >
    </section>
  </div>
  <section class="credits-container">
    Copyright © {new Date().getFullYear()}

    <a href="https://leomurca.xyz" target="_blank" rel="noreferrer"
      >Leonardo Murça</a
    > | {$t('footer.copyright')}
  </section>
</footer>

<style>
  footer {
    background-color: white;
    width: 100%;
    border-top: 2px solid #e6e7eb;
  }

  h1 {
    font-weight: 700;
    font-size: 1.3rem;
  }

  #content-container {
    width: 85%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 60px 0 60px 30px;
    scroll-margin-top: 100px;
    color: var(--color-font-light);
    gap: 20px;
  }

  .footer-block {
    width: 100%;
  }

  .contact-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    letter-spacing: 0.1rem;
    font-style: normal;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    transition: all 0.2s ease-in-out;
  }

  .contact-item:hover {
    font-weight: 700;
  }
  .social-container {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
  }
  .social-container a:hover {
    font-weight: 700;
  }
  .back-to-top-button {
    text-align: center;
    background-color: transparent;
    border-radius: 20px;
    border: none;
    padding: 13px;
    text-decoration: none;
    color: var(--color-font-light);
    font-size: 1rem;
    width: 40%;
    margin-top: 30px;
    border: 1px solid var(--color-font-light);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .back-to-top-button:hover {
    background-color: var(--color-font-light);
    color: white;
  }

  .credits-container {
    background-color: #f9f9f9;
    color: var(--color-font-light);
    margin: 0 auto;
    padding: 20px 30px;
    padding-left: 9%;
    width: 100%;
  }

  .credits-container a {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    transition: all 0.2s ease-in-out;
  }

  .credits-container a:hover {
    background-color: var(--color-primary);
    color: white;
  }
  /* Responsive */
  @media (max-width: 768px) {
    #content-container {
      width: 100%;
      margin: 0;
      padding: 60px 30px;
      flex-direction: column;
    }

    .back-to-top-button {
      width: 100%;
      justify-content: center;
      gap: 5px;
    }
  }
</style>
