---
import { CONTACT_CONSTANTS } from "@constants/constants.ts";
import SocialIcons from "@components/base/SocialIcons.astro";

const currentYear = new Date().getFullYear();

const services = [
  { name: "Административные дела", href: "/services/arbitration" },
  { name: "Гражданские дела", href: "/services/civil" },
  { name: "Семейные дела", href: "/services/family" },
  { name: "Защита должников", href: "/services/debt-protection" },
];

const menu = [
  { name: "Главная", href: "/" },
  { name: "О бюро", href: "/about" },
  { name: "Отзывы", href: "/reviews" },
  { name: "FAQ", href: "/faq" },
];
---

<footer
  class="bg-[#151b26] text-gray-400 py-16 border-t border-white/5 font-sans"
>
  <div class="container mx-auto px-6 md:px-12 lg:px-16">
    <!-- Основная сетка: 4 колонки -->
    <div
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8 mb-20"
    >
      <!-- Колонка 1: Лого и Инфо -->
      <div class="flex flex-col items-center md:items-start">
        <!-- Логотип -->
        <a href="/" class="flex items-center gap-3 mb-6 group">
          <div
            class="w-10 h-10 bg-[#1e2532] border border-white/10 flex items-center justify-center rounded-sm group-hover:border-[#bf9b58] transition-colors duration-300"
          >
            <!-- Иконка весов -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-6 h-6 text-[#bf9b58]"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              ><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"
              ></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"
              ></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path
                d="M3 7h2v2H3z"></path><path d="M19 7h2v2h-2z"></path></svg
            >
          </div>
          <span class="text-xl font-black text-white uppercase tracking-tighter"
            >ADVOKAT086</span
          >
        </a>

        <p
          class="text-sm leading-relaxed mb-8 max-w-xs text-gray-400 text-center md:text-left"
        >
          Ведущая адвокатская практика в Сургуте. Обеспечиваем правовую защиту
          бизнеса и граждан с 2009 года.
        </p>

        <!-- Социальные иконки -->
        <SocialIcons variant="footer" />
      </div>

      <!-- Колонка 2: Услуги -->
      <div class="text-center md:text-left">
        <h3
          class="text-[#bf9b58] text-xs font-bold uppercase tracking-[0.2em] mb-8"
        >
          Услуги
        </h3>
        <ul class="space-y-4">
          {
            services.map((item) => (
              <li>
                <a
                  href={item.href}
                  class="text-sm font-bold uppercase text-gray-300 hover:text-[#bf9b58] transition-colors duration-300 tracking-wide"
                >
                  {item.name}
                </a>
              </li>
            ))
          }
        </ul>
      </div>

      <!-- Колонка 3: Меню -->
      <div class="hidden md:block">
        <h3
          class="text-[#bf9b58] text-xs font-bold uppercase tracking-[0.2em] mb-8"
        >
          Меню
        </h3>
        <ul class="space-y-4">
          {
            menu.map((item) => (
              <li>
                <a
                  href={item.href}
                  class="text-sm font-bold uppercase text-gray-300 hover:text-[#bf9b58] transition-colors duration-300 tracking-wide"
                >
                  {item.name}
                </a>
              </li>
            ))
          }
        </ul>
      </div>

      <!-- Колонка 4: Контакты -->
      <div class="text-center md:text-left">
        <h3
          class="text-[#bf9b58] text-xs font-bold uppercase tracking-[0.2em] mb-8"
        >
          Контакты
        </h3>

        <div class="mb-6">
          <p class="text-[10px] uppercase tracking-widest text-gray-500 mb-1">
            Телефон
          </p>
          <a
            href={CONTACT_CONSTANTS.phoneHref}
            class="text-white text-lg font-bold hover:text-[#bf9b58] transition-colors"
          >
            {CONTACT_CONSTANTS.phone}
          </a>
        </div>

        <div>
          <p class="text-[10px] uppercase tracking-widest text-gray-500 mb-1">
            Адрес
          </p>
          <address class="text-white font-bold not-italic">
            {CONTACT_CONSTANTS.address}
          </address>
        </div>
      </div>
    </div>

    <!-- Нижняя линия: Copyright -->
    <div
      class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4"
    >
      <p class="text-[10px] uppercase tracking-[0.1em] text-gray-600">
        &copy; {currentYear} ADVOKAT086. Все права защищены.
      </p>

      <div class="flex gap-8">
        <a
          href="/privacy-policy"
          class="text-[10px] uppercase tracking-[0.1em] text-gray-600 hover:text-white transition-colors"
        >
          Политика конфиденциальности
        </a>
        <a
          href="/legal-info"
          class="text-[10px] uppercase tracking-[0.1em] text-gray-600 hover:text-white transition-colors"
        >
          Правовая информация
        </a>
      </div>
    </div>
  </div>
</footer>
