components/cookieBanner.js

class CookieBanner extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .cookie-banner {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: #1f2937;
          color: white;
          padding: 1rem;
          z-index: 50;
          transform: translateY(0);
          transition: transform 0.3s ease;
        }
        .btn {
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          font-weight: 500;
          cursor: pointer;
          transition: background-color 0.2s;
        }
        .btn-primary {
          background-color: #3b82f6;
          color: white;
        }
        .btn-primary:hover {
          background-color: #2563eb;
        }
        .btn-secondary {
          background-color: transparent;
          color: #9ca3af;
          border: 1px solid #4b5563;
        }
        .btn-secondary:hover {
          background-color: #374151;
        }
      </style>
      <div class="cookie-banner">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex flex-col md:flex-row items-center justify-between gap-4">
            <p class="text-sm">
              Wij, en derde partijen, maken op onze website gebruik van cookies. We gebruiken cookies om ervoor te zorgen dat de website goed functioneert, om jouw voorkeuren op te slaan, om inzicht te verkrijgen in bezoekersgedrag, en voor marketing- en socialmedia-doeleinden.
            </p>
            <div class="flex gap-2">
              <button id="reject-cookies" class="btn btn-secondary text-sm">Weigeren</button>
              <button id="accept-cookies" class="btn btn-primary text-sm">Alles toestaan</button>
            </div>
          </div>
        </div>
      </div>
    `;
    
    this.shadowRoot.querySelector('#accept-cookies').addEventListener('click', () => {
      this.shadowRoot.querySelector('.cookie-banner').style.transform = 'translateY(100%)';
    });
    
    this.shadowRoot.querySelector('#reject-cookies').addEventListener('click', () => {
      this.shadowRoot.querySelector('.cookie-banner').style.transform = 'translateY(100%)';
    });
  }
}

customElements.define('cookie-banner', CookieBanner);