---
const title = 'Бесплатная консультация';
---

<div id="consultation-modal" class="modal-overlay" aria-hidden="true">
  <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <button class="modal-close" aria-label="Закрыть" id="modal-close-btn">
      <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>

    <div class="modal-content">
      <h2 id="modal-title" class="modal-title">{title}</h2>
      <p class="modal-description">
        Оставьте свои контактные данные, и мы свяжемся с вами в течение 15 минут
      </p>

      <form class="modal-form" action="#" method="POST" id="consultation-form">
        <div class="form-group">
          <label for="name" class="form-label">Ваше имя</label>
          <input
              type="text"
              id="name"
              name="name"
              class="form-input"
              placeholder="Иван Иванов"
              required
          />
        </div>

        <div class="form-group">
          <label for="phone" class="form-label">Телефон</label>
          <input
              type="tel"
              id="phone"
              name="phone"
              class="form-input"
              placeholder="+7 (___) ___-__-__"
              required
          />
        </div>

        <button type="submit" class="modal-submit">
          Отправить заявку
        </button>

        <p class="form-privacy">
          Нажимая кнопку, вы соглашаетесь с
          <a href="/privacy" class="privacy-link">политикой конфиденциальности</a>
        </p>
      </form>
    </div>
  </div>
</div>

<script>
  (function() {
    const modal = document.getElementById('consultation-modal');
    const closeBtn = document.getElementById('modal-close-btn');
    const form = document.getElementById('consultation-form');

    function openModal() {
      if (!modal) return;
      modal.classList.add('active');
      modal.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
    }

    function closeModal() {
      if (!modal) return;
      modal.classList.remove('active');
      modal.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }

    // Открытие по кастомному событию
    window.addEventListener('open-modal', (e: Event) => {
      const customEvent = e as CustomEvent<string>;
      if (customEvent.detail === 'consultation-modal') {
        openModal();
      }
    });

    // Закрытие по крестику
    closeBtn?.addEventListener('click', closeModal);

    // Закрытие по клику вне модального окна
    modal?.addEventListener('click', (e) => {
      if (e.target === modal) {
        closeModal();
      }
    });

    // Закрытие по Escape
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && modal?.classList.contains('active')) {
        closeModal();
      }
    });

    // Обработка отправки формы
    form?.addEventListener('submit', (e) => {
      e.preventDefault();
      // Здесь добавь логику отправки формы
      console.log('Форма отправлена');
      closeModal();
    });

    // Для Astro View Transitions
    document.addEventListener('astro:page-load', () => {
      // Переинициализация при навигации
    });
  })();
</script>

<style>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

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

  .modal-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 440px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(-20px) scale(0.95);
    transition: transform 0.3s ease;
  }

  .modal-overlay.active .modal-container {
    transform: translateY(0) scale(1);
  }

  .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: #535e6c;
    transition: background 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-close:hover {
    background: #f0f2f5;
    color: #1e3050;
  }

  .modal-content {
    padding: 40px 32px 32px;
  }

  .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e3050;
    margin: 0 0 12px;
    text-align: center;
  }

  .modal-description {
    color: #535e6c;
    font-size: 0.95rem;
    text-align: center;
    margin: 0 0 28px;
    line-height: 1.5;
  }

  .modal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e3050;
  }

  .form-input {
    padding: 12px 16px;
    border: 2px solid #e0e4e8;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
  }

  .form-input:focus {
    border-color: #1e3050;
    box-shadow: 0 0 0 3px rgba(30, 48, 80, 0.1);
  }

  .form-input::placeholder {
    color: #9ca3af;
  }

  .modal-submit {
    background: linear-gradient(180deg, #eac26e 0%, #ce9f40 100%);
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(234, 194, 110, 0.3);
  }

  .modal-submit:hover {
    box-shadow: 0 6px 20px rgba(234, 194, 110, 0.5);
    transform: translateY(-2px);
  }

  .modal-submit:active {
    transform: translateY(0);
  }

  .form-privacy {
    font-size: 0.8rem;
    color: #9ca3af;
    text-align: center;
    margin: 0;
    line-height: 1.4;
  }

  .privacy-link {
    color: #1e3050;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .privacy-link:hover {
    text-decoration: none;
  }

  @media (max-width: 480px) {
    .modal-content {
      padding: 32px 24px 24px;
    }

    .modal-title {
      font-size: 1.25rem;
    }
  }
</style>