Cookie Consent Banner

{%- comment -%}
  modblo. Cookie Consent Banner
  Replaces Cookieyes / Pandectes / iubenda cookie banners.
  GDPR/CCPA-style consent banner with three categories:
    - Necessary (always on, can't be toggled)
    - Analytics
    - Marketing
  Saves consent in localStorage. Dispatches a modblo-consent:updated event
  on change so other scripts can gate themselves (e.g. only fire GA
  when consent.analytics === true). Re-prompts after configurable days.
{%- endcomment -%}

<div class="modblo-cc" data-modblo-cc
     data-section-id="{{ section.id }}"
     data-revisit-days="{{ section.settings.revisit_days | default: 180 }}"
     style="--modblo-cc-bg: {{ section.settings.bg }};
            --modblo-cc-fg: {{ section.settings.fg }};
            --modblo-cc-accent: {{ section.settings.accent }};">

  {%- comment -%} Bottom bar (default) {%- endcomment -%}
  <div class="modblo-cc__bar" data-modblo-cc-bar role="dialog" aria-label="Cookie consent" aria-live="polite">
    <div class="modblo-cc__bar-inner">
      <div class="modblo-cc__bar-body">
        <p class="modblo-cc__bar-h">{{ section.settings.bar_heading | default: 'We use cookies' }}</p>
        <p class="modblo-cc__bar-sub">
          {{ section.settings.bar_message | default: 'We use cookies to make our store work, analyze traffic, and personalize content. You choose what runs.' }}
          {%- if section.settings.policy_url != blank -%}
            <a href="{{ section.settings.policy_url }}" target="_blank" rel="noopener">Privacy policy</a>.
          {%- endif -%}
        </p>
      </div>
      <div class="modblo-cc__bar-actions">
        <button type="button" class="modblo-cc__btn modblo-cc__btn--ghost" data-modblo-cc-customize>
          {{ section.settings.customize_label | default: 'Customize' }}
        </button>
        <button type="button" class="modblo-cc__btn modblo-cc__btn--ghost" data-modblo-cc-reject>
          {{ section.settings.reject_label | default: 'Reject all' }}
        </button>
        <button type="button" class="modblo-cc__btn modblo-cc__btn--primary" data-modblo-cc-accept>
          {{ section.settings.accept_label | default: 'Accept all' }}
        </button>
      </div>
    </div>
  </div>

  {%- comment -%} Customize modal {%- endcomment -%}
  <div class="modblo-cc__overlay" data-modblo-cc-overlay></div>
  <div class="modblo-cc__modal" data-modblo-cc-modal role="dialog" aria-modal="true" aria-labelledby="modblo-cc-mod-h-{{ section.id }}">
    <header class="modblo-cc__modal-head">
      <h2 class="modblo-cc__modal-h" id="modblo-cc-mod-h-{{ section.id }}">{{ section.settings.modal_heading | default: 'Cookie preferences' }}</h2>
      <button type="button" class="modblo-cc__x" data-modblo-cc-close-modal aria-label="Close">×</button>
    </header>

    <div class="modblo-cc__modal-body">
      <p class="modblo-cc__modal-sub">{{ section.settings.modal_sub | default: 'Choose which categories of cookies you allow. You can change this anytime via the link in the footer.' }}</p>

      <div class="modblo-cc__cat" data-modblo-cc-cat="necessary">
        <div class="modblo-cc__cat-row">
          <div>
            <p class="modblo-cc__cat-h">Strictly necessary</p>
            <p class="modblo-cc__cat-sub">Required for the site to function — cart, checkout, account.</p>
          </div>
          <span class="modblo-cc__locked">Always on</span>
        </div>
      </div>

      <div class="modblo-cc__cat" data-modblo-cc-cat="analytics">
        <div class="modblo-cc__cat-row">
          <div>
            <p class="modblo-cc__cat-h">Analytics</p>
            <p class="modblo-cc__cat-sub">Helps us understand which pages and products visitors find useful.</p>
          </div>
          <label class="modblo-cc__switch">
            <input type="checkbox" data-modblo-cc-toggle="analytics">
            <span class="modblo-cc__switch-track" aria-hidden="true"><span class="modblo-cc__switch-thumb"></span></span>
          </label>
        </div>
      </div>

      <div class="modblo-cc__cat" data-modblo-cc-cat="marketing">
        <div class="modblo-cc__cat-row">
          <div>
            <p class="modblo-cc__cat-h">Marketing</p>
            <p class="modblo-cc__cat-sub">Lets us show relevant ads and measure their effectiveness.</p>
          </div>
          <label class="modblo-cc__switch">
            <input type="checkbox" data-modblo-cc-toggle="marketing">
            <span class="modblo-cc__switch-track" aria-hidden="true"><span class="modblo-cc__switch-thumb"></span></span>
          </label>
        </div>
      </div>

      {%- if section.settings.show_functional -%}
        <div class="modblo-cc__cat" data-modblo-cc-cat="functional">
          <div class="modblo-cc__cat-row">
            <div>
              <p class="modblo-cc__cat-h">Functional</p>
              <p class="modblo-cc__cat-sub">Remembers your preferences (language, region, recently viewed).</p>
            </div>
            <label class="modblo-cc__switch">
              <input type="checkbox" data-modblo-cc-toggle="functional">
              <span class="modblo-cc__switch-track" aria-hidden="true"><span class="modblo-cc__switch-thumb"></span></span>
            </label>
          </div>
        </div>
      {%- endif -%}
    </div>

    <footer class="modblo-cc__modal-foot">
      <button type="button" class="modblo-cc__btn modblo-cc__btn--ghost" data-modblo-cc-reject>Reject all</button>
      <button type="button" class="modblo-cc__btn modblo-cc__btn--primary" data-modblo-cc-save>Save preferences</button>
    </footer>
  </div>
</div>

<style>
  .modblo-cc__bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
    background: var(--modblo-cc-bg, #fff); color: var(--modblo-cc-fg, #0b0b0c);
    border: 1px solid color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 10%, transparent);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.25);
    transform: translateY(120%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    max-width: 720px; margin: 0 auto;
  }
  .modblo-cc.is-bar-shown .modblo-cc__bar { transform: translateY(0); }

  .modblo-cc__bar-inner {
    display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
    padding: 18px 22px;
  }
  .modblo-cc__bar-body { min-width: 0; }
  .modblo-cc__bar-h { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
  .modblo-cc__bar-sub { font-size: 13px; opacity: .7; line-height: 1.5; margin: 0; }
  .modblo-cc__bar-sub a { color: var(--modblo-cc-accent, #6366f1); text-decoration: underline; text-underline-offset: 2px; }

  .modblo-cc__bar-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

  .modblo-cc__btn {
    padding: 9px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 0; transition: opacity .2s, background .2s;
    white-space: nowrap;
  }
  .modblo-cc__btn--primary {
    background: var(--modblo-cc-fg, #0b0b0c); color: var(--modblo-cc-bg, #fff);
  }
  .modblo-cc__btn--primary:hover { opacity: .92; }
  .modblo-cc__btn--ghost {
    background: transparent; color: inherit;
    border: 1px solid color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 15%, transparent);
  }
  .modblo-cc__btn--ghost:hover { background: color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 5%, transparent); }

  .modblo-cc__overlay,
  .modblo-cc__modal {
    position: fixed; z-index: 96;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility .25s, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .modblo-cc__overlay { inset: 0; background: rgba(0,0,0,.55); }
  .modblo-cc__modal {
    left: 50%; top: 50%; transform: translate(-50%, -45%) scale(.96);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--modblo-cc-bg, #fff); color: var(--modblo-cc-fg, #0b0b0c);
    border-radius: 18px;
    box-shadow: 0 32px 80px -24px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
  }
  .modblo-cc.is-modal-open .modblo-cc__overlay,
  .modblo-cc.is-modal-open .modblo-cc__modal { opacity: 1; visibility: visible; pointer-events: auto; }
  .modblo-cc.is-modal-open .modblo-cc__modal { transform: translate(-50%, -50%) scale(1); }

  .modblo-cc__modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 8%, transparent);
  }
  .modblo-cc__modal-h { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
  .modblo-cc__x {
    background: transparent; border: 0; color: inherit; cursor: pointer;
    width: 32px; height: 32px; border-radius: 6px;
    font-size: 22px; line-height: 1; opacity: .55;
  }
  .modblo-cc__x:hover { opacity: 1; background: color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 6%, transparent); }

  .modblo-cc__modal-body { padding: 16px 24px; flex: 1; overflow-y: auto; }
  .modblo-cc__modal-sub { font-size: 13px; opacity: .7; margin: 0 0 16px; line-height: 1.5; }

  .modblo-cc__cat {
    background: color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 3%, transparent);
    border-radius: 12px;
    padding: 14px 16px; margin-bottom: 8px;
  }
  .modblo-cc__cat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .modblo-cc__cat-h { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
  .modblo-cc__cat-sub { font-size: 12px; opacity: .65; margin: 0; line-height: 1.4; }
  .modblo-cc__locked {
    flex-shrink: 0; font-size: 11px; font-weight: 600; opacity: .5;
    text-transform: uppercase; letter-spacing: .08em;
  }

  .modblo-cc__switch { position: relative; flex-shrink: 0; cursor: pointer; }
  .modblo-cc__switch input { position: absolute; opacity: 0; pointer-events: none; }
  .modblo-cc__switch-track {
    display: block; width: 38px; height: 22px; border-radius: 999px;
    background: color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 14%, transparent);
    transition: background .2s; position: relative;
  }
  .modblo-cc__switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    transition: transform .2s cubic-bezier(.16,1,.3,1);
  }
  .modblo-cc__switch input:checked + .modblo-cc__switch-track {
    background: var(--modblo-cc-accent, #6366f1);
  }
  .modblo-cc__switch input:checked + .modblo-cc__switch-track .modblo-cc__switch-thumb {
    transform: translateX(16px);
  }

  .modblo-cc__modal-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid color-mix(in oklab, var(--modblo-cc-fg, #0b0b0c) 8%, transparent);
  }

  @media (max-width: 640px) {
    .modblo-cc__bar-inner { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
    .modblo-cc__bar-actions { justify-content: stretch; }
    .modblo-cc__bar-actions .modblo-cc__btn { flex: 1; padding: 11px; }
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-cc][data-section-id="{{ section.id }}"]');
    if (!root) return;

    var STORAGE_KEY = 'cbConsent';
    var revisitDays = parseInt(root.dataset.revisitDays, 10) || 180;
    var bar = root.querySelector('[data-modblo-cc-bar]');
    var modal = root.querySelector('[data-modblo-cc-modal]');
    var toggles = root.querySelectorAll('[data-modblo-cc-toggle]');

    function readConsent() {
      try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'); } catch (e) { return null; }
    }
    function writeConsent(consent) {
      var payload = {
        necessary: true,
        analytics: !!consent.analytics,
        marketing: !!consent.marketing,
        functional: !!consent.functional,
        ts: Date.now()
      };
      localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
      document.dispatchEvent(new CustomEvent('modblo-consent:updated', { detail: payload }));
      return payload;
    }

    function shouldShow() {
      var stored = readConsent();
      if (!stored) return true;
      var elapsed = (Date.now() - (stored.ts || 0)) / (1000 * 60 * 60 * 24);
      return elapsed >= revisitDays;
    }

    function showBar() {
      requestAnimationFrame(function () { root.classList.add('is-bar-shown'); });
    }
    function hideBar() { root.classList.remove('is-bar-shown'); }
    function openModal() {
      // Pre-populate toggles from current consent
      var stored = readConsent() || {};
      toggles.forEach(function (t) {
        t.checked = !!stored[t.dataset.cbCcToggle];
      });
      root.classList.add('is-modal-open');
      document.body.style.overflow = 'hidden';
    }
    function closeModal() {
      root.classList.remove('is-modal-open');
      document.body.style.overflow = '';
    }

    if (shouldShow()) {
      setTimeout(showBar, 600);
    } else {
      // Already consented — broadcast current state once on load so other scripts can gate
      document.dispatchEvent(new CustomEvent('modblo-consent:updated', { detail: readConsent() }));
    }

    root.querySelector('[data-modblo-cc-accept]').addEventListener('click', function () {
      writeConsent({ analytics: true, marketing: true, functional: true });
      hideBar(); closeModal();
    });
    root.querySelectorAll('[data-modblo-cc-reject]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        writeConsent({ analytics: false, marketing: false, functional: false });
        hideBar(); closeModal();
      });
    });
    root.querySelector('[data-modblo-cc-customize]').addEventListener('click', openModal);
    root.querySelector('[data-modblo-cc-close-modal]').addEventListener('click', closeModal);
    root.querySelector('[data-modblo-cc-overlay]').addEventListener('click', closeModal);
    root.querySelector('[data-modblo-cc-save]').addEventListener('click', function () {
      var consent = {};
      toggles.forEach(function (t) { consent[t.dataset.cbCcToggle] = t.checked; });
      writeConsent(consent);
      hideBar(); closeModal();
    });

    // Public API: window.cbConsent.open() to re-open from a footer link
    window.cbConsent = {
      open: openModal,
      get: readConsent,
      reset: function () { localStorage.removeItem(STORAGE_KEY); showBar(); }
    };

    // Auto-wire any [data-modblo-cc-trigger] on the page (use in footer)
    document.addEventListener('click', function (e) {
      var trigger = e.target.closest('[data-modblo-cc-trigger]');
      if (trigger) { e.preventDefault(); openModal(); }
    });
  })();
