(function () {
  // ================= KONFIG (zentral änderbar) ===================
  var CONFIG = {
    downloadUrl: "https://open.hiddentable.de",
    logoUrl: "https://i.ibb.co/1x4t2Bj/App-Logo-Hidden-Table.png",
    // QR-Code-Bild, das den Link https://open.hiddentable.de enthält
    qrUrl: "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://open.hiddentable.de"
  };
  // ===============================================================

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initWidget);
  } else {
    initWidget();
  }

  function initWidget() {
    if (!document.body) return;

    // Styles einfügen
    var style = document.createElement("style");
    style.textContent = `
      .ht-widget-container {
        position: fixed;
        bottom: 16px;
        left: 16px;
        z-index: 999999;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      .ht-widget-panel {
        position: absolute;
        bottom: 62px; /* über dem Button */
        left: 0;
        background: #ffffff;
        padding: 14px;
        border-radius: 22px;
        width: 220px;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
      }

      .ht-widget-panel.ht-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .ht-widget-panel-text {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 10px;
        color: #111827;
      }

      .ht-widget-qr {
        width: 60px;
        height: 60px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        border-radius: 0px;
      }

      .ht-widget-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        padding: 10px 16px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
      }

      .ht-widget-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
      }

      .ht-widget-logo {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        object-fit: contain;
        flex-shrink: 0;
      }

      .ht-widget-text-main {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        white-space: nowrap;
      }

      @media (max-width: 768px) {
        .ht-widget-container {
          left: 50%;
          transform: translateX(-50%);
        }

        .ht-widget-text-main {
          font-size: 13px;
        }
      }
    `;
    document.head.appendChild(style);

    // Container
    var container = document.createElement("div");
    container.className = "ht-widget-container";
    container.setAttribute("aria-label", "HiddenTable Widget");

    // Panel (über dem Button)
    var panel = document.createElement("div");
    panel.className = "ht-widget-panel";

    var panelText = document.createElement("div");
    panelText.className = "ht-widget-panel-text";
    panelText.textContent = "App laden und unsere Last-Minute-Plätze und Events buchen.";

    var qr = document.createElement("img");
    qr.className = "ht-widget-qr";
    qr.src = CONFIG.qrUrl;
    qr.alt = "HiddenTable QR-Code";

    panel.appendChild(panelText);
    panel.appendChild(qr);

    // Button
    var button = document.createElement("button");
    button.type = "button";
    button.className = "ht-widget-button";
    button.setAttribute("aria-expanded", "false");

    var logo = document.createElement("img");
    logo.className = "ht-widget-logo";
    logo.src = CONFIG.logoUrl;
    logo.alt = "HiddenTable Logo";

    var label = document.createElement("span");
    label.className = "ht-widget-text-main";
    label.textContent = "Buche spontane Restplätze";

    button.appendChild(logo);
    button.appendChild(label);

    container.appendChild(panel);
    container.appendChild(button);
    document.body.appendChild(container);

    function isMobile() {
      return window.matchMedia && window.matchMedia("(max-width: 768px)").matches;
    }

    button.addEventListener("click", function () {
      if (isMobile()) {
        // Mobile: direkt zur App / Deeplink
        window.location.href = CONFIG.downloadUrl;
      } else {
        // Desktop: QR-Panel togglen
        var isOpen = panel.classList.contains("ht-open");
        panel.classList.toggle("ht-open", !isOpen);
        button.setAttribute("aria-expanded", String(!isOpen));
      }
    });
  }
})();