// components/pricing.el - Three pricing cards: Free / Professional / Founding Member.
// Accepts the founding counter values as parameters so main.el can inject
// server-side rendered counts without JS.

fn founding_spots_html(sold: Int, total: Int) -> String {
    let remaining: Int = total - sold
    let pct: Int = (sold * 100) / total
    let pct_str: String = int_to_str(pct)
    let remaining_str: String = int_to_str(remaining)
    let sold_str: String = int_to_str(sold)
    let total_str: String = int_to_str(total)
    return "
        <div class=\"founding-spots\">
          <p class=\"founding-spots-label\">Only " + remaining_str + " left</p>
          <div class=\"founding-spots-bar\"><div class=\"founding-spots-fill\" style=\"width:" + pct_str + "%\"></div></div>
          <p class=\"founding-spots-sub\">" + sold_str + " of " + total_str + " claimed</p>
        </div>
"
}

fn pricing(sold: Int, total: Int) -> String {
    let spots_html: String = founding_spots_html(sold, total)
    let remaining: Int = total - sold
    let pct: Int = (sold * 100) / total
    let pct_str: String = int_to_str(pct)
    let remaining_str: String = int_to_str(remaining)
    let total_str: String = int_to_str(total)

    return "
<section id=\"pricing\" aria-label=\"Pricing\">
  <div class=\"container\">

    <div class=\"pricing-header\">
      <div class=\"pricing-label-row reveal\">
        <div style=\"height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))\"></div>
        <span class=\"label\" style=\"color:var(--navy-85)\">Pricing</span>
        <div style=\"height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))\"></div>
      </div>
      <h2 class=\"display-lg pricing-headline reveal\" style=\"transition-delay:80ms\">Own it. Don&#39;t rent it.</h2>
      <p class=\"pricing-sub reveal\" style=\"transition-delay:160ms\">Bring your own API keys on day one. Neuron Inference - our own model layer, priced below the major APIs - launches Q3 2026.</p>
    </div>

    <div class=\"pricing-grid\">

      <div class=\"pricing-card card-dark reveal\">
        <p class=\"pricing-tier\">Free</p>
        <div class=\"pricing-price-row\">
          <span class=\"pricing-price\">$0</span>
          <span class=\"pricing-cadence\">forever</span>
        </div>
        <p class=\"pricing-tagline\">Start building your memory. No card required.</p>
        <ul class=\"pricing-features\">
          <li><span class=\"dash\">-</span><span>Persistent memory - never resets</span></li>
          <li><span class=\"dash\">-</span><span>Bring your own API keys (OpenAI, Anthropic, Grok...)</span></li>
          <li><span class=\"dash\">-</span><span>Local inference via Ollama (coming)</span></li>
          <li><span class=\"dash\">-</span><span>Neuron Inference included when it launches - Q3 2026</span></li>
          <li><span class=\"dash\">-</span><span>Unlimited projects</span></li>
          <li><span class=\"dash\">-</span><span>3 marketplace plugins included</span></li>
          <li><span class=\"dash\">-</span><span>Core built-in capabilities</span></li>
        </ul>
        <div style=\"flex:1\"></div>
        <div class=\"pricing-cta pricing-cta-ghost\">
          <button class=\"pricing-cta-ghost\" data-checkout=\"free\">Preorder free tier &#8594;</button>
        </div>
      </div>

      <div class=\"pricing-card card-dark reveal\" style=\"transition-delay:150ms\">
        <p class=\"pricing-tier\">Professional</p>
        <div class=\"pricing-price-row\">
          <span class=\"pricing-price\">$19</span>
          <span class=\"pricing-cadence\">/ month</span>
        </div>
        <p class=\"pricing-tagline\">Full access. Use your own API keys now. Neuron Inference when it launches.</p>
        <ul class=\"pricing-features\">
          <li><span class=\"dash\">-</span><span>Bring your own API keys - use any model, any provider</span></li>
          <li><span class=\"dash\">-</span><span>Neuron Inference - Q3 2026, priced below OpenAI and Anthropic</span></li>
          <li><span class=\"dash\">-</span><span>Everything in Free</span></li>
          <li><span class=\"dash\">-</span><span>Unlimited projects</span></li>
          <li><span class=\"dash\">-</span><span>Full plugin marketplace</span></li>
          <li><span class=\"dash\">-</span><span>Advanced integrations - IDE, Slack, and more</span></li>
          <li><span class=\"dash\">-</span><span>Early access to new features</span></li>
        </ul>
        <div style=\"flex:1\"></div>
        <div class=\"pricing-cta pricing-cta-navy\">
          <button class=\"pricing-cta-navy\" data-checkout=\"professional\">Preorder &#8594;</button>
        </div>
      </div>

      <div class=\"pricing-card featured reveal\" style=\"transition-delay:300ms\">
        <p class=\"pricing-tier\">Founding Member</p>
        <div class=\"pricing-price-row\">
          <span class=\"pricing-price\">$199</span>
          <span class=\"pricing-cadence\">lifetime</span>
        </div>
        <p class=\"pricing-tagline\">Pay once. Everything, forever. Including Neuron Inference when it launches.</p>

        " + spots_html + "

        <ul class=\"pricing-features\">
          <li><span class=\"dash\">-</span><span>Neuron Inference (Q3 2026) - founding member rate, priced below the major APIs</span></li>
          <li><span class=\"dash\">-</span><span>Everything in Professional - forever</span></li>
          <li><span class=\"dash\">-</span><span>Never pay again - lifetime updates included</span></li>
          <li><span class=\"dash\">-</span><span>Founding member badge in the app</span></li>
          <li><span class=\"dash\">-</span><span>Private founding member community</span></li>
          <li><span class=\"dash\">-</span><span>Shape the roadmap - your votes carry more weight</span></li>
          <li><span class=\"dash\">-</span><span>Beta features before general release</span></li>
          <li><span class=\"dash\">-</span><span>Name in the credits</span></li>
        </ul>

        <div style=\"flex:1\"></div>
        <div class=\"pricing-cta pricing-cta-solid\">
          <button class=\"pricing-cta-solid\" data-checkout=\"founding\">Preorder — claim your spot &#8594;</button>
        </div>
      </div>

    </div>

    <div class=\"founding-banner reveal\">
      <div>
        <p class=\"founding-banner-label\">Founding Member Spots</p>
        <div style=\"display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0\">
          <span class=\"founding-banner-count\">" + remaining_str + "</span>
          <span class=\"founding-banner-sub\">remaining of <span>" + total_str + "</span></span>
        </div>
        <div class=\"founding-banner-bar\"><div class=\"founding-banner-fill\" style=\"width:" + pct_str + "%\"></div></div>
      </div>
      <button class=\"btn-primary\" data-checkout=\"founding\" style=\"white-space:nowrap\">Preorder &#8594;</button>
    </div>

    <p class=\"pricing-fine reveal\" style=\"margin-top:2.5rem\">
      Bring your own API keys &nbsp;&middot;&nbsp; Local inference via Ollama (coming) &nbsp;&middot;&nbsp; Neuron Inference - Q3 2026 &nbsp;&middot;&nbsp; Your data stays yours
    </p>
    <p class=\"pricing-fine reveal\" style=\"margin-top:1rem;font-size:0.8rem\">
      Includes 2 devices per plan &nbsp;&middot;&nbsp; Additional devices available at a small extra cost &nbsp;&middot;&nbsp; We&#39;re not greedy
    </p>

  </div>
</section>
"
}
