<script>
  import { resolve } from '$app/paths';
  import { t } from '$lib/translations';
  import { appVersion } from '$lib/utils/env';

  import MailIcon from '$lib/components/icons/MailIcon.svelte';
  import ArrowTopIcon from './icons/ArrowTopIcon.svelte';
  import logo from '$lib/assets/logo-white.webp';
</script>

<footer>
  <div class="footer-main">
  <div class="footer-decoration" aria-hidden="true">
    <svg
      class="footer-decoration__svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1440 480"
      preserveAspectRatio="xMidYMid slice"
      fill="none"
    >
      <g stroke="white" stroke-linecap="round">
        <circle
          cx="1180"
          cy="360"
          r="130"
          stroke-width="2"
          stroke-opacity="0.14"
          stroke-dasharray="10 8"
        />
        <circle cx="1180" cy="360" r="98" stroke-width="1" stroke-opacity="0.08" />
        <path
          d="M60 100 Q220 20 400 110 T720 80"
          stroke-width="1.5"
          stroke-opacity="0.16"
          stroke-dasharray="6 10"
        />
        <path
          d="M100 320 Q340 260 560 340 T980 300"
          stroke-width="1.2"
          stroke-opacity="0.12"
          stroke-dasharray="4 12"
        />
        <path
          d="M200 60 L240 100 M240 60 L200 100"
          stroke-width="1"
          stroke-opacity="0.1"
        />
        <path
          d="M320 400 L350 430 M350 400 L320 430"
          stroke-width="1"
          stroke-opacity="0.1"
        />
        <path
          d="M900 140 L930 170 M930 140 L900 170"
          stroke-width="1"
          stroke-opacity="0.08"
        />
        <circle cx="180" cy="200" r="4" fill="white" fill-opacity="0.12" stroke="none" />
        <circle cx="210" cy="220" r="3" fill="white" fill-opacity="0.1" stroke="none" />
        <circle cx="240" cy="205" r="3.5" fill="white" fill-opacity="0.1" stroke="none" />
        <circle cx="680" cy="90" r="3" fill="white" fill-opacity="0.08" stroke="none" />
        <circle cx="710" cy="105" r="4" fill="white" fill-opacity="0.08" stroke="none" />
      </g>
      <path
        d="M1320 40 L1348 8 L1356 16 L1328 48 Z"
        fill="white"
        fill-opacity="0.1"
      />
    </svg>
  </div>

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

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

          <a href="mailto:leo@leomurca.xyz}" aria-label="leo@leomurca.xyz"
            >leo@leomurca.xyz</a
          >
        </div>
      </address>
    </section>
    <section class="footer-block">
      <h1>{$t('footer.resources')}</h1>
      <nav class="social-container" aria-label="Social media">
        <a href={resolve('/about')}>{$t('footer.about')}</a>
        <a href={resolve('/pes-file-viewer')}>{$t('footer.pesViewer')}</a>
        <a href={resolve('/dst-file-viewer')}>{$t('footer.dstViewer')}</a>
        <a href={resolve('/jef-file-viewer')}>{$t('footer.jefViewer')}</a>
        <a href={resolve('/exp-file-viewer')}>{$t('footer.expViewer')}</a>
        <a href={resolve('/embroidery-viewer-android')}>{$t('footer.androidApp')}</a>
        <a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
        <a href={resolve('/terms-of-service')}
          >{$t('footer.terms.of.service')}</a
        >
      </nav>
      <button
        class="back-to-top-button"
        aria-label={$t('footer.back-to-top.aria-label')}
        onclick={() => scrollTo({ top: 0, behavior: 'smooth' })}
      >
        <ArrowTopIcon size={30} /> {$t('footer.back-to-top.label')}</button
      >
    </section>
  </div>
  </div>
  <section class="credits-container">
    <div class="credits-decoration" aria-hidden="true">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1440 48"
        preserveAspectRatio="none"
        fill="none"
      >
        <path
          d="M0 24 Q180 8 360 24 T720 24 T1080 24 T1440 24"
          stroke="white"
          stroke-width="1"
          stroke-opacity="0.2"
          stroke-dasharray="5 9"
        />
      </svg>
    </div>
    Copyright {new Date().getFullYear()}

    <a href="https://leomurca.xyz" target="_blank" rel="noreferrer"
      >Leonardo Murça</a
    >
    |
    {$t('footer.version')}:
    <span style="font-family: var(--font-bold);">{appVersion()}</span>
  </section>
</footer>

<style>
  footer {
    width: 100%;
  }

  .footer-main {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary);
  }

  .footer-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .footer-decoration__svg {
    width: 100%;
    height: 100%;
    opacity: 0.95;
  }

  #content-container {
    position: relative;
    z-index: 1;
    width: 85%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 60px 0 60px 30px;
    scroll-margin-top: 100px;
    color: white;
    gap: 20px;
  }

  .footer-block {
    width: 100%;
  }

  h1 {
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
  }

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

  .contact-container a {
    color: white;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }

  .contact-item:hover {
    font-weight: 700;
  }

  .social-container {
    display: flex;
    flex-direction: column;
  }

  .social-container a {
    color: white;
  }

  .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: white;
    font-size: 1rem;
    width: 40%;
    margin-top: 30px;
    border: 1px solid white;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .back-to-top-button:hover {
    background-color: #ffffff;
    color: var(--color-primary);
  }

  .credits-container {
    position: relative;
    z-index: 1;
    background-color: var(--color-secondary);
    color: white;
    margin: 0 auto;
    padding: 20px 30px;
    padding-left: 9%;
    width: 100%;
    overflow: hidden;
  }

  .credits-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .credits-decoration svg {
    width: 100%;
    height: 100%;
  }

  .credits-container a {
    color: white;
    border-bottom: 1px solid white;
  }

  .credits-container a:hover {
    background-color: white;
    color: var(--color-secondary);
  }

  /* 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>