</script>

{% schema %}
{
  "name": "Cookie Consent",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Bar copy" },
    { "type": "text", "id": "bar_heading", "label": "Bar heading", "default": "We use cookies" },
    { "type": "textarea", "id": "bar_message", "label": "Bar message",
      "default": "We use cookies to make our store work, analyze traffic, and personalize content. You choose what runs." },
    { "type": "url", "id": "policy_url", "label": "Privacy policy link" },
    { "type": "header", "content": "Buttons" },
    { "type": "text", "id": "accept_label", "label": "Accept label", "default": "Accept all" },
    { "type": "text", "id": "reject_label", "label": "Reject label", "default": "Reject all" },
    { "type": "text", "id": "customize_label", "label": "Customize label", "default": "Customize" },
    { "type": "header", "content": "Modal" },
    { "type": "text", "id": "modal_heading", "label": "Modal heading", "default": "Cookie preferences" },
    { "type": "textarea", "id": "modal_sub", "label": "Modal subtext",
      "default": "Choose which categories of cookies you allow. You can change this anytime via the link in the footer." },
    { "type": "checkbox", "id": "show_functional", "label": "Show 'Functional' category", "default": false,
      "info": "Add this if you set first-party preference cookies (language, region, etc)." },
    { "type": "header", "content": "Behavior" },
    { "type": "range", "id": "revisit_days", "label": "Re-prompt after N days", "min": 30, "max": 365, "step": 30, "default": 180 },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Cookie Consent" }]
}
{% endschema %}