Cookie consent banner with stored choice

<div id="consent" role="dialog" aria-modal="false" aria-labelledby="consent-title" hidden
     class="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-2xl rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl">
  <h2 id="consent-title" class="font-semibold text-slate-900">We value your privacy</h2>
  <p class="mt-1 text-sm text-slate-600">We use necessary cookies to run the site. Optional analytics cookies help us improve it. You can change your choice any time.</p>

  <div class="mt-4 flex flex-wrap items-center gap-3">
    <label class="flex items-center gap-2 text-sm text-slate-700">
      <input id="analytics" type="checkbox" class="size-4 rounded border-slate-300"> Analytics
    </label>
    <div class="ml-auto flex gap-2">
      <button type="button" data-consent="reject"
        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Reject all</button>
      <button type="button" data-consent="save"
        class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Save choice</button>
      <button type="button" data-consent="accept"
        class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Accept all</button>
    </div>
  </div>
</div>

const KEY = 'acme_consent_v1';   // bump the suffix to ask everyone again after a policy change
const banner = document.getElementById('consent');
const analytics = document.getElementById('analytics');

function read() {
  try { return JSON.parse(localStorage.getItem(KEY)); } catch { return null; }
}
function save(choice) {
  try { localStorage.setItem(KEY, JSON.stringify({ ...choice, at: Date.now() })); } catch {}
  banner.hidden = true;
  apply(choice);
}
// Only load optional scripts after a positive choice
function apply(choice) {
  if (choice.analytics) {
    const s = document.createElement('script');
    s.src = '/js/analytics.js';
    s.defer = true;
    document.head.append(s);
  }
}

const stored = read();
if (stored) apply(stored); else banner.hidden = false;

banner.addEventListener('click', (e) => {
  const action = e.target.closest('[data-consent]')?.dataset.consent;
  if (action === 'accept') save({ analytics: true });
  if (action === 'reject') save({ analytics: false });
  if (action === 'save') save({ analytics: analytics.checked });
});
// Footer link: <button data-reopen-consent>Cookie settings</button>
document.querySelector('[data-reopen-consent]')?.addEventListener('click', () => { banner.hidden = false; });