<script>
document.addEventListener("DOMContentLoaded", function() {
  // Create container and inject HTML
  var container = document.createElement("div");
  container.id = "multi-step-form";
  container.innerHTML = `
    <form id="customForm">
      <!-- Step 1: Name Collection -->
      <div class="form-step" id="step1">
        <h2>Name Collection</h2>
        <input type="text" id="firstName" placeholder="First Name" required>
        <input type="text" id="lastName" placeholder="Last Name" required>
        <button type="button" class="next-btn" data-next="step2">Next</button>
      </div>

      <!-- Step 2: Email Request -->
      <div class="form-step" id="step2" style="display:none;">
        <h2 id="emailPrompt">What's your best email?</h2>
        <input type="email" id="email" placeholder="Email" required>
        <button type="button" class="prev-btn" data-prev="step1">Back</button>
        <button type="button" class="next-btn" data-next="step3">Next</button>
      </div>

      <!-- Step 3: Dietary Preference -->
      <div class="form-step" id="step3" style="display:none;">
        <h2>Dietary Preference</h2>
        <div class="btn-group">
          <button type="button" class="select-btn" data-value="Gluten-Free">Gluten-Free</button>
          <button type="button" class="select-btn" data-value="Regular">Regular</button>
        </div>
        <input type="hidden" id="dietary" required>
        <button type="button" class="prev-btn" data-prev="step2">Back</button>
        <button type="button" class="next-btn" data-next="step4">Next</button>
      </div>

      <!-- Step 4: Meal Size Selection -->
      <div class="form-step" id="step4" style="display:none;">
        <h2>Meal Size Selection</h2>
        <select id="mealSize" required>
          <option value="">Select an option</option>
          <option value="Regular Meals">Regular Meals</option>
          <option value="Big Meals">Big Meals</option>
          <option value="All You Can Eat">All You Can Eat</option>
        </select>
        <button type="button" class="prev-btn" data-prev="step3">Back</button>
        <button type="submit" id="submitBtn">Submit</button>
      </div>
    </form>
  `;
  document.body.appendChild(container);

  // Inject CSS
  var style = document.createElement("style");
  style.innerHTML = `
    #multi-step-form {
      max-width: 500px;
      margin: 20px auto;
      font-family: Arial, sans-serif;
    }
    .form-step {
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    input[type="text"],
    input[type="email"],
    select {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
    button {
      padding: 10px 20px;
      margin: 5px 2px;
      border: none;
      border-radius: 4px;
      background-color: #0078d7;
      color: #fff;
      cursor: pointer;
    }
    button:hover {
      background-color: #005a9e;
    }
    .btn-group {
      display: flex;
      gap: 10px;
    }
    .select-btn.active {
      background-color: #005a9e;
    }
  `;
  document.head.appendChild(style);

  // JS logic for multi-step form
  var steps = document.querySelectorAll('.form-step');
  var nextButtons = document.querySelectorAll('.next-btn');
  var prevButtons = document.querySelectorAll('.prev-btn');
  var selectButtons = document.querySelectorAll('.select-btn');
  var emailPrompt = document.getElementById('emailPrompt');

  nextButtons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var currentStep = this.closest('.form-step');
      var nextStepId = this.getAttribute('data-next');
      if (currentStep.id === 'step1') {
        var firstName = document.getElementById('firstName').value;
        emailPrompt.innerText = firstName ? `Hey ${firstName}, what's your best email?` : "What's your best email?";
      }
      currentStep.style.display = 'none';
      document.getElementById(nextStepId).style.display = 'block';
    });
  });

  prevButtons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var currentStep = this.closest('.form-step');
      var prevStepId = this.getAttribute('data-prev');
      currentStep.style.display = 'none';
      document.getElementById(prevStepId).style.display = 'block';
    });
  });

  selectButtons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      selectButtons.forEach(function(b) { b.classList.remove('active'); });
      this.classList.add('active');
      document.getElementById('dietary').value = this.getAttribute('data-value');
    });
  });

  document.getElementById('customForm').addEventListener('submit', function(e) {
    e.preventDefault();
    var data = {
      firstName: document.getElementById('firstName').value,
      lastName: document.getElementById('lastName').value,
      email: document.getElementById('email').value,
      dietary: document.getElementById('dietary').value,
      mealSize: document.getElementById('mealSize').value
    };

    // Replace with your actual webhook URL
    var webhookURL = 'https://your-webhook-url.com/endpoint';

    fetch(webhookURL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    .then(function(response) {
      if (response.ok) {
        alert('Form submitted successfully!');
        document.getElementById('customForm').reset();
        selectButtons.forEach(function(b) { b.classList.remove('active'); });
        steps.forEach(function(step) { step.style.display = 'none'; });
        document.getElementById('step1').style.display = 'block';
      } else {
        alert('Submission failed. Please try again.');
      }
    })
    .catch(function(error) {
      console.error('Error:', error);
      alert('Submission error. Please try again.');
    });
  });
});
</script>