---
/**
 * Cookie consent banner component.
 * Displays a GDPR-compliant cookie consent banner at the bottom of the page.
 * Manages user consent for analytics cookies via localStorage.
 */
---

<div
  id="cookie-banner"
  class="fixed bottom-0 left-0 right-0 z-50 hidden"
  role="dialog"
  aria-labelledby="cookie-banner-title"
  aria-describedby="cookie-banner-description"
>
  <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="cookie-banner-title" class="font-semibold mb-1">Cookie Consent</h2>
          <p id="cookie-banner-description" class="text-sm text-base-content/80">
            We use cookies to analyze site traffic with Google Analytics.
            <a href="/privacy/" class="link link-primary">Learn more</a>
          </p>
        </div>
        <div class="flex gap-2 flex-shrink-0">
          <button
            id="cookie-decline"
            class="btn btn-sm btn-ghost"
            type="button"
          >
            Decline
          </button>
          <button
            id="cookie-accept"
            class="btn btn-sm btn-primary"
            type="button"
          >
            Accept
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  (function() {
    const CONSENT_KEY = 'cookie-consent';
    const banner = document.getElementById('cookie-banner');
    const acceptBtn = document.getElementById('cookie-accept');
    const declineBtn = document.getElementById('cookie-decline');

    /**
     * Loads Google Analytics scripts dynamically.
     */
    function loadGoogleAnalytics() {
      if (document.getElementById('ga-script')) return;

      const script = document.createElement('script');
      script.id = 'ga-script';
      script.async = true;
      script.src = 'https://www.googletagmanager.com/gtag/js?id=G-7308Y1HGM9';
      document.head.appendChild(script);

      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-7308Y1HGM9');
    }

    /**
     * Saves consent preference and handles banner visibility.
     * @param {boolean} consented - Whether the user consented to cookies.
     */
    function setConsent(consented) {
      localStorage.setItem(CONSENT_KEY, consented ? 'granted' : 'denied');
      banner.classList.add('hidden');
      if (consented) {
        loadGoogleAnalytics();
      }
    }

    /**
     * Checks stored consent and shows banner if no decision has been made.
     */
    function checkConsent() {
      const consent = localStorage.getItem(CONSENT_KEY);
      if (consent === 'granted') {
        loadGoogleAnalytics();
      } else if (consent === null) {
        banner.classList.remove('hidden');
      }
    }

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

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