// components/marketplace.el - Marketplace section.
// Explains the plugin marketplace - what it is, how it works, coming soon.

fn marketplace() -> String {
    return "
<section id=\"marketplace\" aria-label=\"Neuron Marketplace\">
  <div class=\"container\">

    <div class=\"marketplace-header\">
      <div class=\"marketplace-label-row reveal\">
        <div class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"></div>
        <span class=\"label\" style=\"color:var(--navy-85)\">Marketplace</span>
        <div style=\"margin-left:1rem;background:rgba(0,82,160,.1);color:var(--navy);font-family:var(--body);font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;padding:0.25rem 0.75rem;border-radius:2px\">Coming soon</div>
      </div>

      <h2 class=\"display-lg reveal\" style=\"transition-delay:80ms;max-width:38rem\">
        Extend Neuron.<span class=\"gold\" style=\"display:block\">Build for it.</span>
      </h2>
      <p class=\"reveal\" style=\"transition-delay:160ms;font-weight:300;font-size:.9375rem;color:var(--t2);line-height:1.75;max-width:36rem;margin-top:1.25rem\">
        Neuron does one thing exceptionally well: it knows you. The Marketplace extends what it can do with that knowledge - connecting it to your tools, your workflows, and capabilities built by people who understand your domain better than any general-purpose AI ever will.
      </p>
    </div>

    <div class=\"marketplace-grid reveal\" style=\"transition-delay:200ms\">

      <div class=\"marketplace-card card-dark\">
        <div class=\"marketplace-card-icon\">
          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
            <path d=\"M12 2L2 7l10 5 10-5-10-5z\"/><path d=\"M2 17l10 5 10-5\"/><path d=\"M2 12l10 5 10-5\"/>
          </svg>
        </div>
        <h3 class=\"display-md marketplace-card-title\">Plugins that know you</h3>
        <p class=\"marketplace-card-body\">Every plugin in the Marketplace has access to your memory - with your permission. A legal plugin knows your deal history. A coding plugin knows your architecture decisions. An email plugin knows your relationships and communication style. The context travels with you.</p>
      </div>

      <div class=\"marketplace-card card-dark\" style=\"transition-delay:120ms\">
        <div class=\"marketplace-card-icon\">
          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
            <circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 8v4l3 3\"/>
          </svg>
        </div>
        <h3 class=\"display-md marketplace-card-title\">Built by domain experts</h3>
        <p class=\"marketplace-card-body\">General AI is good at general things. The Marketplace is for specialists. The person building a plugin for contract attorneys or orthopedic surgeons or professional traders isn&#39;t us. It&#39;s someone who has spent years in that world. We give them the platform. They bring the depth.</p>
      </div>

      <div class=\"marketplace-card card-dark\" style=\"transition-delay:240ms\">
        <div class=\"marketplace-card-icon\">
          <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
            <path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"/>
          </svg>
        </div>
        <h3 class=\"display-md marketplace-card-title\">Revenue for builders</h3>
        <p class=\"marketplace-card-body\">Developers earn recurring revenue when users install their plugins. We handle billing, distribution, and the infrastructure. You handle the product. Every plugin that ships earns you a share of every subscription for as long as that user stays. Build once, earn indefinitely.</p>
      </div>

    </div>

    <div class=\"marketplace-categories reveal\" style=\"transition-delay:320ms\">

      <div style=\"margin-bottom:2rem\">
        <p class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\">Connectors - day one</p>
        <div class=\"marketplace-tags\">
          <span class=\"marketplace-tag\">Gmail</span>
          <span class=\"marketplace-tag\">Slack</span>
          <span class=\"marketplace-tag\">Google Calendar</span>
          <span class=\"marketplace-tag\">Google Drive</span>
          <span class=\"marketplace-tag\">Notion</span>
          <span class=\"marketplace-tag\">GitHub</span>
          <span class=\"marketplace-tag\">Linear</span>
          <span class=\"marketplace-tag\">More connectors at launch</span>
        </div>
      </div>

      <div style=\"margin-bottom:2rem\">
        <p class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\">Following launch</p>
        <div class=\"marketplace-tags\">
          <span class=\"marketplace-tag\">Process packets</span>
          <span class=\"marketplace-tag\">Knowledge packets</span>
        </div>
      </div>

      <div>
        <p class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\">Imprints - starting with</p>
        <div class=\"marketplace-tags\">
          <span class=\"marketplace-tag\">CEO</span>
          <span class=\"marketplace-tag\">CTO</span>
          <span class=\"marketplace-tag\">CFO</span>
          <span class=\"marketplace-tag\">CMO</span>
          <span class=\"marketplace-tag\">COO</span>
          <span class=\"marketplace-tag\">More C-suite</span>
        </div>
      </div>

    </div>

    <div class=\"marketplace-cta reveal\" style=\"transition-delay:400ms\">
      <div class=\"marketplace-cta-inner\">
        <div>
          <p style=\"font-family:var(--body);font-weight:500;font-size:1rem;color:var(--t1);margin-bottom:0.5rem\">Building something?</p>
          <p style=\"font-family:var(--body);font-weight:300;font-size:0.875rem;color:var(--t2);line-height:1.6\">The developer program opens before the Marketplace does. If you&#39;re interested in building a plugin, get in touch early - early developers shape the API.</p>
        </div>
        <button onclick=\"document.getElementById('developer-interest').style.display='block';document.getElementById('developer-interest').scrollIntoView({behavior:'smooth',block:'start'});this.style.display='none';\" class=\"btn-ghost\" style=\"white-space:nowrap;flex-shrink:0\">Developer interest &rarr;</button>
      </div>
    </div>

  </div>

  <!-- Developer interest form — hidden until button click -->
  <div id=\"developer-interest\" class=\"container\" style=\"display:none;margin-top:4rem;padding-top:4rem;border-top:1px solid rgba(0,82,160,.10)\">
    <div style=\"max-width:42rem\">
      <p class=\"label\" style=\"margin-bottom:0.75rem;color:var(--navy-85)\">Developer Program</p>
      <h3 style=\"font-family:var(--display);font-size:1.75rem;font-weight:400;color:var(--t1);letter-spacing:-0.01em;margin-bottom:1rem;line-height:1.2\">Get early access</h3>
      <p style=\"font-family:var(--body);font-weight:300;font-size:0.9rem;color:var(--t2);line-height:1.75;margin-bottom:2.5rem\">The developer program opens before the Marketplace does. Early developers shape the plugin API. Tell me what you want to build.</p>
      <form id=\"dev-form\" class=\"dev-form-grid\">
        <div class=\"dev-field\">
          <label for=\"dev-name\" class=\"dev-label\">Name</label>
          <input id=\"dev-name\" type=\"text\" required placeholder=\"Your name\" class=\"dev-input\">
        </div>
        <div class=\"dev-field\">
          <label for=\"dev-email\" class=\"dev-label\">Email</label>
          <input id=\"dev-email\" type=\"email\" required placeholder=\"you@example.com\" class=\"dev-input\">
        </div>
        <div class=\"dev-field dev-field-full\">
          <label for=\"dev-idea\" class=\"dev-label\">What do you want to build?</label>
          <textarea id=\"dev-idea\" required rows=\"5\" placeholder=\"Tell me about the plugin or integration you have in mind...\" class=\"dev-input dev-textarea\"></textarea>
        </div>
        <div class=\"dev-field-full\">
          <button type=\"submit\" class=\"btn-primary\">Send interest &rarr;</button>
          <p id=\"dev-msg\" style=\"font-family:var(--body);font-size:0.8rem;color:var(--t3);margin-top:0.75rem;display:none\"></p>
        </div>
      </form>
    </div>
  </div>

  <script>
  (function() {
    var form = document.getElementById('dev-form');
    if (!form) return;
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      var msg = document.getElementById('dev-msg');
      var btn = form.querySelector('button[type=submit]');
      btn.disabled = true;
      btn.textContent = 'Sending...';
      try {
        var r = await fetch('/api/developer-interest', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            name: document.getElementById('dev-name').value,
            email: document.getElementById('dev-email').value,
            idea: document.getElementById('dev-idea').value
          })
        });
        msg.style.display = 'block';
        if (r.ok) {
          msg.textContent = 'Got it. Will review it personally and reach out.';
          msg.style.color = 'var(--navy)';
          form.reset();
        } else {
          msg.textContent = 'Something went wrong. Email developers@neurontechnologies.ai directly.';
          msg.style.color = '#c44';
        }
      } catch(err) {
        msg.style.display = 'block';
        msg.textContent = 'Connection error. Email developers@neurontechnologies.ai directly.';
        msg.style.color = '#c44';
      }
      btn.disabled = false;
      btn.textContent = 'Send interest →';
    });
  })();
  </script>

