// components/enterprise.el - Enterprise section.
// Four capability cards + "Who I work with" box + how-it-works steps.

fn enterprise() -> String {
    return "
<section id=\"enterprise\" aria-label=\"Enterprise\">
  <div class=\"container\">

    <div class=\"enterprise-header\">
      <div class=\"enterprise-label-row reveal\">
        <div class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"></div>
        <span class=\"label\" style=\"color:var(--navy-85)\">Enterprise</span>
      </div>
      <div class=\"enterprise-head-row\">
        <div style=\"max-width:28rem\">
          <h2 class=\"display-lg reveal\" style=\"transition-delay:80ms\">
            Enterprise-ready <span class=\"gold\">Q1 2027.</span>
          </h2>
          <p class=\"reveal\" style=\"transition-delay:160ms;font-weight:300;font-size:.9375rem;color:var(--t2);line-height:1.7;margin-top:1.25rem\">
            Not an afterthought. Not a future roadmap item. Built into the architecture from the start.
          </p>
        </div>
        <div class=\"reveal\" style=\"transition-delay:240ms;display:flex;flex-direction:column;gap:.75rem;align-items:flex-end\">
          <div class=\"ent-badge\">
            <span class=\"ent-badge-dot\"></span>
            Enterprise discussions open now &mdash; launching Q1 2027
          </div>
          <p style=\"font-size:.75rem;color:rgba(0,82,160,.45)\">Use the form below &middot; I review every inquiry &middot; I&#39;ll be spending the holidays with my family &mdash; we launch Q1</p>
        </div>
      </div>
    </div>

    <div class=\"enterprise-grid\">
      <div class=\"enterprise-cap card-dark reveal\">
        <h3 class=\"display-md\">Private deployment</h3>
        <div class=\"enterprise-cap-rule\"></div>
        <p class=\"enterprise-cap-body\">Run entirely on your infrastructure. Air-gapped. No data leaves your network. Every employee gets their own Neuron instance - your company&#39;s institutional knowledge stays inside your walls.</p>
      </div>
      <div class=\"enterprise-cap card-dark reveal\" style=\"transition-delay:130ms\">
        <h3 class=\"display-md\">Institutional memory</h3>
        <div class=\"enterprise-cap-rule\"></div>
        <p class=\"enterprise-cap-body\">When an employee leaves, their expertise doesn&#39;t. Their memory persists - their patterns, their domain knowledge, their reasoning - available to the team they built it with.</p>
      </div>
      <div class=\"enterprise-cap card-dark reveal\" style=\"transition-delay:260ms\">
        <h3 class=\"display-md\">Team intelligence</h3>
        <div class=\"enterprise-cap-rule\"></div>
        <p class=\"enterprise-cap-body\">Shared knowledge packages and cross-instance coordination. The collective intelligence of your organization compounds the same way an individual&#39;s does.</p>
      </div>
      <div class=\"enterprise-cap card-dark reveal\" style=\"transition-delay:390ms\">
        <h3 class=\"display-md\">Compliance architecture</h3>
        <div class=\"enterprise-cap-rule\"></div>
        <p class=\"enterprise-cap-body\">Custom on-device storage. No cloud database with your data. SOC 2 alignment built into the data model. ExternalSecret-based secrets management. Audit logs at every layer.</p>
      </div>
    </div>

    <div class=\"enterprise-box reveal\">
      <p class=\"ent-who-label\">Who I work with</p>
      <p class=\"ent-who-body\">I am selective. I built Neuron to expand what people can do - not to help organizations eliminate them. If your interest in this technology is primarily about reducing headcount, I am not your vendor. If it&#39;s about making the people you have dramatically more effective, I want to hear from you.</p>
      <p class=\"ent-who-note\">This isn&#39;t a legal hedge. It&#39;s a filter. The Enterprise Agreement makes it binding - but I&#39;m raising it here because I&#39;d rather you know before you reach out.</p>

      <div class=\"ent-how-row\">
        <div class=\"ent-how-label\">
          <h3 class=\"display-md\" style=\"font-size:1.25rem\">How it works</h3>
        </div>
        <div class=\"ent-steps\">
          <div>
            <p class=\"ent-step-num\">01</p>
            <p class=\"ent-step-title\">Express interest</p>
            <p class=\"ent-step-body\">Send me a note. I review every inquiry myself - no sales funnel, no SDR. If it&#39;s a fit, I respond directly.</p>
          </div>
          <div>
            <p class=\"ent-step-num\">02</p>
            <p class=\"ent-step-title\">Scoped deployment</p>
            <p class=\"ent-step-body\">I work with your team to scope a private deployment - on your infrastructure, in your network, with your security requirements.</p>
          </div>
          <div>
            <p class=\"ent-step-num\">03</p>
            <p class=\"ent-step-title\">Per-seat licensing</p>
            <p class=\"ent-step-body\">Annual per-seat pricing with a volume floor. Custom SLA available. The full Agreement is published before any conversation starts.</p>
          </div>
        </div>
      </div>

      <div class=\"ent-terms-row\">
        <p class=\"ent-terms-text\">The full Enterprise Agreement is published. Read it before reaching out - no NDA required to evaluate the terms.</p>
        <a href=\"/legal/enterprise-terms\" class=\"ent-terms-link\">Read the Enterprise Agreement &#8594;</a>
      </div>

      <!-- Enterprise inquiry form -->
      <div style=\"margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)\">
        <p class=\"label\" style=\"margin-bottom:0.75rem;font-size:0.65rem\">Express interest</p>
        <p style=\"font-family:var(--body);font-weight:300;font-size:0.9rem;color:var(--t2);line-height:1.75;margin-bottom:2rem\">I review every inquiry myself. Fill this out honestly - the questions are a filter, not a formality.</p>

        <form id=\"enterprise-form\" class=\"ent-inquiry-form\">

          <div style=\"display:flex;flex-direction:column;gap:0.4rem\">
            <label for=\"ent-name\" style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3)\">Name</label>
            <input id=\"ent-name\" name=\"name\" type=\"text\" required placeholder=\"Your name\"
              style=\"font-family:var(--body);font-size:0.9rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid rgba(0,82,160,.22);padding:0.7rem 0.9rem;outline:none;border-radius:0;-webkit-appearance:none;width:100%;box-sizing:border-box\">
          </div>

          <div style=\"display:flex;flex-direction:column;gap:0.4rem\">
            <label for=\"ent-email\" style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3)\">Work email</label>
            <input id=\"ent-email\" name=\"email\" type=\"email\" required placeholder=\"you@company.com\"
              style=\"font-family:var(--body);font-size:0.9rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid rgba(0,82,160,.22);padding:0.7rem 0.9rem;outline:none;border-radius:0;-webkit-appearance:none;width:100%;box-sizing:border-box\">
          </div>

          <div style=\"display:flex;flex-direction:column;gap:0.4rem\">
            <label for=\"ent-company\" style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3)\">Organization</label>
            <input id=\"ent-company\" name=\"company\" type=\"text\" required placeholder=\"Company or organization name\"
              style=\"font-family:var(--body);font-size:0.9rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid rgba(0,82,160,.22);padding:0.7rem 0.9rem;outline:none;border-radius:0;-webkit-appearance:none;width:100%;box-sizing:border-box\">
          </div>

          <div style=\"display:flex;flex-direction:column;gap:0.4rem\">
            <label for=\"ent-size\" style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3)\">Team size</label>
            <select id=\"ent-size\" name=\"size\" required
              style=\"font-family:var(--body);font-size:0.9rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid rgba(0,82,160,.22);padding:0.7rem 0.9rem;outline:none;border-radius:0;-webkit-appearance:none;cursor:pointer;width:100%;box-sizing:border-box\">
              <option value=\"\">Select&hellip;</option>
              <option value=\"2-10\">2&#8211;10 people</option>
              <option value=\"11-50\">11&#8211;50 people</option>
              <option value=\"51-200\">51&#8211;200 people</option>
              <option value=\"201-500\">201&#8211;500 people</option>
              <option value=\"500+\">500+ people</option>
            </select>
          </div>

          <div style=\"grid-column:1/-1;display:flex;flex-direction:column;gap:0.4rem\">
            <label for=\"ent-use\" style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3)\">What do you want to use Neuron for?</label>
            <textarea id=\"ent-use\" name=\"use_case\" required rows=\"3\" placeholder=\"Describe your intended use case - be specific.\"
              style=\"font-family:var(--body);font-size:0.9rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid rgba(0,82,160,.22);padding:0.7rem 0.9rem;outline:none;border-radius:0;resize:vertical;-webkit-appearance:none;width:100%;box-sizing:border-box\"></textarea>
          </div>

          <div style=\"grid-column:1/-1;display:flex;flex-direction:column;gap:0.4rem\">
            <label for=\"ent-headcount\" style=\"font-family:var(--body);font-size:0.7rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--t3)\">Is reducing headcount a primary goal of this deployment?</label>
            <select id=\"ent-headcount\" name=\"headcount\" required onchange=\"entHeadcountChange(this.value)\"
              style=\"font-family:var(--body);font-size:0.9rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid rgba(0,82,160,.22);padding:0.7rem 0.9rem;outline:none;border-radius:0;-webkit-appearance:none;cursor:pointer;width:100%;box-sizing:border-box\">
              <option value=\"\">Select&hellip;</option>
              <option value=\"no\">No - making our team more capable</option>
              <option value=\"secondary\">It&#39;s a secondary factor, not the primary goal</option>
              <option value=\"yes\">Yes - replacing roles with automation</option>
            </select>
            <p id=\"ent-filter-msg-secondary\" style=\"display:none;font-family:var(--body);font-size:0.875rem;font-weight:300;color:rgba(0,82,160,.75);line-height:1.65;padding:0.75rem 1rem;background:rgba(0,82,160,.04);border-left:2px solid rgba(0,82,160,.3)\">
              I review these personally. I&#39;ll consider it - but I want to be direct with you: if headcount reduction is in the picture at all, even as a secondary outcome, your chances here are low. That&#39;s not a negotiating position. It&#39;s how I built this and what I&#39;m willing to support.
            </p>
            <p id=\"ent-filter-msg-yes\" style=\"display:none;font-family:var(--body);font-size:0.875rem;font-weight:300;color:#c0392b;line-height:1.65;padding:0.75rem 1rem;background:rgba(192,57,43,.05);border-left:2px solid rgba(192,57,43,.4)\">
              Neuron isn&#39;t the right fit here. I built this to expand what people can do, not to replace them. If that changes, I&#39;m here.
            </p>
          </div>

          <div id=\"ent-form-error\" style=\"grid-column:1/-1;display:none;font-family:var(--body);font-size:0.875rem;color:#c0392b;padding:0.75rem 1rem;background:rgba(192,57,43,.05);border-left:2px solid rgba(192,57,43,.4)\"></div>

          <div style=\"grid-column:1/-1\">
            <button type=\"submit\" id=\"ent-submit\"
              style=\"font-family:var(--body);font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;background:var(--navy);color:#fff;border:none;padding:0.95rem 2rem;cursor:pointer;transition:background .2s\">
              Send inquiry &#8594;
            </button>
          </div>

        </form>

        <div id=\"enterprise-success\" style=\"display:none;padding:2rem;background:rgba(0,82,160,.04);border-left:3px solid var(--navy)\">
          <p style=\"font-family:var(--head);font-size:1.25rem;font-weight:500;color:var(--t1);margin-bottom:0.5rem\">Received.</p>
          <p style=\"font-family:var(--body);font-weight:300;font-size:0.9375rem;color:var(--t2);line-height:1.8\">I review these personally. If it&#39;s a fit, I&#39;ll respond directly to your email - usually within a few days.</p>
        </div>
      </div>

    </div>

  </div>
</section>

<style>
  .ent-inquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  @media (max-width: 600px) {
    .ent-inquiry-form { grid-template-columns: 1fr; }
    .ent-inquiry-form > div[style*=\"grid-column:1/-1\"],
    .ent-inquiry-form > div[style*=\"grid-column: 1 / -1\"] { grid-column: 1; }
  }
</style>

<script>
(function() {
  var form = document.getElementById('enterprise-form');
  var submitBtn = document.getElementById('ent-submit');
  var successDiv = document.getElementById('enterprise-success');
  var errorDiv = document.getElementById('ent-form-error');

  if (!form) return;

  window.entHeadcountChange = function(val) {
    document.getElementById('ent-filter-msg-secondary').style.display = val === 'secondary' ? 'block' : 'none';
    document.getElementById('ent-filter-msg-yes').style.display = val === 'yes' ? 'block' : 'none';
    submitBtn.disabled = val === 'yes';
    submitBtn.style.opacity = val === 'yes' ? '0.35' : '1';
    submitBtn.style.cursor = val === 'yes' ? 'not-allowed' : 'pointer';
  };

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    var headcount = document.getElementById('ent-headcount').value;
    if (headcount === 'yes') {
      document.getElementById('ent-filter-msg-yes').style.display = 'block';
      return;
    }

    var name = document.getElementById('ent-name').value.trim();
    var email = document.getElementById('ent-email').value.trim();
    var company = document.getElementById('ent-company').value.trim();
    var size = document.getElementById('ent-size').value;
    var useCase = document.getElementById('ent-use').value.trim();

    if (!name || !email || !company || !size || !useCase || !headcount) {
      errorDiv.textContent = 'Please fill out all fields.';
      errorDiv.style.display = 'block';
      return;
    }

    errorDiv.style.display = 'none';
    submitBtn.textContent = 'Sending…';
    submitBtn.disabled = true;

    fetch('/api/enterprise-inquiry', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: name, email: email, company: company, size: size, use_case: useCase, headcount: headcount })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      form.style.display = 'none';
      successDiv.style.display = 'block';
    })
    .catch(function() {
      submitBtn.textContent = 'Send inquiry →';
      submitBtn.disabled = false;
      errorDiv.textContent = 'Something went wrong. Email enterprise@neurontechnologies.ai directly.';
      errorDiv.style.display = 'block';
    });
  });
})();
</script>
"
}
