od8n_homepage/public/widget-signup/widget.js

(function() {
  console.log("WIDGET COOL")
  const currentScript = document.currentScript;
  const affiliateFromAttr = currentScript.getAttribute("data-affiliate");

  const params = new URLSearchParams(window.location.search);
  const affiliateFromURL = params.get("affiliate");

  const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";

  const container = document.getElementById("my-signup-widget");
  if (!container) return;

  const shadow = container.attachShadow({ mode: "open" });

  const styles = `
    :host {
      all: initial;
      font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
      display: block;
      max-width: 420px;
      margin: 0 auto;
    }

    .card {
      background: linear-gradient(135deg,#ffffff 0%,#f7fafc 60%);
      border: 1px solid #e6e8eb;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(16,24,40,.08);
      padding: 20px;
    }


    .header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .icon { width: 36px; height: 36px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; color: #fff;
    }
    .title { font-size: 18px; line-height: 1.2; font-weight: 800; color: #0f172a; }
    .subtitle { font-size: 13px; color: #475569; }
    label, .label { display: block; font-size: 12px; color: #334155; font-weight: 600; margin: 12px 0 6px; }

    .options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
    .option { flex: 1; display: flex; align-items: center; gap: 8px;
      border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px;
      cursor: pointer; background: #fff;
    }
    input[type="radio"] { accent-color: #3b82f6; margin: 0; }

    select, input[type="email"], .affiliate-display {
      width: 100%;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      color: #0f172a;
      outline: none;
      box-sizing: border-box;
    }
    .affiliate-display { background: #f8fafc; }

    button {
      margin-top: 16px;
      width: 100%;
      border: none;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 15px;
      font-weight: 800;
      background: linear-gradient(135deg,#22c55e,#3b82f6);
      color: #fff;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(37,99,235,.25);
    }

    .footnote { margin-top: 10px; font-size: 11px; color: #64748b; text-align: center; }

    .status {
      padding: 20px;
      font-size: 15px;
      color: #0f172a;
      background: linear-gradient(135deg,#f0f9ff,#e0f2fe);
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(16,24,40,.08);
      word-break: break-word;
    }
    .status.success { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #065f46; }
    .status.error { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #991b1b; }
  `;

  const html = `
    <form class="card">
      <div class="header">
        <img class="icon" src="https://sp01.odoo4projects.com/hugo/live/4.svg">
        <div>
          <div class="title">Try Managed Odoo or n8n — Free</div>
          <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
        </div>
      </div>

      <div class="label">Product</div>
      <div class="options">
        <label class="option">
          <input type="radio" name="product" value="ODOO" required checked>
          <span>ODOO</span>
        </label>
        <label class="option">
          <input type="radio" name="product" value="N8N" required>
          <span>N8N</span>
        </label>
      </div>

      <label for="location">Location</label>
      <select id="location" name="location" required>
        <option value="" disabled>Select a region</option>
        <option value="manchester">UK - Manchester</option>
      </select>

      <label for="email">Work Email</label>
      <input id="email" name="email" type="email" required placeholder="you@company.com">

      <input type="hidden" name="affiliate_code" value="${affiliateCode}">

      <button type="submit">Start 4-Week Free Trial</button>

      <div class="footnote">
        By submitting, you agree to the T&C of ODOO4projects.
      </div>
    </form>

    <div id="status" class="status" style="display:none;"></div>
  `;

  shadow.innerHTML = `<style>${styles}</style>${html}`;

  const form = shadow.querySelector("form");
  const statusEl = shadow.getElementById("status");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    statusEl.style.display = "block";
    statusEl.textContent = "Submitting...";
    statusEl.className = "status";

    try {
      const formData = new FormData(form);
      const res = await fetch("https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a", {
        method: "POST",
        body: formData,
      });

      const text = await res.text();

      // Hide the form
      form.style.display = "none";

      // Show the webhook response nicely
      statusEl.textContent = text;
      statusEl.className = "status success";
    } catch (err) {
      statusEl.textContent = "❌ Failed to submit. Please try again.";
      statusEl.className = "status error";
    }
  });
})();