<?php
$offername = $_GET['offer'] ?? '';
$lang = $_POST['language'] ?? $_GET['language'] ?? 'de';
?>

<div id="xc-form-embed" data-lang="<?= htmlspecialchars($lang, ENT_QUOTES, 'UTF-8') ?>">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/css/intlTelInput.min.css">

  <style>
    #xc-form-embed,
    #xc-form-embed * {
      box-sizing: border-box;
    }

    #xc-form-embed {
      width: 100%;
      font-family: Arial, Helvetica, sans-serif;
      position: relative;
      isolation: isolate;
    }

    #xc-form-embed .xc-form-shell {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    #xc-form-embed .xc-form-container {
      background: #ffffff;
      width: 100%;
      max-width: 520px;
      padding: 28px;
      border-radius: 16px;
      box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
      border: 1px solid #e5e7eb;
    }

    #xc-form-embed .xc-form-title {
      margin: 0 0 8px;
      font-size: 28px;
      line-height: 1.2;
      font-weight: 700;
      color: #111827;
      text-align: center;
    }

    #xc-form-embed .xc-form-subtitle {
      margin: 0 0 22px;
      font-size: 14px;
      line-height: 1.6;
      color: #6b7280;
      text-align: center;
    }

    #xc-form-embed .xc-success-message,
    #xc-form-embed .xc-error-message {
      display: none;
      padding: 12px 14px;
      border-radius: 10px;
      margin-bottom: 16px;
      font-size: 14px;
      line-height: 1.5;
    }

    #xc-form-embed .xc-success-message {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    #xc-form-embed .xc-error-message {
      background: #fef2f2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }

    #xc-form-embed .xc-field {
      margin-bottom: 16px;
    }

    #xc-form-embed .xc-label {
      display: block;
      margin-bottom: 7px;
      font-size: 14px;
      font-weight: 600;
      color: #111827;
    }

    #xc-form-embed .xc-input,
    #xc-form-embed input[type="tel"].xc-input,
    #xc-form-embed input[type="text"].xc-input,
    #xc-form-embed input[type="email"].xc-input {
      width: 100%;
      height: 48px;
      padding: 0 14px;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      background: #ffffff;
      font-size: 15px;
      color: #111827;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    #xc-form-embed .xc-input:focus {
      border-color: #dc2626;
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
    }

    #xc-form-embed .iti {
      width: 100%;
    }

    /* Fix missing flags */
    #xc-form-embed .iti__flag {
      background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/img/flags.png") !important;
      background-repeat: no-repeat !important;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      #xc-form-embed .iti__flag {
        background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/img/flags@2x.png") !important;
        background-size: 5652px 15px !important;
      }
    }

    #xc-form-embed .xc-consent-box {
      margin-top: 8px;
      margin-bottom: 8px;
      padding: 14px 14px 10px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fafafa;
    }

    #xc-form-embed .xc-consent-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0;
      font-size: 13px;
      line-height: 1.7;
      color: #374151;
      font-weight: 400;
      cursor: pointer;
    }

    #xc-form-embed .xc-consent-label input[type="checkbox"] {
      margin-top: 3px;
      flex: 0 0 auto;
    }

    #xc-form-embed .xc-consent-text a {
      color: #dc2626;
      text-decoration: none;
      font-weight: 700;
    }

    #xc-form-embed .xc-consent-text a:hover {
      text-decoration: underline;
    }

    #xc-form-embed .xc-submit-btn {
      width: 100%;
      height: 50px;
      margin-top: 18px;
      border: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      color: #ffffff;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
      box-shadow: 0 10px 20px rgba(220, 38, 38, 0.18);
    }

    #xc-form-embed .xc-submit-btn:hover {
      transform: translateY(-1px);
      opacity: 0.98;
    }

    #xc-form-embed .xc-submit-btn:disabled {
      opacity: .7;
      cursor: not-allowed;
      transform: none;
    }

    #xc-form-embed .xc-modal-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(17,24,39,.58);
      z-index: 999999;
    }

    #xc-form-embed .xc-modal-overlay.xc-show {
      display: flex;
    }

    #xc-form-embed .xc-modal-box {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border-radius: 18px;
      padding: 28px 24px;
      box-shadow: 0 24px 60px rgba(0,0,0,.25);
      text-align: center;
    }

    #xc-form-embed .xc-modal-box h3 {
      margin: 0 0 8px;
      font-size: 22px;
      color: #111827;
    }

    #xc-form-embed .xc-modal-box p {
      margin: 0;
      font-size: 15px;
      line-height: 1.6;
      color: #4b5563;
    }

    #xc-form-embed .xc-spinner {
      width: 42px;
      height: 42px;
      margin: 18px auto 0;
      border: 4px solid #e5e7eb;
      border-top-color: #dc2626;
      border-radius: 50%;
      animation: xc-spin 1s linear infinite;
    }

    @keyframes xc-spin {
      to { transform: rotate(360deg); }
    }

    #xc-form-embed .xc-legal-modal {
      width: 100%;
      max-width: 760px;
      max-height: 85vh;
      overflow-y: auto;
      background: #ffffff;
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 24px 60px rgba(0,0,0,.25);
      position: relative;
    }

    #xc-form-embed .xc-legal-modal h3 {
      margin: 0 0 16px;
      font-size: 24px;
      color: #111827;
    }

    #xc-form-embed .xc-legal-modal h4 {
      margin: 18px 0 8px;
      font-size: 16px;
      color: #111827;
    }

    #xc-form-embed .xc-legal-modal p,
    #xc-form-embed .xc-legal-modal li {
      font-size: 14px;
      line-height: 1.7;
      color: #374151;
    }

    #xc-form-embed .xc-legal-modal ul {
      padding-left: 20px;
      margin: 8px 0;
    }

    #xc-form-embed .xc-close-btn {
      position: absolute;
      top: 12px;
      right: 14px;
      border: 0;
      background: transparent;
      color: #6b7280;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      margin: 0;
      width: auto;
      height: auto;
      box-shadow: none;
    }

    #xc-form-embed .xc-close-btn:hover {
      color: #111827;
    }

    #xc-form-embed #xc-pixelContainer {
      width: 0;
      height: 0;
      overflow: hidden;
    }

    @media (max-width: 640px) {
      #xc-form-embed .xc-form-container {
        padding: 22px 16px;
        border-radius: 14px;
      }

      #xc-form-embed .xc-form-title {
        font-size: 24px;
      }

      #xc-form-embed .xc-legal-modal,
      #xc-form-embed .xc-modal-box {
        padding: 20px 16px;
        border-radius: 14px;
      }
    }
  </style>

  <div class="xc-form-shell">
    <form class="xc-form-container" id="xcCrmForm" method="post" autocomplete="off" novalidate>
      <h2 class="xc-form-title">Jetzt registrieren</h2>
      <p class="xc-form-subtitle">Bitte f&uuml;llen Sie das Formular aus, um fortzufahren.</p>

      <div class="xc-success-message" id="xcSuccessMsg">Ihre Informationen wurden erfolgreich &uuml;bermittelt.</div>
      <div class="xc-error-message" id="xcErrorMsg">Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.</div>

      <div class="xc-field">
        <label class="xc-label" for="xc_fname">Vorname *</label>
        <input class="xc-input" type="text" id="xc_fname" name="fname" required>
      </div>

      <div class="xc-field">
        <label class="xc-label" for="xc_lname">Nachname *</label>
        <input class="xc-input" type="text" id="xc_lname" name="lname" required>
      </div>

      <div class="xc-field">
        <label class="xc-label" for="xc_email">E-Mail *</label>
        <input class="xc-input" type="email" id="xc_email" name="email" required>
      </div>

      <div class="xc-field">
        <label class="xc-label" for="xc_fullphone">Telefonnummer *</label>
        <input class="xc-input" type="tel" id="xc_fullphone" name="fullphone" required>
      </div>

      <input type="hidden" name="ip" id="xc_ip">
      <input type="hidden" name="country" id="xc_country">
      <input type="hidden" name="language" value="de">
      <input type="hidden" name="source" value="">
      <input type="hidden" name="funnel" value="<?= htmlspecialchars($offername, ENT_QUOTES, 'UTF-8') ?>-p-de">
      <input type="hidden" name="link_id" value="">
      <input type="hidden" name="click_id" value="">
      <input type="hidden" name="utm_campaign" value="">
      <input type="hidden" name="personal_consent" value="1">

      <div class="xc-consent-box">
        <label class="xc-consent-label" for="xc_personal_consent_checkbox">
          <input type="checkbox" id="xc_personal_consent_checkbox" required>
          <span class="xc-consent-text">
            Ich habe die
            <a href="#" data-open="xcTermsModal">Allgemeinen Gesch&auml;ftsbedingungen</a>
            und die
            <a href="#" data-open="xcPrivacyModal">Datenschutzerkl&auml;rung</a>
            gelesen und erkl&auml;re mich mit der Verarbeitung meiner personenbezogenen Daten einverstanden.
          </span>
        </label>
      </div>

      <button type="submit" class="xc-submit-btn" id="xcSubmitBtn">Registrieren</button>
    </form>
  </div>

  <div id="xcThankyouModal" class="xc-modal-overlay" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="xc-modal-box">
      <h3>Vielen Dank f&uuml;r Ihre Anmeldung.</h3>
      <p>Sie werden in K&uuml;rze zu unserer Plattform weitergeleitet.</p>
      <div class="xc-spinner"></div>
      <div id="xc-pixelContainer"></div>
    </div>
  </div>

  <div id="xcTermsModal" class="xc-modal-overlay" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="xc-legal-modal">
      <button type="button" class="xc-close-btn" data-close="xcTermsModal">&times;</button>
      <h3>Allgemeine Gesch&auml;ftsbedingungen</h3>

      <h4>1. Geltungsbereich</h4>
      <p>Diese Allgemeinen Gesch&auml;ftsbedingungen regeln die Nutzung dieses Formulars sowie die &Uuml;bermittlung Ihrer Daten im Zusammenhang mit Ihrer Registrierung oder Anfrage.</p>

      <h4>2. Nutzung des Formulars</h4>
      <p>Mit dem Absenden des Formulars best&auml;tigen Sie, dass Ihre Angaben korrekt und vollst&auml;ndig sind und dass Sie dieses Formular nur f&uuml;r rechtm&auml;&szlig;ige Zwecke nutzen.</p>

      <h4>3. Leistungen</h4>
      <p>&Uuml;ber das Formular k&ouml;nnen Ihre Daten zur Bearbeitung Ihrer Anfrage, zur Kontaktaufnahme oder zur Bereitstellung passender Informationen und Angebote verarbeitet werden.</p>

      <h4>4. Pflichten des Nutzers</h4>
      <ul>
        <li>Wahrheitsgem&auml;&szlig;e Angaben machen</li>
        <li>Keine Daten Dritter ohne Zustimmung &uuml;bermitteln</li>
        <li>Das Formular nicht missbr&auml;uchlich oder rechtswidrig verwenden</li>
      </ul>

      <h4>5. Haftung</h4>
      <p>Wir &uuml;bernehmen keine Haftung f&uuml;r technische Ausf&auml;lle, &Uuml;bertragungsfehler oder vor&uuml;bergehende Nichtverf&uuml;gbarkeit, soweit gesetzlich zul&auml;ssig.</p>

      <h4>6. Datenschutz</h4>
      <p>Weitere Informationen zur Verarbeitung personenbezogener Daten finden Sie in der Datenschutzerkl&auml;rung.</p>

      <h4>7. &Auml;nderungen</h4>
      <p>Wir behalten uns vor, diese Bedingungen jederzeit mit Wirkung f&uuml;r die Zukunft anzupassen.</p>
    </div>
  </div>

  <div id="xcPrivacyModal" class="xc-modal-overlay" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="xc-legal-modal">
      <button type="button" class="xc-close-btn" data-close="xcPrivacyModal">&times;</button>
      <h3>Datenschutzerkl&auml;rung</h3>

      <h4>1. Allgemeine Hinweise</h4>
      <p>Der Schutz Ihrer personenbezogenen Daten ist uns wichtig. Nachfolgend informieren wir Sie &uuml;ber Art, Umfang und Zweck der Verarbeitung Ihrer Daten im Rahmen dieses Formulars.</p>

      <h4>2. Erhobene Daten</h4>
      <ul>
        <li>Vorname und Nachname</li>
        <li>E-Mail-Adresse</li>
        <li>Telefonnummer</li>
        <li>IP-Adresse</li>
        <li>Land, Sprache und technische Informationen</li>
        <li>Tracking- und Kampagnenparameter</li>
      </ul>

      <h4>3. Zweck der Verarbeitung</h4>
      <p>Die Daten werden verarbeitet, um Ihre Anfrage oder Registrierung zu bearbeiten, Sie zu kontaktieren, passende Informationen bereitzustellen und Marketingprozesse technisch zuzuordnen.</p>

      <h4>4. Rechtsgrundlage</h4>
      <p>Die Verarbeitung erfolgt auf Grundlage Ihrer Einwilligung sowie, soweit anwendbar, zur Durchf&uuml;hrung vorvertraglicher Ma&szlig;nahmen und zur Wahrung berechtigter Interessen.</p>

      <h4>5. Weitergabe an Dritte</h4>
      <p>Ihre Daten k&ouml;nnen an technische Dienstleister, CRM-Systeme oder zust&auml;ndige Partner weitergegeben werden, soweit dies zur Bearbeitung Ihrer Anfrage erforderlich ist.</p>

      <h4>6. Speicherdauer</h4>
      <p>Ihre Daten werden nur so lange gespeichert, wie dies f&uuml;r die genannten Zwecke erforderlich ist oder gesetzliche Aufbewahrungspflichten bestehen.</p>

      <h4>7. Ihre Rechte</h4>
      <ul>
        <li>Auskunft &uuml;ber gespeicherte Daten</li>
        <li>Berichtigung unrichtiger Daten</li>
        <li>L&ouml;schung Ihrer Daten</li>
        <li>Einschr&auml;nkung der Verarbeitung</li>
        <li>Widerruf einer Einwilligung mit Wirkung f&uuml;r die Zukunft</li>
      </ul>

      <h4>8. Datensicherheit</h4>
      <p>Wir treffen angemessene technische und organisatorische Ma&szlig;nahmen, um Ihre Daten vor unbefugtem Zugriff, Verlust oder Missbrauch zu sch&uuml;tzen.</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/js/intlTelInput.min.js"></script>
  <script>
    (function () {
      const wrapper = document.getElementById('xc-form-embed');
      if (!wrapper || wrapper.dataset.initialized === '1') return;
      wrapper.dataset.initialized = '1';

      let enableRedirect = true;

      const form = wrapper.querySelector('#xcCrmForm');
      const phoneInput = wrapper.querySelector('#xc_fullphone');
      const successMsg = wrapper.querySelector('#xcSuccessMsg');
      const errorMsg = wrapper.querySelector('#xcErrorMsg');
      const submitBtn = wrapper.querySelector('#xcSubmitBtn');
      const consentCheckbox = wrapper.querySelector('#xc_personal_consent_checkbox');
      const pixelContainer = wrapper.querySelector('#xc-pixelContainer');
      const ipField = wrapper.querySelector('#xc_ip');
      const countryField = wrapper.querySelector('#xc_country');

      function fillHiddenFromURL(param, fieldName) {
        const urlParams = new URLSearchParams(window.location.search);
        const value = urlParams.get(param);
        const field = form.querySelector('[name="' + fieldName + '"]');
        if (value && field) field.value = value;
      }

      ['source', 'link_id', 'click_id', 'utm_campaign', 'funnel'].forEach(function(param) {
        fillHiddenFromURL(param, param);
      });

      function openModal(id) {
        const modal = wrapper.querySelector('#' + id);
        if (modal) {
          modal.classList.add('xc-show');
          modal.setAttribute('aria-hidden', 'false');
          document.body.style.overflow = 'hidden';
        }
      }

      function closeModal(id) {
        const modal = wrapper.querySelector('#' + id);
        if (modal) {
          modal.classList.remove('xc-show');
          modal.setAttribute('aria-hidden', 'true');
          document.body.style.overflow = '';
        }
      }

      wrapper.querySelectorAll('[data-open]').forEach(function(link) {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          openModal(this.getAttribute('data-open'));
        });
      });

      wrapper.querySelectorAll('[data-close]').forEach(function(btn) {
        btn.addEventListener('click', function() {
          closeModal(this.getAttribute('data-close'));
        });
      });

      wrapper.querySelectorAll('.xc-modal-overlay').forEach(function(overlay) {
        overlay.addEventListener('click', function(e) {
          if (e.target === overlay) {
            overlay.classList.remove('xc-show');
            overlay.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
          }
        });
      });

      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          wrapper.querySelectorAll('.xc-modal-overlay.xc-show').forEach(function(modal) {
            modal.classList.remove('xc-show');
            modal.setAttribute('aria-hidden', 'true');
          });
          document.body.style.overflow = '';
        }
      });

      const iti = window.intlTelInput(phoneInput, {
        initialCountry: "auto",
        separateDialCode: true,
        nationalMode: false,
        autoPlaceholder: "aggressive",
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/js/utils.js",
        geoIpLookup: function(callback) {
          fetch("https://api.ipstack.com/check?access_key=061a864446c4fc350c3a20c2b0405122")
            .then(function(response) { return response.json(); })
            .then(function(data) {
              ipField.value = data.ip || "";
              countryField.value = data.country_code || "DE";
              callback((data.country_code || "DE").toLowerCase());
            })
            .catch(function() {
              countryField.value = "DE";
              callback("de");
            });
        }
      });

      const crm_api_url = "https://tracking.spartas360.com/api/v3/integration?api_token=mBL1aVwCtWptaNsWoFZ7wOFs0Nznq69fX2irnznsfwgV580stoJhFASdiobu";

      function showError(message) {
        successMsg.style.display = 'none';
        errorMsg.textContent = message;
        errorMsg.style.display = 'block';
      }

      function clearMessages() {
        successMsg.style.display = 'none';
        errorMsg.style.display = 'none';
      }

      function showThankYouAndRedirect(url) {
        pixelContainer.innerHTML = '<iframe src="pixel.html' + window.location.search + '" width="0" height="0" style="border:0; visibility:hidden;"></iframe>';
        openModal('xcThankyouModal');

        if (enableRedirect && url && typeof url === 'string' && url.startsWith('http')) {
          setTimeout(function () {
            window.location.href = url;
          }, 5000);
        }
      }

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        clearMessages();

        if (!consentCheckbox.checked) {
          showError('Bitte akzeptieren Sie die Allgemeinen Gesch\u00e4ftsbedingungen und die Datenschutzerkl\u00e4rung.');
          return;
        }

        const fullNumber = iti.getNumber();
        if (!fullNumber || !iti.isValidNumber()) {
          showError('Bitte geben Sie eine g\u00fcltige Telefonnummer ein.');
          phoneInput.focus();
          return;
        }

        phoneInput.value = fullNumber;

        const formData = new FormData(form);
        const data = {};
        formData.forEach(function(val, key) {
          data[key] = val;
        });

        submitBtn.disabled = true;
        submitBtn.textContent = 'Wird verarbeitet...';

        fetch(crm_api_url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        })
        .then(function(res) { return res.json(); })
        .then(function(response) {
          submitBtn.disabled = false;
          submitBtn.textContent = 'Registrieren';

          if (enableRedirect && response.autologin && response.autologin.startsWith('http')) {
            showThankYouAndRedirect(response.autologin);
          } else if (response.message || response.error) {
            const tmp = document.createElement('div');
            tmp.innerHTML = response.message || response.error;
            showError(tmp.textContent || tmp.innerText || 'Fehler');
          } else {
            showThankYouAndRedirect(null);
          }
        })
        .catch(function() {
          submitBtn.disabled = false;
          submitBtn.textContent = 'Registrieren';
          showError('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.');
        });
      });
    })();
  </script>
</div>