---
const COOKIE_KEY = 'cookie_consent';
---

<div id="cookie-banner" class="cookie-banner" role="dialog" aria-labelledby="cookie-title" aria-describedby="cookie-desc">
  <div class="cookie-content">
    <div class="cookie-text">
      <h3 id="cookie-title">Использование файлов cookie</h3>
      <p id="cookie-desc">
        Мы используем файлы cookie для обеспечения работы сайта. Продолжая использовать сайт, вы соглашаетесь с 
        <a href="/privacy">политикой обработки персональных данных</a>.
      </p>
    </div>
    <div class="cookie-actions">
      <button id="cookie-reject" class="cookie-btn cookie-btn-secondary">
        Отклонить
      </button>
      <button id="cookie-accept" class="cookie-btn cookie-btn-primary">
        Принять
      </button>
    </div>
  </div>
</div>

<script define:vars={{ COOKIE_KEY }}>
  (function() {
    const banner = document.getElementById('cookie-banner');
    const acceptBtn = document.getElementById('cookie-accept');
    const rejectBtn = document.getElementById('cookie-reject');

    function hasConsent() {
      return localStorage.getItem(COOKIE_KEY) !== null;
    }

    function saveConsent(accepted) {
      localStorage.setItem(COOKIE_KEY, JSON.stringify({
        accepted: accepted,
        timestamp: new Date().toISOString()
      }));
      hideBanner();
    }

    function hideBanner() {
      if (banner) {
        banner.classList.remove('active');
        setTimeout(() => {
          banner.style.display = 'none';
        }, 300);
      }
    }

    function showBanner() {
      if (banner) {
        banner.style.display = 'block';
        setTimeout(() => {
          banner.classList.add('active');
        }, 10);
      }
    }

    acceptBtn?.addEventListener('click', () => saveConsent(true));
    rejectBtn?.addEventListener('click', () => saveConsent(false));

    if (!hasConsent()) {
      showBanner();
    }
  })();
</script>

<style is:global>
  .cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9998;
    padding: 1.25rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .cookie-banner.active {
    transform: translateY(0);
  }

  .cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .cookie-text {
    flex: 1;
    min-width: 280px;
  }

  .cookie-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3050;
    margin: 0 0 0.5rem 0;
  }

  .cookie-text p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
  }

  .cookie-text a {
    color: #d4af37;
    text-decoration: underline;
  }

  .cookie-text a:hover {
    color: #b8962e;
  }

  .cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  .cookie-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
  }

  .cookie-btn-primary {
    background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
    color: #1e293b;
  }

  .cookie-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    transform: translateY(-1px);
  }

  .cookie-btn-secondary {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
  }

  .cookie-btn-secondary:hover {
    background: #e2e8f0;
    color: #475569;
  }

  @media (max-width: 640px) {
    .cookie-content {
      flex-direction: column;
      align-items: stretch;
    }

    .cookie-actions {
      justify-content: stretch;
    }

    .cookie-btn {
      flex: 1;
    }

    .cookie-text {
      min-width: 100%;
    }
  }
</style>