<template>
  <footer class="footer">
    <div class="container">
      <div class="footer__grid">
        <div class="footer__brand">
          <img src="/logo.svg" alt="Ял Арба" class="footer__logo" />
          <p class="small-text">
            Туристическая платформа Республики Башкортостан
          </p>
        </div>

        <div class="footer__col">
          <h5 class="footer__title">Навигация</h5>
          <ul class="footer__links">
            <li><NuxtLink to="/search">Поиск</NuxtLink></li>
            <li><NuxtLink to="/about">О нас</NuxtLink></li>
            <li><NuxtLink to="/contacts">Контакты</NuxtLink></li>
            <li><NuxtLink to="/support">Поддержка</NuxtLink></li>
          </ul>
        </div>

        <div class="footer__col">
          <h5 class="footer__title">Пользователю</h5>
          <ul class="footer__links">
            <li><NuxtLink to="/auth/login">Войти</NuxtLink></li>
            <li><NuxtLink to="/auth/register">Регистрация</NuxtLink></li>
            <li><NuxtLink to="/favorites">Избранное</NuxtLink></li>
            <li><NuxtLink to="/reviews">Отзывы</NuxtLink></li>
          </ul>
        </div>

        <div class="footer__col">
          <h5 class="footer__title">Контакты</h5>
          <ul class="footer__links">
            <li>
              <a href="mailto:info@yalarba.ru">info@yalarba.ru</a>
            </li>
            <li>
              <a href="tel:+73472999999">+7 (347) 299-99-99</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="footer__bottom">
        <p class="caption">&copy; {{ year }} Ял Арба. Все права защищены.</p>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
const year = new Date().getFullYear()
</script>

<style scoped>
.footer {
  background: var(--color-dark);
  color: var(--color-text-white);
  padding: 48px 0 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer__logo {
  height: 32px;
  margin-bottom: 12px;
  filter: brightness(0) invert(1);
}

.footer__title {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  margin-bottom: 16px;
}

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

.footer__links a {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-text-white);
}

.footer__bottom {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer__bottom .caption {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 744px) {
  .footer {
    padding: 32px 0 80px;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}
</style>
