(function () {
    if (localStorage.getItem('cookie_consent')) return;

    const config = {
        languages: {
            nl: {
                flag: '🇳🇱',
                text: 'Wij gebruiken cookies om inhoud en advertenties te personaliseren, social mediafuncties aan te bieden en ons websiteverkeer te analyseren. U kunt uw voorkeuren beheren of op "Alles accepteren" klikken om akkoord te gaan met het gebruik van alle cookies.',
                acceptAll: 'Alles accepteren',
                onlyEssential: 'Alleen noodzakelijke',
                custom: 'Aangepast',
                save: 'Voorkeuren opslaan',
                manageBy: 'Beheer: ',
                privacy: 'Bekijk onze privacy policy',
            },
            en: {
                flag: '🇬🇧',
                text: 'We use cookies to personalize content and ads, provide social media features, and analyze our traffic. You can manage your preferences or click "Accept all" to agree to the use of all cookies.',
                acceptAll: 'Accept all',
                onlyEssential: 'Essential only',
                custom: 'Custom',
                save: 'Save preferences',
                manageBy: 'Managed by: ',
                privacy: 'View our privacy policy',
            },
        },
        defaultLang: 'nl',
        showPrivacyLink: true,
        privacyLink: 'https://wb-webdesign.com/privacy',
    };

    let currentLang = config.defaultLang;

    const style = document.createElement('style');
    style.innerHTML = `
    .cookie-banner-container {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      max-width: 90%;
      width: 640px;
      background-color: #f0f4f8;
      color: #858d82;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 1rem;
      border: 1px solid #858d82;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(42, 58, 75, 0.15);
      z-index: 9999;
      padding: 1.5rem;
      box-sizing: border-box;
    }
    .cookie-banner-text {
      margin-bottom: 1rem;
      line-height: 1.5;
    }
    .cookie-banner-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: flex-start;
    }
    .cookie-banner-button {
      padding: 0.6rem 1.2rem;
      background-color: #858d82;
      color: #fff;
      border: none;
      border-radius: 0.5rem;
      font-family: inherit;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .cookie-banner-button.secondary {
      background-color: #d1dce9;
      color: #2a3a4b;
    }
    .cookie-banner-footer {
      margin-top: 1rem;
      font-size: 0.85rem;
      color: #6b7a8f;
    }
    .cookie-banner-footer a {
      color: inherit;
      text-decoration: underline;
    }
    .cookie-preferences {
      margin-top: 1rem;
      display: none;
      flex-direction: column;
      gap: 0.3rem;
    }
    .cookie-preferences label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.95rem;
    }
    .language-switch-topright {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 10001;
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #858d82;
      cursor: pointer;
      font-family: inherit;
      padding: 0.25rem;
      line-height: 1;
    }
    @media (max-width: 600px) {
      .cookie-banner-container {
        font-size: 0.95rem;
        padding: 1rem;
        width: calc(100% - 2rem);
      }
      .cookie-banner-buttons {
        flex-direction: column;
        align-items: stretch;
      }
    }
  `;
    document.head.appendChild(style);

    const renderBanner = () => {
        const lang = config.languages[currentLang];
        const banner = document.createElement('div');
        banner.className = 'cookie-banner-container';

        banner.innerHTML = `
      <div class="cookie-banner-text">${lang.text}</div>
      <div class="cookie-banner-buttons">
        <button class="cookie-banner-button accept">${lang.acceptAll}</button>
        <button class="cookie-banner-button secondary essential">${lang.onlyEssential}</button>
        <button class="cookie-banner-button secondary more">${lang.custom}</button>
      </div>
      <div class="cookie-preferences">
        <label><input type="checkbox" data-type="functional" checked disabled> Functionele cookies (vereist)</label>
        <label><input type="checkbox" data-type="analytics"> Statistische cookies</label>
        <label><input type="checkbox" data-type="marketing"> Marketing cookies</label>
        <button class="cookie-banner-button save-preferences" style="margin-top: 0.5rem;">${lang.save}</button>
      </div>
      <div class="cookie-banner-footer">
        ${lang.manageBy}<a href="https://wb-webdesign.com" target="_blank" rel="noopener">WB Webdesign</a>
        ${config.showPrivacyLink ? ` &mdash; <a href="${config.privacyLink}" target="_blank">${lang.privacy}</a>` : ''}
      </div>
    `;

        document.body.appendChild(banner);

        // Button events
        banner.querySelector('.accept').onclick = () => {
            localStorage.setItem('cookie_consent', 'all');
            banner.remove();
        };

        banner.querySelector('.essential').onclick = () => {
            localStorage.setItem('cookie_consent', JSON.stringify({ functional: true }));
            banner.remove();
        };

        banner.querySelector('.more').onclick = () => {
            banner.querySelector('.cookie-preferences').style.display = 'flex';
        };

        banner.querySelector('.save-preferences').onclick = () => {
            const checkboxes = banner.querySelectorAll('.cookie-preferences input[type="checkbox"]');
            const consent = {};
            checkboxes.forEach(cb => {
                consent[cb.dataset.type] = cb.checked;
            });
            consent.functional = true;
            localStorage.setItem('cookie_consent', JSON.stringify(consent));
            banner.remove();
        };
    };

    // Language switch
    const langSwitch = document.createElement('button');
    langSwitch.className = 'language-switch-topright';
    langSwitch.textContent = config.languages[currentLang].flag;
    langSwitch.onclick = () => {
        currentLang = currentLang === 'nl' ? 'en' : 'nl';
        document.querySelector('.cookie-banner-container')?.remove();
        renderBanner();
        langSwitch.textContent = config.languages[currentLang].flag;
    };
    document.body.appendChild(langSwitch);

    // Render initial banner
    renderBanner();
})();