---
/**
 * Privacy notice banner component.
 * Displays a GDPR-compliant consent banner at the bottom of the page.
 * Manages user consent for analytics via localStorage.
 *
 * Note: Analytics loading is handled separately in Layout.astro to avoid
 * ad blockers blocking this script due to analytics-related keywords.
 *
 * Element IDs use generic names to avoid ad blocker filter lists that
 * target common patterns like "cookie-banner" or "consent-notice".
 */
---

<div
  id="priv-notice"
  class="fixed bottom-0 left-0 right-0 z-50 hidden"
  role="dialog"
  aria-labelledby="pn-title"
  aria-describedby="pn-desc"
>
  <div class="bg-base-200 border-t border-base-300 p-4 shadow-lg">
    <div class="container mx-auto max-w-4xl">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <div class="flex-1">
          <h2 id="pn-title" class="font-semibold mb-1">Privacy Notice</h2>
          <p id="pn-desc" class="text-sm text-base-content/80">
            We use analytics to understand how visitors use this site.
            <a href="/privacy/" class="link link-primary">Learn more</a>
          </p>
        </div>
        <div class="flex gap-2 flex-shrink-0">
          <button
            id="pn-decline"
            class="btn btn-sm btn-ghost"
            type="button"
          >
            Decline
          </button>
          <button
            id="pn-accept"
            class="btn btn-sm btn-primary"
            type="button"
          >
            Accept
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  (function() {
    var CONSENT_KEY = 'priv-notice';
    var banner = document.getElementById('priv-notice');
    var acceptBtn = document.getElementById('pn-accept');
    var declineBtn = document.getElementById('pn-decline');

    function setConsent(granted) {
      localStorage.setItem(CONSENT_KEY, granted ? 'granted' : 'denied');
      banner.classList.add('hidden');
      if (granted) {
        window.dispatchEvent(new CustomEvent('consent-granted'));
      }
    }

    function checkConsent() {
      var consent = localStorage.getItem(CONSENT_KEY);
      if (consent === 'granted') {
        window.dispatchEvent(new CustomEvent('consent-granted'));
      } else if (consent === null) {
        banner.classList.remove('hidden');
      }
    }

    acceptBtn.addEventListener('click', function() { setConsent(true); });
    declineBtn.addEventListener('click', function() { setConsent(false); });

    checkConsent();
  })();
</script>