</section>

<style>
  #marketplace { padding: 6rem 0; }
  .marketplace-header { margin-bottom: 4rem; }
  .marketplace-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
  .marketplace-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  @media (max-width: 900px) { .marketplace-grid { grid-template-columns: 1fr; } }
  .marketplace-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .marketplace-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--navy);
    opacity: 0.7;
  }
  .marketplace-card-title { margin: 0; }
  .marketplace-card-body {
    font-family: var(--body);
    font-weight: 300;
    font-size: 0.875rem;
    color: var(--t2);
    line-height: 1.75;
    margin: 0;
  }
  .marketplace-categories { margin-bottom: 3rem; }
  .marketplace-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .marketplace-tag {
    font-family: var(--body);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--t2);
    background: rgba(0,82,160,.06);
    border: 1px solid rgba(0,82,160,.12);
    padding: 0.375rem 0.875rem;
    letter-spacing: 0.02em;
  }
  .marketplace-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.5rem;
    border: 1px solid rgba(0,82,160,.18);
    background: rgba(0,82,160,.02);
  }
  @media (max-width: 640px) { .marketplace-cta-inner { flex-direction: column; align-items: flex-start; } }

  /* Developer interest form */
  .dev-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  @media (max-width: 600px) { .dev-form-grid { grid-template-columns: 1fr; } }
  .dev-field { display: flex; flex-direction: column; gap: 0.5rem; }
  .dev-field-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.5rem; }
  .dev-label {
    font-family: var(--body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t3);
  }
  .dev-input {
    font-family: var(--body);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--t1);
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    padding: 0.75rem 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
  }
  .dev-input::placeholder { color: var(--t3); font-weight: 300; }
  .dev-input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0,82,160,.08);
  }
  .dev-textarea { resize: vertical; min-height: 120px; }
</style>
"
}
