---
---

<!-- Призыв к действию -->
<div class="relative bg-gradient-to-br from-[var(--color-gold)]/20 to-[var(--color-navy-dark)] border border-[var(--color-gold)]/30 rounded-3xl p-8 md:p-12 overflow-hidden mb-16">
  <div class="absolute top-0 right-0 w-64 h-64 bg-[var(--color-gold)] opacity-20 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2"></div>

  <div class="relative flex flex-col md:flex-row items-center justify-between gap-8">
    <div class="text-center md:text-left">
      <!-- Блок для авторизованного пользователя -->
      <div id="auth-logged-in" class="hidden">
        <h2 class="text-2xl md:text-3xl font-bold text-[var(--color-white)] mb-3">
          Хотите поделиться своим опытом?
        </h2>
        <p class="text-[var(--color-gray-400)] max-w-md">
          Ваш отзыв поможет другим людям сделать правильный выбор. Мы ценим каждое мнение.
        </p>
      </div>
      <!-- Блок для неавторизованного пользователя -->
      <div id="auth-logged-out">
        <h2 class="text-2xl md:text-3xl font-bold text-[var(--color-white)] mb-3">
          Войдите, чтобы оставить отзыв
        </h2>
        <p class="text-[var(--color-gray-400)] max-w-md">
          Авторизуйтесь, чтобы поделиться своим опытом и помочь другим людям сделать правильный выбор.
        </p>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-4">
      <!-- Кнопки для авторизованного пользователя -->
      <div id="auth-buttons-logged-in" class="hidden flex flex-col sm:flex-row gap-4">
        <button id="open-review-modal-btn" class="group px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-[var(--color-gold)]/30 hover:-translate-y-1 flex items-center justify-center gap-2 hover:cursor-pointer">
          <span class="text-xl">✍️</span>
          Написать отзыв
        </button>
      </div>
      <!-- Кнопка для неавторизованного пользователя -->
      <div id="auth-buttons-logged-out" class="flex flex-col sm:flex-row gap-4">
        <a
          id="login-link"
          href="/auth/login"
          class="group px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-[var(--color-gold)]/30 hover:-translate-y-1 flex items-center justify-center gap-2"
        >
          <span class="text-xl">🔐</span>
          Войти
        </a>
      </div>
    </div>
  </div>
</div>

<script>
  // Проверка авторизации и переключение блоков
  const checkAuth = async () => {
    const authLoggedInBlock = document.getElementById("auth-logged-in");
    const authLoggedOutBlock = document.getElementById("auth-logged-out");
    const authButtonsLoggedIn = document.getElementById("auth-buttons-logged-in");
    const authButtonsLoggedOut = document.getElementById("auth-buttons-logged-out");
    const openReviewBtn = document.getElementById("open-review-modal-btn");

    if (!authLoggedInBlock || !authLoggedOutBlock || !authButtonsLoggedIn || !authButtonsLoggedOut) return;

    try {
      const response = await fetch('/api/auth/me', {
        method: 'GET',
        credentials: 'include',
      });

      const data = await response.json();

      if (data.authenticated) {
        // Пользователь авторизован - показываем блоки для logged-in
        authLoggedInBlock.classList.remove("hidden");
        authButtonsLoggedIn.classList.remove("hidden");
        authLoggedOutBlock.classList.add("hidden");
        authButtonsLoggedOut.classList.add("hidden");
        
        // Проверяем через API, есть ли у пользователя уже отзыв
        if (openReviewBtn) {
          const checkResponse = await fetch('/api/reviews/check', {
            method: 'GET',
            credentials: 'include',
          });
          
          const checkData = await checkResponse.json();
          
          if (checkData.hasReview) {
            // Блокируем кнопку "Написать отзыв"
            openReviewBtn.disabled = true;
            openReviewBtn.classList.add("opacity-50", "cursor-not-allowed", "hover:cursor-not-allowed");
            openReviewBtn.classList.remove("hover:-translate-y-1", "hover:shadow-lg", "hover:shadow-[var(--color-gold)]/30");
            openReviewBtn.innerHTML = '<span class="text-xl">✓</span> Отзыв уже отправлен';
            console.log('[ReviewsCTA] Кнопка заблокирована - у пользователя уже есть отзыв');
          } else {
            // У пользователя нет отзыва - разблокируем кнопку
            openReviewBtn.disabled = false;
            openReviewBtn.classList.remove("opacity-50", "cursor-not-allowed", "hover:cursor-not-allowed");
            openReviewBtn.classList.add("hover:-translate-y-1", "hover:shadow-lg", "hover:shadow-[var(--color-gold)]/30");
            openReviewBtn.innerHTML = '<span class="text-xl">✍️</span> Написать отзыв';
            console.log('[ReviewsCTA] Кнопка активна - отзывов нет');
          }
        }
      } else {
        // Пользователь не авторизован - показываем блоки для logged-out
        authLoggedInBlock.classList.add("hidden");
        authButtonsLoggedIn.classList.add("hidden");
        authLoggedOutBlock.classList.remove("hidden");
        authButtonsLoggedOut.classList.remove("hidden");
      }
    } catch (error) {
      console.error('[ReviewsCTA] Ошибка проверки авторизации:', error);
      // При ошибке показываем блоки для неавторизованного
      authLoggedInBlock.classList.add("hidden");
      authButtonsLoggedIn.classList.add("hidden");
      authLoggedOutBlock.classList.remove("hidden");
      authButtonsLoggedOut.classList.remove("hidden");
    }
  };

  checkAuth();
</script>
