(async function () {
  const hostname = location.hostname.replace(/^www\./, '');
  const configUrl = `https://cookie.wb-webdesign.com/configs/${hostname}.json`;

  // fallback config als klantconfig ontbreekt
  async function fetchConfig() {
    try {
      const res = await fetch(configUrl);
      if (!res.ok) throw new Error();
      return await res.json();
    } catch {
      const fallback = await fetch('https://cookie.wb-webdesign.com/configs/fallback.json');
      return await fallback.json();
    }
  }

  const config = await fetchConfig();

  // maak banner-element
  const style = document.createElement("style");
  style.innerHTML = `
    #cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: white;
      border-top: 1px solid #ccc;
      color: #333;
      font-family: system-ui, sans-serif;
      padding: 20px;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 99999;
      display: none;
    }
    #cookie-banner p {
      margin: 0 0 10px;
    }
    #cookie-banner button {
      background: ${config.primaryColor};
      color: ${config.buttonTextColor};
      border: none;
      padding: 10px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }
    #cookie-banner a {
      color: ${config.primaryColor};
      text-decoration: underline;
      font-weight: bold;
    }
    #cookie-banner ul { margin-top: 10px; padding-left: 20px; }
  `;
  document.head.appendChild(style);

  const banner = document.createElement("div");
  banner.id = "cookie-banner";
  banner.innerHTML = `
    <p>${config.bannerText} <a href="${config.privacyLink}" target="_blank">Privacybeleid</a></p>
    <button id="accept-all">Alles accepteren</button>
    <button id="decline">Alleen noodzakelijke</button>
    <ul>
      ${config.details.map(d => `<li><strong>${d.name}:</strong> ${d.desc}</li>`).join("")}
    </ul>
  `;
  document.body.appendChild(banner);

  const consentGiven = document.cookie.includes("cookie_consent");
  if (!consentGiven) banner.style.display = "block";

  document.getElementById("accept-all").onclick = () => {
    document.cookie = "cookie_consent=all; path=/; max-age=31536000; SameSite=Lax";
    banner.remove();
  };
  document.getElementById("decline").onclick = () => {
    document.cookie = "cookie_consent=necessary; path=/; max-age=31536000; SameSite=Lax";
    banner.remove();
  };
})();