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

<div id="xc-form-embed" data-lang="<?= htmlspecialchars($lang, ENT_QUOTES, 'UTF-8') ?>">
  <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;
      border: 1px solid #e5e7eb;
      box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08);
    }

    #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="text"].xc-input,
    #xc-form-embed input[type="email"].xc-input,
    #xc-form-embed input[type="tel"].xc-input {
      width: 100%;
      height: 48px;
      padding: 0 14px;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      background: #fff;
      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%;
    }

    #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;
      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: #fff;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s 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: .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: #fff;
      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: #fff;
      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">Cadastre-se agora</h2>
      <p class="xc-form-subtitle">Preencha o formulário para continuar.</p>

      <div class="xc-success-message" id="xcSuccessMsg">Suas informações foram enviadas com sucesso.</div>
      <div class="xc-error-message" id="xcErrorMsg">Ocorreu um erro. Tente novamente.</div>

      <div class="xc-field">
        <label class="xc-label" for="xc_fname">Nome *</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">Sobrenome *</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">Número de telefone *</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="pt">
      <input type="hidden" name="source" value="">
      <input type="hidden" name="funnel" value="<?= htmlspecialchars($offername, ENT_QUOTES, 'UTF-8') ?>-p-pt">
      <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">
            Li os
            <a href="#" data-open="xcTermsModal">Termos e Condições</a>
            e a
            <a href="#" data-open="xcPrivacyModal">Política de Privacidade</a>
            e concordo com o tratamento dos meus dados pessoais.
          </span>
        </label>
      </div>

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

  <div id="xcThankyouModal" class="xc-modal-overlay" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="xc-modal-box">
      <h3>Obrigado pelo seu cadastro.</h3>
      <p>Você será redirecionado para nossa plataforma em breve.</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>Termos e Condições</h3>

      <h4>1. Âmbito de aplicação</h4>
      <p>Estes Termos e Condições regulam o uso deste formulário e o envio dos seus dados em relação ao seu cadastro ou solicitação.</p>

      <h4>2. Uso do formulário</h4>
      <p>Ao enviar o formulário, você confirma que as informações fornecidas são corretas e completas e que utiliza este formulário apenas para fins lícitos.</p>

      <h4>3. Serviços</h4>
      <p>Por meio deste formulário, seus dados podem ser tratados para gerenciar sua solicitação, entrar em contato com você ou fornecer informações e ofertas adequadas.</p>

      <h4>4. Obrigações do usuário</h4>
      <ul>
        <li>Fornecer informações verdadeiras e completas</li>
        <li>Não enviar dados de terceiros sem o consentimento deles</li>
        <li>Não utilizar o formulário de forma fraudulenta, abusiva ou ilegal</li>
      </ul>

      <h4>5. Responsabilidade</h4>
      <p>Não nos responsabilizamos por falhas técnicas, erros de transmissão ou indisponibilidade temporária, na medida permitida por lei.</p>

      <h4>6. Proteção de dados</h4>
      <p>Mais informações sobre o tratamento de dados pessoais podem ser encontradas em nossa Política de Privacidade.</p>

      <h4>7. Alterações</h4>
      <p>Reservamo-nos o direito de alterar estas condições a qualquer momento, com efeitos para o futuro.</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>Política de Privacidade</h3>

      <h4>1. Informações gerais</h4>
      <p>A proteção dos seus dados pessoais é importante para nós. Abaixo, informamos sobre a natureza, o alcance e a finalidade do tratamento dos seus dados em relação a este formulário.</p>

      <h4>2. Dados coletados</h4>
      <ul>
        <li>Nome e sobrenome</li>
        <li>Endereço de e-mail</li>
        <li>Número de telefone</li>
        <li>Endereço IP</li>
        <li>País, idioma e informações técnicas</li>
        <li>Parâmetros de rastreamento e campanha</li>
      </ul>

      <h4>3. Finalidade do tratamento</h4>
      <p>Os dados são tratados para gerenciar sua solicitação ou cadastro, entrar em contato com você, fornecer informações adequadas e atribuir tecnicamente os processos de marketing.</p>

      <h4>4. Base legal</h4>
      <p>O tratamento é realizado com base no seu consentimento e, quando aplicável, para a execução de medidas pré-contratuais e para a proteção de interesses legítimos.</p>

      <h4>5. Compartilhamento com terceiros</h4>
      <p>Seus dados podem ser compartilhados com prestadores de serviços técnicos, sistemas de CRM ou parceiros responsáveis, caso isso seja necessário para tratar sua solicitação.</p>

      <h4>6. Prazo de armazenamento</h4>
      <p>Seus dados serão armazenados apenas pelo tempo necessário para as finalidades indicadas ou pelo período exigido por obrigações legais.</p>

      <h4>7. Seus direitos</h4>
      <ul>
        <li>Acesso aos dados armazenados</li>
        <li>Correção de dados incorretos</li>
        <li>Exclusão dos seus dados</li>
        <li>Limitação do tratamento</li>
        <li>Revogação do consentimento com efeito para o futuro</li>
      </ul>

      <h4>8. Segurança dos dados</h4>
      <p>Adotamos medidas técnicas e organizacionais adequadas para proteger seus dados contra acesso não autorizado, perda ou uso indevido.</p>
    </div>
  </div>

  <script>
    (function () {
      function loadScript(src) {
        return new Promise(function(resolve, reject) {
          var existing = document.querySelector('script[data-xc-iti="1"]');
          if (existing && window.intlTelInput) {
            resolve();
            return;
          }
          var s = document.createElement('script');
          s.src = src;
          s.async = true;
          s.setAttribute('data-xc-iti', '1');
          s.onload = resolve;
          s.onerror = reject;
          document.head.appendChild(s);
        });
      }

      function loadCss(href) {
        if (document.querySelector('link[data-xc-iti-css="1"]')) return;
        var l = document.createElement('link');
        l.rel = 'stylesheet';
        l.href = href;
        l.setAttribute('data-xc-iti-css', '1');
        document.head.appendChild(l);
      }

      var wrapper = document.getElementById('xc-form-embed');
      if (!wrapper || wrapper.dataset.initialized === '1') return;
      wrapper.dataset.initialized = '1';

      loadCss('https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/css/intlTelInput.min.css');

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

      function fillHiddenFromURL(param, fieldName) {
        var urlParams = new URLSearchParams(window.location.search);
        var value = urlParams.get(param);
        var 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) {
        var modal = wrapper.querySelector('#' + id);
        if (modal) {
          modal.classList.add('xc-show');
          modal.setAttribute('aria-hidden', 'false');
          document.body.style.overflow = 'hidden';
        }
      }

      function closeModal(id) {
        var 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 = '';
        }
      });

      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);
        }
      }

      function initPhone() {
        if (!window.intlTelInput) {
          showError('Erro ao carregar o campo de telefone.');
          return;
        }

        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 || 'BR';
                callback((data.country_code || 'BR').toLowerCase());
              })
              .catch(function() {
                countryField.value = 'BR';
                callback('br');
              });
          }
        });
      }

      loadScript('https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/js/intlTelInput.min.js')
        .then(initPhone)
        .catch(function() {
          showError('Erro ao carregar o campo de telefone.');
        });

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

        if (!consentCheckbox.checked) {
          showError('Você deve aceitar os Termos e Condições e a Política de Privacidade.');
          return;
        }

        if (!iti) {
          showError('O campo de telefone ainda não está pronto. Tente novamente.');
          return;
        }

        var fullNumber = iti.getNumber();
        if (!fullNumber || !iti.isValidNumber()) {
          showError('Informe um número de telefone válido.');
          phoneInput.focus();
          return;
        }

        phoneInput.value = fullNumber;

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

        submitBtn.disabled = true;
        submitBtn.textContent = 'Processando...';

        fetch('https://tracking.spartas360.com/api/v3/integration?api_token=C6O5IgdsfRBXQbjNt4cKzNNAirCNPQArbyYX8nk3Okj1u274M1el2PV8Gn5D', {
          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 = 'Cadastrar';

          if (enableRedirect && response.autologin && response.autologin.startsWith('http')) {
            showThankYouAndRedirect(response.autologin);
          } else if (response.message || response.error) {
            var tmp = document.createElement('div');
            tmp.innerHTML = response.message || response.error;
            showError(tmp.textContent || tmp.innerText || 'Erro');
          } else {
            showThankYouAndRedirect(null);
          }
        })
        .catch(function() {
          submitBtn.disabled = false;
          submitBtn.textContent = 'Cadastrar';
          showError('Ocorreu um erro. Tente novamente.');
        });
      });
    })();
  </script>
</div>