---
import { NAV_LINKS } from '../../../constants/index.ts';
---

<div class="mobile-menu-overlay" id="mobile-menu-overlay">
  <div class="mobile-menu">
    <!-- Кнопка закрытия -->
    <button class="mobile-menu-close" id="mobile-menu-close" aria-label="Закрыть меню">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>

    <!-- Логотип -->
    <a href="/" class="mobile-logo">
      <div class="logo-container">
        <div class="logo-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" class="shield">
            <path d="M24 4L6 10V22C6 34 24 44 24 44C24 44 42 34 42 22V10L24 4Z" fill="#eac26e" stroke="#eac26e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="24" cy="24" r="8" fill="#1e3050" opacity="0.9"/>
            <circle cx="24" cy="24" r="3" fill="#eac26e"/>
            <line x1="24" y1="16" x2="24" y2="20" stroke="#1e3050" stroke-width="2"/>
            <line x1="24" y1="28" x2="24" y2="32" stroke="#1e3050" stroke-width="2"/>
            <line x1="16" y1="24" x2="20" y2="24" stroke="#1e3050" stroke-width="2"/>
            <line x1="28" y1="24" x2="32" y2="24" stroke="#1e3050" stroke-width="2"/>
          </svg>
        </div>
        <div class="logo-text">
          <span class="logo-name">Автоюрист</span>
          <span class="logo-number">086</span>
        </div>
      </div>
    </a>

    <!-- Навигация -->
    <nav class="mobile-nav">
      <ul class="mobile-nav-list">
        {NAV_LINKS.map((link, index) => (
          <li style={`--item-index: ${index}`}>
            <a href={link.url} class="mobile-nav-link">
              {link.name}
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="link-arrow">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </a>
          </li>
        ))}
      </ul>
    </nav>

    <!-- Контакты -->
    <div class="mobile-contacts">
      <a href="tel:+73462000000" class="mobile-phone">+7 (3462) 00-00-00</a>
      <a href="/login" class="mobile-login-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
          <polyline points="10 17 15 12 10 7"></polyline>
          <line x1="15" y1="12" x2="3" y2="12"></line>
        </svg>
        <span>Вход в кабинет</span>
      </a>
    </div>
  </div>
</div>

<style>
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 21, 41, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: linear-gradient(180deg, #0a2540 0%, #031529 100%);
    padding: 2rem 1.5rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .mobile-menu-overlay.active .mobile-menu {
    transform: translateX(0);
  }

  /* Кнопка закрытия */
  .mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #8c9bb0;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #eac26e;
  }

  /* Логотип */
  .mobile-logo {
    text-decoration: none;
    margin-bottom: 2.5rem;
  }

  .logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .logo-icon {
    width: 42px;
    height: 42px;
  }

  .shield {
    width: 100%;
    height: 100%;
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }

  .logo-name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
  }

  .logo-number {
    font-size: 1.1rem;
    font-weight: 900;
    color: #eac26e;
    letter-spacing: -0.5px;
  }

  /* Навигация */
  .mobile-nav {
    flex: 1;
  }

  .mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .mobile-nav-list li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: calc(0.05s * var(--item-index));
  }

  .mobile-menu-overlay.active .mobile-nav-list li {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.75rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #eac26e;
  }

  .mobile-nav-link:hover .link-arrow {
    transform: translateX(4px);
    opacity: 1;
  }

  .link-arrow {
    opacity: 0;
    transition: all 0.3s ease;
    color: #eac26e;
  }

  /* Контакты */
  .mobile-contacts {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .mobile-phone {
    color: #eac26e;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(234, 194, 110, 0.1);
    transition: all 0.3s ease;
  }

  .mobile-phone:hover {
    background: rgba(234, 194, 110, 0.2);
  }

  .mobile-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #1e3050 0%, #2a4266 100%);
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 48, 80, 0.3);
  }

  .mobile-login-btn:hover {
    box-shadow: 0 6px 20px rgba(30, 48, 80, 0.5);
    transform: translateY(-2px);
  }

  /* Scrollbar */
  .mobile-menu::-webkit-scrollbar {
    width: 6px;
  }

  .mobile-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
  }

  .mobile-menu::-webkit-scrollbar-thumb {
    background: rgba(234, 194, 110, 0.3);
    border-radius: 3px;
  }

  .mobile-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 194, 110, 0.5);
  }
</style>