{{- /* cookie-consent.html — GDPR consent banner (accept / reject / manage).
       Non-essential scripts stay inert (type="text/plain" data-cookiecategory)
       until the visitor consents; cookie-consent.js then activates them. */ -}}
<div id="cookie-consent" class="cookie-banner" role="region" aria-label="Cookie consent" hidden>
  <div class="site-container">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div class="max-w-2xl text-sm text-secondary/80">
        <p class="font-semibold text-secondary">{{ i18n "cookieTitle" }}</p>
        <p class="mt-1">
          We use strictly necessary cookies to run this site and, with your consent, analytics and
          marketing cookies to improve it. You can change your choice at any time.
          {{ with site.GetPage "cookie-policy" }}<a href="{{ .RelPermalink }}" class="font-medium text-primary underline">Read our Cookie Policy</a>.{{ end }}
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <button type="button" data-cc-accept-all class="btn-primary">{{ i18n "cookieAcceptAll" }}</button>
        <button type="button" data-cc-reject class="btn-secondary">{{ i18n "cookieReject" }}</button>
        <button type="button" data-cc-manage class="btn-ghost">{{ i18n "cookieManage" }}</button>
      </div>
    </div>

    <div data-cc-panel hidden class="mt-4">
      <div class="grid gap-3 sm:grid-cols-3">
        <div class="cookie-toggle">
          <input type="checkbox" checked disabled class="mt-1" aria-label="Necessary cookies (always on)">
          <span><span class="block font-semibold text-secondary">{{ i18n "cookieNecessary" }}</span><span class="text-xs text-secondary/70">Always active. Required for core functionality.</span></span>
        </div>
        <label class="cookie-toggle">
          <input type="checkbox" data-cc-category="analytics" class="mt-1">
          <span><span class="block font-semibold text-secondary">{{ i18n "cookieAnalytics" }}</span><span class="text-xs text-secondary/70">Anonymous usage statistics.</span></span>
        </label>
        <label class="cookie-toggle">
          <input type="checkbox" data-cc-category="marketing" class="mt-1">
          <span><span class="block font-semibold text-secondary">{{ i18n "cookieMarketing" }}</span><span class="text-xs text-secondary/70">Personalised offers and campaign measurement.</span></span>
        </label>
      </div>
      <div class="mt-3">
        <button type="button" data-cc-save class="btn-primary">{{ i18n "cookieSave" }}</button>
      </div>
    </div>
  </div>
</div>

{{/* Example gated script — stays inert until the visitor accepts "analytics".
     Replace the body with your real analytics snippet (e.g. GA4/Plausible). */}}
<script type="text/plain" data-cookiecategory="analytics">
  // console.log("Analytics enabled after consent");
</script>