
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Análise de Currículo e Vaga</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <style>
        :root {
          --primary: #4f46e5;
          --primary-dark: #4338ca;
          --success: #22c55e;
          --warning: #eab308;
          --gray-50: #f9fafb;
          --gray-100: #f3f4f6;
          --gray-200: #e5e7eb;
          --gray-300: #d1d5db;
          --gray-700: #374151;
          --gray-800: #1f2937;
        }
    
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    
        body {
          font-family: 'Inter', sans-serif;
          background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
          min-height: 100vh;
          padding: 2rem;
          color: var(--gray-800);
        }
    
        .container {
          max-width: 800px;
          margin: 0 auto;
        }
        .header {
          text-align: center;
          margin-bottom: 2.5rem;
        }
    
        .header h1 {
          font-size: 2.25rem;
          font-weight: 700;
          color: var(--gray-800);
          margin-bottom: 0.75rem;
        }
    
        .header p {
          color: var(--gray-700);
          font-size: 1.125rem;
        }
    
        .card {
          background: white;
          border-radius: 1rem;
          padding: 1.5rem;
          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
                      0 2px 4px -2px rgb(0 0 0 / 0.1);
          margin-bottom: 1.5rem;
          transition: all 0.3s ease;
        }
    
        .card:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
                      0 4px 6px -4px rgb(0 0 0 / 0.1);
        }
    
        .input-group {
          margin-bottom: 1.5rem;
        }
    
        .input-header {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 0.75rem;
        }
    
        .input-header i {
          font-size: 1.5rem;
          color: var(--primary);
        }
    
        .input-header label {
          font-weight: 600;
          color: var(--gray-700);
          font-size: 1.125rem;
        }
    
        textarea {
          width: 100%;
          padding: 0.75rem;
          border: 2px solid var(--gray-200);
          border-radius: 0.75rem;
          font-size: 1rem;
          font-family: 'Inter', sans-serif;
          resize: vertical;
          transition: all 0.2s ease;
        }
    
        textarea:focus {
          outline: none;
          border-color: var(--primary);
          box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
    
        button {
          width: 100%;
          padding: 1rem;
          background: var(--primary);
          color: white;
          border: none;
          border-radius: 0.75rem;
          font-size: 1.125rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
        }
    
        button:hover {
          background: var(--primary-dark);
        }
    
        button i {
          font-size: 1.25rem;
        }
    
        .result-card {
          display: none;
          animation: slideIn 0.3s ease-out;
        }

        .result-card.active {
          display: block;
        }
    
        .percentage {
          text-align: center;
          margin-bottom: 1.5rem;
        }
    
        .percentage-circle {
          width: 150px;
          height: 150px;
          margin: 0 auto;
          position: relative;
          background: conic-gradient(var(--primary) var(--percentage), var(--gray-100) 0);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .percentage-circle::before {
          content: '';
          position: absolute;
          width: 110px;
          height: 110px;
          background: white;
          border-radius: 50%;
        }
    
        .percentage-value {
          position: relative;
          font-size: 2rem;
          font-weight: 700;
          color: var(--primary);
        }
    
        .result-section {
          background: var(--gray-50);
          border-radius: 0.75rem;
          padding: 1rem;
          margin-bottom: 1rem;
        }
    
        .result-section h3 {
          font-size: 1rem;
          font-weight: 600;
          color: var(--gray-700);
          margin-bottom: 0.5rem;
        }
    
        .tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
        }
    
        .tag {
          background: white;
          padding: 0.25rem 0.75rem;
          border-radius: 1rem;
          font-size: 0.875rem;
          border: 1px solid var(--gray-200);
        }
    
        /* Popup Geral */
        .popup-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(4px);
          z-index: 1000;
          animation: fadeIn 0.3s ease-out;
        }
    
        .popup {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: white;
          padding: 2rem;
          border-radius: 1rem;
          max-width: 90%;
          width: 400px;
          text-align: center;
          box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
                      0 8px 10px -6px rgb(0 0 0 / 0.1);
          animation: popIn 0.3s ease-out;
        }
    
        .popup h2 {
          color: var(--gray-800);
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }
    
        .popup p {
          color: var(--gray-700);
          margin-bottom: 1.5rem;
          line-height: 1.5;
        }
    
        .popup-buttons {
          display: flex;
          gap: 1rem;
          justify-content: center;
          flex-wrap: wrap;
        }
    
        .popup-button {
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }
    
        .popup-button.primary {
          background: var(--primary);
          color: white;
          border: none;
        }
    
        .popup-button.primary:hover {
          background: var(--primary-dark);
        }
    
        .popup-button.secondary {
          background: var(--gray-100);
          color: var(--gray-700);
          border: 1px solid var(--gray-200);
        }
        .popup-button.secondary:hover {
          background: var(--gray-200);
        }
    
        /* New styles for loading spinner */
        .loading-spinner {
            display: none;
            width: 30px;
            height: 30px;
            border: 3px solid var(--gray-200);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

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

        /* Tutorial popup styles */
        .tutorial-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            max-width: 90%;
            width: 500px;
            z-index: 1002;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
                        0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        .tutorial-step {
            display: none;
            text-align: center;
        }

        .tutorial-step.active {
            display: block;
            animation: fadeIn 0.3s ease-out;
        }

        .tutorial-step img {
            max-width: 100%;
            height: auto;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
        }

        .tutorial-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
        }

        .disclaimer {
            background: var(--gray-50);
            border-radius: 0.75rem;
            padding: 1rem;
            margin-top: 1.5rem;
            font-size: 0.875rem;
            color: var(--gray-700);
            border: 1px solid var(--gray-200);
        }

        /* Popup para Token */
        #popupOverlayToken {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(4px);
          z-index: 1001; /* um nível acima do outro popup */
          animation: fadeIn 0.3s ease-out;
        }
    
        #popupToken {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: white;
          padding: 2rem;
          border-radius: 1rem;
          max-width: 90%;
          width: 400px;
          text-align: center;
          box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
                      0 8px 10px -6px rgb(0 0 0 / 0.1);
          animation: popIn 0.3s ease-out;
          max-height: 80vh;
          overflow-y: auto;
        }
    
        #popupToken h2 {
          color: var(--gray-800);
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }
    
        #popupToken p {
          color: var(--gray-700);
          margin-bottom: 1rem;
          line-height: 1.5;
        }
    
        #tokenInput {
          width: 100%;
          padding: 0.75rem;
          margin-bottom: 1rem;
          border: 2px solid var(--gray-200);
          border-radius: 0.75rem;
          font-size: 1rem;
          font-family: 'Inter', sans-serif;
          transition: all 0.2s ease;
        }
    
        #tokenInput:focus {
          outline: none;
          border-color: var(--primary);
          box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
        }
    
        /* Botão "X" para fechar popup do Token */
        .close-token-popup {
          position: fixed;
          top: 1px;
          width: 10px;
          height: 10px;
          right: 0px;
          font-size: 1.2rem;
          color: var(--gray-700);
          background: transparent;
          border: none;
          cursor: pointer;
        }
    
        .close-token-popup:hover {
          color: var(--primary-dark);
        }
    
        /* Animações */
        @keyframes fadeIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
    
        @keyframes popIn {
          from {
            opacity: 0;
            transform: translate(-50%, -45%);
          }
          to {
            opacity: 1;
            transform: translate(-50%, -50%);
          }
        }
    
        @keyframes slideIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
    
        @media (max-width: 640px) {
          body {
            padding: 1rem;
          }
    
          .header h1 {
            font-size: 1.75rem;
          }
    
          .card {
            padding: 1rem;
          }
        }
    </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Análise de Compatibilidade Curricular</h1>
      <p>Compare seu currículo com a vaga e descubra sua compatibilidade</p>
    </div>
  
    <div class="card">
      <div class="input-group">
        <div class="input-header">
          <i class='bx bx-briefcase'></i>
          <label for="vaga">Descrição da Vaga</label>
        </div>
        <textarea id="vaga" rows="8" placeholder="Cole aqui a descrição completa da vaga..."></textarea>
      </div>
  
      <div class="input-group">
        <div class="input-header">
          <i class='bx bx-file'></i>
          <label for="curriculo">Seu Currículo</label>
        </div>
        <textarea id="curriculo" rows="8" placeholder="Cole aqui o texto do seu currículo..."></textarea>
      </div>
  
      <div class="input-group">
        <div class="input-header">
          <i class='bx bx-minus-circle'></i>
          <label for="ignore">Palavras a Ignorar</label>
        </div>
        <textarea id="ignore" rows="3" placeholder="Digite palavras adicionais a serem ignoradas, separadas por vírgula..."></textarea>
      </div>
  
      <button id="calcular">
        <i class='bx bx-analyse'></i>
        Analisar Compatibilidade
      </button>
    </div>
  
    <div id="resultCard" class="card result-card">
      <div class="percentage">
        <div class="percentage-circle">
          <span class="percentage-value">0%</span>
        </div>
      </div>
  
      <div class="result-section">
        <h3>Palavras em Comum</h3>
        <div id="commonWords" class="tags"></div>
      </div>
  
      <div class="result-section">
        <h3>Sugestões de Palavras-chave</h3>
        <div id="suggestions" class="tags"></div>
      </div>
    </div>
  
    <!-- Botão adicional para abrir popup de geração de currículo personalizado -->
    <div class="card">
      <button onclick="openTokenPopup()">
        <i class='bx bx-magic-wand'></i>
        Gerar Currículo Personalizado
      </button>
    </div>
  </div>
  
  <!-- Popup original de upsell -->
  <div id="popupOverlay" class="popup-overlay">
    <div class="popup">
      <h2>Aumente sua Compatibilidade!</h2>
      <p>
        Quer que geremos um currículo otimizado para esta vaga? 
        Nosso sistema irá criar um currículo profissional que 
        aumentará significativamente sua taxa de compatibilidade.
      </p>
      <div class="popup-buttons">
        <stripe-buy-button
          buy-button-id="buy_btn_1QfPQNQKl4c0JEUegvCU3pC0"
          publishable-key="pk_test_51QfOlsQKl4c0JEUeSqWYa4tVAiFUp791PkerjIRI0NAcCPduafTxjZbWAPtCExIiduo4D9zNIlBF5DuOVp9X7hIf00m1tHuByU">
        </stripe-buy-button>
        <button class="popup-button secondary" onclick="closePopup()">
          <i class='bx bx-x'></i>
          Não, obrigado
        </button>
      </div>
    </div>
  </div>

  <!-- Popup para inserir token e gerar currículo personalizado -->
  <div id="popupOverlayToken">
    <div id="popupToken">
      <button class="close-token-popup" onclick="closeTokenPopup()">
          <i class='bx bx-x'></i>
      </button>

      <h2>Gerar Currículo Personalizado</h2>
      <p>Informe seu token para geração do currículo personalizado.</p>
      <input type="text" id="tokenInput" placeholder="Token de geração" />
      
      <div class="loading-spinner" id="tokenLoadingSpinner"></div>

      <div class="popup-buttons">
          <button class="popup-button primary" id="sendTokenButton" onclick="sendToken()">
              <i class='bx bx-send'></i>
              Enviar Token
          </button>
          <stripe-buy-button
              buy-button-id="buy_btn_1QfPQNQKl4c0JEUegvCU3pC0"
              publishable-key="pk_test_51QfOlsQKl4c0JEUeSqWYa4tVAiFUp791PkerjIRI0NAcCPduafTxjZbWAPtCExIiduo4D9zNIlBF5DuOVp9X7hIf00m1tHuByU">
          </stripe-buy-button>
      </div>

      <div class="disclaimer">
          <i class='bx bx-info-circle'></i>
          Não armazenamos nenhum dado em nossos servidores. Todas as análises são feitas em tempo real e os dados são descartados após o processamento.
      </div>
    </div>
  </div>

  <!-- Tutorial Popup -->
  <div id="tutorialOverlay" class="popup-overlay">
      <div class="tutorial-popup">
          <!-- Passo 1 -->
          <div class="tutorial-step active" data-step="1">
              <h2>Bem-vindo ao Analisador de Compatibilidade!</h2>
              <p>Vamos te mostrar como usar o sistema em alguns passos simples.</p>
              <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80" alt="Welcome">
          </div>

          <!-- Passo 2 -->
          <div class="tutorial-step" data-step="2">
              <h2>Passo 1: Descrição da Vaga</h2>
              <p>Cole a descrição completa da vaga, incluindo responsabilidades, requisitos e diferenciais no primeiro campo.</p>
              <img src="https://images.unsplash.com/photo-1586282391129-76a6df230234?auto=format&fit=crop&w=800&q=80" alt="Job Description">
          </div>

          <!-- Passo 3 (NOVO) -->
          <div class="tutorial-step" data-step="5">
              <h2>Ferramenta Gratuita</h2>
              <p>A ferramenta é gratuita e pode ser usada à vontade! Caso queira que geremos um currículo personalizado bem aderente à vaga, o valor é de R$ 6,99 por curriculo.</p>
              <img src="https://images.unsplash.com/photo-1500496733680-167c3db69389?q=80&w=1941&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Ferramenta Gratuita">
          </div>

          <!-- Passo 4 (antigo 3) -->
          <div class="tutorial-step" data-step="3">
              <h2>Passo 2: Seu Currículo</h2>
              <p>Cole seu currículo completo no segundo campo para análise.</p>
              <img src="https://images.unsplash.com/photo-1586281380349-632531db7ed4?auto=format&fit=crop&w=800&q=80" alt="Resume">
          </div>

          <!-- Passo 5 (antigo 4) -->
          <div class="tutorial-step" data-step="4">
              <h2>Passo 3: Análise</h2>
              <p>Clique em "Analisar Compatibilidade" para ver o quanto seu currículo está alinhado com a vaga!</p>
              <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80" alt="Analysis">
          </div>

          <div class="tutorial-navigation">
              <button class="popup-button secondary" onclick="previousStep()">Anterior</button>
              <button class="popup-button primary" onclick="nextStep()">Próximo</button>
          </div>
      </div>
  </div>

  <script async src="https://js.stripe.com/v3/buy-button.js"></script>
  <script>
      const stopWords = [
        "a","à","ao","aos","as","às","de","da","das","do","dos","acoes","apoiar","quanto",
        "relacionadas","nestas","tecnologias","e","em","na","nas","no","nos","o","os","um",
        "uma","umas","uns","voce","qualificacoes","companhia","sua","dentro","com","por","para",
        "se","não","sim","como","mas","ou","nem","geral","estrutura","entre","outras","nosso",
        "junto","atuacao","também","mais","então","são","foi","era","é","ser","tem","identificacao",
        "visao","or","on","tudo","auxiliar","fabricante","há","já","está","sendo","pelo","pelos",
        "pela","pelas","sobre","etc","time","times","atribuicoes","ser","promotora","impactam","qual",
        "quem","que","papel","nossos","sera","requisitos","qualificações","esperamos","você","atribuições",
        "dar","necessario","possua","será","seu","momentos","operar","rapida","usando","maneira","padrões",
        "cenarios","ter","atuar","menos","preferencialmente","bons","entendimento","uso","tiver","baseados",
        "participativa","interação","outros","pessoa","conquista","projetar","enfase","orientar","demais",
        "bom","atendendo","solicitações","ações","modo","tempo","diminuir","ênfase","solucoes","possibilitar",
        "abstraindo","camada","manter","areas","trata","las","completo","final","pontos","boas","auto","enviar",
        "criar","basico","desejavel","superior","ocorra","incluindo","todas","fazer","realizar","atividades",
        "montar","atraves","providenciando","cuidar","fim","especifico","sistema","suas","minas","vaga","vagas",
        "elaborar","monitorar","conforme","necessidade","todo","todos","toda","todas","grupos","grupo","itens",
        "setor","lancando","medio","desejaveis","minimo","utilizandose","prover","partir","parte","precisa",
        "eou","minimamente","exercer","atual"
      ];
  
      // Variável para controlar exibição do popup apenas 1x
      let popupShown = false;
  
      function normalize(text) {
        return text
          .normalize('NFD')
          .replace(/[\u0300-\u036f]/g, '')
          .replace(/[^\w\s]/gi, '');
      }
  
      function tokenizeAndFilter(text, allStopWords) {
        return text
          .split(/\s+/)
          .map(word => normalize(word.toLowerCase()))
          .filter(word => !allStopWords.includes(word) && word.trim() !== '');
      }
  
      function createTags(words, container) {
        container.innerHTML = '';
        words.forEach(word => {
          const tag = document.createElement('span');
          tag.className = 'tag';
          tag.textContent = word;
          container.appendChild(tag);
        });
      }
  
      function updatePercentageCircle(percentage) {
        const circle = document.querySelector('.percentage-circle');
        const value = document.querySelector('.percentage-value');
        circle.style.setProperty('--percentage', `${percentage}%`);
        value.textContent = `${percentage.toFixed(1)}%`;
      }
  
      // Cálculo de Compatibilidade
      document.getElementById('calcular').addEventListener('click', function() {
        const textoVaga = document.getElementById('vaga').value.toLowerCase();
        const textoCurriculo = document.getElementById('curriculo').value.toLowerCase();
        const palavrasIgnorarRaw = document.getElementById('ignore').value.toLowerCase();
        const palavrasIgnorar = palavrasIgnorarRaw.split(/[,\s]+/).filter(word => word.trim() !== "");
  
        const allStopWords = [...new Set([...stopWords, ...palavrasIgnorar])];
  
        const filteredTokensVaga = tokenizeAndFilter(textoVaga, allStopWords);
        const filteredTokensCurriculo = tokenizeAndFilter(textoCurriculo, allStopWords);
  
        const commonTerms = filteredTokensVaga.filter(term => filteredTokensCurriculo.includes(term));
        const porcentagem = (commonTerms.length / filteredTokensVaga.length) * 100;
  
        const termosSugeridos = filteredTokensVaga.filter(term =>
          !filteredTokensCurriculo.includes(term) && !allStopWords.includes(term)
        );
  
        // Atualiza UI
        document.getElementById('resultCard').classList.add('active');
        updatePercentageCircle(porcentagem);
        createTags([...new Set(commonTerms)], document.getElementById('commonWords'));
        createTags([...new Set(termosSugeridos)], document.getElementById('suggestions'));
  
        // Exibe popup depois de 5 minutos (300.000ms), apenas 1 vez
        if (!popupShown) {
          popupShown = true;
          setTimeout(() => {
            document.getElementById('popupOverlay').style.display = 'block';
          }, 300000);
        }
      });
  
      // Fechar popup de upsell
      function closePopup() {
        document.getElementById('popupOverlay').style.display = 'none';
      }
  
      // Redirecionar para checkout
      function redirectToCheckout() {
        const stripe = Stripe('pk_test_51QfOlsQKl4c0JEUeSqWYa4tVAiFUp791PkerjIRI0NAcCPduafTxjZbWAPtCExIiduo4D9zNIlBF5DuOVp9X7hIf00m1tHuByU');
        stripe
          .redirectToCheckout({
            lineItems: [{
              price: 'price_1QfOyYQKl4c0JEUe4TqQUKV4', 
              quantity: 1,
            }],
            mode: 'payment',
            successUrl: window.location.origin + '/success',
            cancelUrl: window.location.origin + '/cancel',
          })
          .then(function(result) {
            if (result.error) {
              alert('Ocorreu um erro ao processar o pagamento. Por favor, tente novamente.');
            }
          });
      }
  
      // Fechar popup de upsell ao clicar fora
      document.getElementById('popupOverlay').addEventListener('click', function(e) {
        if (e.target === this) {
          closePopup();
        }
      });
  
      // Abrir popup de token
      function openTokenPopup() {
        document.getElementById('popupOverlayToken').style.display = 'block';
      }
  
      // Fechar popup de token
      function closeTokenPopup() {
        document.getElementById('popupOverlayToken').style.display = 'none';
      }
  
      // Comprar 1 token (redireciona ao mesmo Stripe)
      function redirectToCheckoutToken() {
        redirectToCheckout();
      }

      // Ajuste para 5 passos no tutorial
      let currentStep = 1;
      const totalSteps = 5;

      if (!localStorage.getItem('tutorialShown')) {
        document.getElementById('tutorialOverlay').style.display = 'block';
        
    }


      function showStep(step) {
          document.querySelectorAll('.tutorial-step').forEach(el => el.classList.remove('active'));
          document.querySelector(`.tutorial-step[data-step="${step}"]`).classList.add('active');
          
          const nextButton = document.querySelector('.tutorial-navigation .primary');
          if (step === totalSteps) {
              nextButton.textContent = 'Começar';
              localStorage.setItem('tutorialShown', 'true');
              
          } else {
              nextButton.textContent = 'Próximo';
          }
      }

      function nextStep() {
          if (currentStep === totalSteps) {
              document.getElementById('tutorialOverlay').style.display = 'none';
              return;
          }
          currentStep++;
          showStep(currentStep);
      }

      function previousStep() {
          if (currentStep > 1) {
              currentStep--;
              showStep(currentStep);
          }
      }

      // Função de envio de token com indicador de carregamento
      async function sendToken() {
          const token = document.getElementById('tokenInput').value.trim();
          const vaga = document.getElementById('vaga').value.trim();
          const curriculo = document.getElementById('curriculo').value.trim();

          if (!vaga || !curriculo) {
              alert('Por favor, preencha a Vaga e o Currículo antes de enviar o token.');
              return;
          }

          if (!token) {
              alert('Por favor, informe o token de geração.');
              return;
          }

          // Mostrar spinner e desabilitar botão
          const spinner = document.getElementById('tokenLoadingSpinner');
          const button = document.getElementById('sendTokenButton');
          spinner.style.display = 'block';
          button.disabled = true;

          try {
              const response = await fetch('https://testeoba.app.n8n.cloud/webhook/generate', {
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({ vaga, curriculo, token })
              });

              if (!response.ok) {
                  throw new Error('Ocorreu um erro ao gerar o currículo.');
              }

              let jsonResult;
              try {
                  jsonResult = await response.clone().json();
              } catch (e) {
                  jsonResult = null;
              }

              if (jsonResult && jsonResult.invalid === "Token Invalido") {
                  alert('Token inválido. Verifique seu token e tente novamente.');
                  return;
              }

              // Gera o arquivo e faz download
              const blob = await response.blob();
              const downloadUrl = window.URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = downloadUrl;
              link.download = 'curriculo_personalizado.docx';
              document.body.appendChild(link);
              link.click();
              link.remove();

              closeTokenPopup();
              alert('Currículo personalizado gerado com sucesso!');
          } catch (err) {
              console.error(err);
              alert('Não foi possível gerar o currículo personalizado. Verifique seu token e tente novamente.');
          } finally {
              // Esconder spinner e habilitar botão
              spinner.style.display = 'none';
              button.disabled = false;
          }
      }
  </script>
</body>
</html>
