{% extends "base.html" %}
{% block title %}Get trial access — Verifii{% endblock %}
{% block content %}

<div style="max-width:520px;margin:0 auto;">

  <div style="margin-bottom:2rem;">
    <h1 style="margin-bottom:0.35rem;">Get trial access</h1>
    <p class="muted" style="margin:0;">Tell us a bit about what you'd like to analyse. We'll email you a trial link within 24 hours — no credit card required.</p>
  </div>

  <div id="form-wrap">
    <form id="reg-form">

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem;">
        <div>
          <label style="display:block;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;">Name</label>
          <input type="text" id="f-name" placeholder="Ada Lovelace" required
                 style="margin-bottom:0;width:100%;box-sizing:border-box;">
        </div>
        <div>
          <label style="display:block;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;">Company / project</label>
          <input type="text" id="f-company" placeholder="Acme Corp"
                 style="margin-bottom:0;width:100%;box-sizing:border-box;">
        </div>
      </div>

      <div style="margin-bottom:0.75rem;">
        <label style="display:block;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;">Email</label>
        <input type="email" id="f-email" placeholder="ada@acme.com" required
               style="margin-bottom:0;width:100%;box-sizing:border-box;padding:0.6rem 0.75rem;font-size:1rem;border:1px solid var(--border);border-radius:4px;font-family:inherit;transition:border-color 0.15s;">
      </div>

      <div style="margin-bottom:0.75rem;">
        <label style="display:block;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;">GitHub repository URL</label>
        <input type="url" id="f-repo" placeholder="https://github.com/your-org/your-repo"
               style="margin-bottom:0;width:100%;box-sizing:border-box;padding:0.6rem 0.75rem;font-size:1rem;border:1px solid var(--border);border-radius:4px;font-family:inherit;transition:border-color 0.15s;">
        <p style="font-size:0.78rem;color:var(--muted);margin:0.3rem 0 0;">Optional — saves a step when your trial arrives. Must be a public GitHub repo.</p>
      </div>

      <div style="margin-bottom:1.25rem;">
        <label style="display:block;font-size:0.875rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;">What are you trying to understand?</label>
        <textarea id="f-intent" rows="3" placeholder="e.g. Audit our auth module before a security review, understand a legacy codebase we just acquired, check if our code matches the spec…"
                  style="width:100%;box-sizing:border-box;padding:0.6rem 0.75rem;font-size:0.9rem;border:1px solid var(--border);border-radius:4px;font-family:inherit;resize:vertical;line-height:1.6;color:var(--text);background:var(--white);"></textarea>
      </div>

      <div id="form-error" class="error" style="display:none;"></div>

      <button type="submit" id="submit-btn" style="width:100%;padding:0.75rem;">Request trial access</button>

    </form>
  </div>

  <div id="success-wrap" style="display:none;text-align:center;padding:2.5rem 0;">
    <div style="font-size:2.5rem;margin-bottom:1rem;">✓</div>
    <h2 style="margin-bottom:0.5rem;">Request received</h2>
    <p class="muted" style="margin:0;">We'll review your request and email you a license key within 24 hours.<br>Keep an eye on your inbox — and your spam folder.</p>
  </div>

</div>

<script>
(function () {
  var form = document.getElementById("reg-form");
  var btn  = document.getElementById("submit-btn");
  var err  = document.getElementById("form-error");

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    err.style.display = "none";

    var name    = document.getElementById("f-name").value.trim();
    var email   = document.getElementById("f-email").value.trim();
    var company = document.getElementById("f-company").value.trim();
    var repo    = document.getElementById("f-repo").value.trim();
    var intent  = document.getElementById("f-intent").value.trim();

    if (!name || !email) {
      err.textContent = "Name and email are required.";
      err.style.display = "block";
      return;
    }
    if (repo && !repo.startsWith("https://github.com/")) {
      err.textContent = "Repository URL must be a public GitHub URL (https://github.com/…).";
      err.style.display = "block";
      return;
    }

    btn.disabled = true;
    btn.textContent = "Submitting…";

    fetch("/api/register-trial", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: name, email: email, company: company,
                             repo_url: repo, intent: intent })
    })
    .then(function (r) { return r.json(); })
    .then(function (d) {
      if (d.status === "ok") {
        document.getElementById("form-wrap").style.display  = "none";
        document.getElementById("success-wrap").style.display = "block";
      } else {
        err.textContent = d.error || "Something went wrong. Please try again.";
        err.style.display = "block";
        btn.disabled = false;
        btn.textContent = "Request trial access";
      }
    })
    .catch(function () {
      err.textContent = "Network error. Please try again.";
      err.style.display = "block";
      btn.disabled = false;
      btn.textContent = "Request trial access";
    });
  });
})();
</script>
{% endblock %}