public/embed.js

(function () {
  // Determine where the script was loaded from to use as the base API URL
  // We use the current script's origin so it dynamically works local or on Hugging Face.
  const scriptTag = document.currentScript;
  const baseUrl = scriptTag ? new URL(scriptTag.src).origin : 'http://localhost:3000';
  const API_URL = `${baseUrl}/api/submit`;

  const containerId = 'wallapi-form-container';
  const container = document.getElementById(containerId);

  if (!container) {
    console.error(`[WallAPI] Container element with id '${containerId}' not found.`);
    return;
  }

  // Inject CSS styles securely and cleanly
  const styles = `
    #${containerId} {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 400px;
      margin: 0 auto;
      background: #ffffff;
      padding: 32px;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.05);
      box-sizing: border-box;
      border: 1px solid #eaeaea;
    }
    #${containerId} h3 {
      margin-top: 0;
      font-size: 24px;
      font-weight: 600;
      color: #111;
      margin-bottom: 24px;
    }
    #${containerId} .wallapi-group {
      margin-bottom: 20px;
      text-align: left;
    }
    #${containerId} label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #444;
      font-size: 14px;
    }
    #${containerId} input, #${containerId} textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
      font-family: inherit;
    }
    #${containerId} input:focus, #${containerId} textarea:focus {
      outline: none;
      border-color: #0066ff;
      box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }
    #${containerId} textarea {
      resize: vertical;
      min-height: 100px;
    }
    #${containerId} button {
      width: 100%;
      background: #0066ff;
      color: white;
      border: none;
      padding: 14px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    #${containerId} button:hover {
      background: #005ce6;
    }
    #${containerId} button:active {
      transform: scale(0.98);
    }
    #${containerId} button:disabled {
      background: #a0c4ff;
      cursor: not-allowed;
      transform: none;
    }
    #${containerId} .wallapi-message {
      margin-top: 16px;
      padding: 12px;
      border-radius: 8px;
      font-size: 14px;
      display: none;
    }
    #${containerId} .wallapi-message.success {
      display: block;
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #10b981;
    }
    #${containerId} .wallapi-message.error {
      display: block;
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #ef4444;
    }
  `;

  const styleTag = document.createElement('style');
  styleTag.innerHTML = styles;
  document.head.appendChild(styleTag);

  // Form HTML
  const formHtml = `
    <h3>Contact Us</h3>
    <form id="wallapi-form">
      <div class="wallapi-group">
        <label for="wallapi-name">Name</label>
        <input type="text" id="wallapi-name" name="name" required placeholder="John Doe">
      </div>
      <div class="wallapi-group">
        <label for="wallapi-email">Email</label>
        <input type="email" id="wallapi-email" name="email" required placeholder="john@example.com">
      </div>
      <div class="wallapi-group">
        <label for="wallapi-message">Message</label>
        <textarea id="wallapi-message" name="message" required placeholder="How can we help you?"></textarea>
      </div>
      <button type="submit" id="wallapi-submit">Send Message</button>
      <div id="wallapi-status" class="wallapi-message"></div>
    </form>
  `;

  container.innerHTML = formHtml;

  const form = document.getElementById('wallapi-form');
  const submitBtn = document.getElementById('wallapi-submit');
  const statusDiv = document.getElementById('wallapi-status');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending...';
    statusDiv.className = 'wallapi-message'; // Reset

    const formData = {
      name: document.getElementById('wallapi-name').value,
      email: document.getElementById('wallapi-email').value,
      message: document.getElementById('wallapi-message').value
    };

    try {
      const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });

      const data = await response.json();

      if (response.ok) {
        statusDiv.textContent = data.message || 'Form submitted successfully!';
        statusDiv.className = 'wallapi-message success';
        form.reset();
      } else {
        statusDiv.textContent = data.error || 'Server error occurred.';
        statusDiv.className = 'wallapi-message error';
      }
    } catch (err) {
      statusDiv.textContent = 'Network error. Please try again later.';
      statusDiv.className = 'wallapi-message error';
      console.error('[WallAPI] Submit error:', err);
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Send Message';
    }
  });

})();