// 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. extern fn el_section(attrs: String, children: String) -> String extern fn el_div(attrs: String, children: String) -> String extern fn el_span(attrs: String, children: String) -> String extern fn el_h2(attrs: String, text: String) -> String extern fn el_p(attrs: String, children: String) -> String extern fn el_ul(attrs: String, children: String) -> String extern fn el_li(attrs: String, children: String) -> String extern fn el_button(attrs: String, label: String) -> String 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) el_div( "class=\"founding-spots\"", el_p("class=\"founding-spots-label\"", "Only " + remaining_str + " left") + el_div( "class=\"founding-spots-bar\"", el_div("class=\"founding-spots-fill\" style=\"width:" + pct_str + "%\"", "") ) + el_p("class=\"founding-spots-sub\"", sold_str + " of " + total_str + " claimed") ) } fn pricing_free_features() -> String { el_li("", el_span("class=\"dash\"", "-") + el_span("", "Persistent memory - never resets")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Bring your own API keys (OpenAI, Anthropic, Grok...)")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Local inference via Ollama (coming)")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference included when it launches - Q3 2026")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Unlimited projects")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "3 marketplace plugins included")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Core built-in capabilities")) } fn pricing_pro_features() -> String { el_li("", el_span("class=\"dash\"", "-") + el_span("", "Bring your own API keys - use any model, any provider")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference - Q3 2026, priced below OpenAI and Anthropic")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Everything in Free")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Unlimited projects")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Full plugin marketplace")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Advanced integrations - IDE, Slack, and more")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Early access to new features")) } fn pricing_founding_features() -> String { el_li("", el_span("class=\"dash\"", "-") + el_span("", "Neuron Inference (Q3 2026) - pay-per-use at the founding member rate, below the major APIs")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Everything in Professional - forever")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "No subscription — software updates are free forever")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Founding member badge in the app")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Private founding member community")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Shape the roadmap - your votes carry more weight")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Beta features before general release")) + el_li("", el_span("class=\"dash\"", "-") + el_span("", "Name in the credits")) } 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) let header: String = el_div( "class=\"pricing-header\"", el_div( "class=\"pricing-label-row reveal\"", el_div("style=\"height:1px;width:4rem;background:linear-gradient(to right,transparent,rgba(0,82,160,.35))\"", "") + el_span("class=\"label\" style=\"color:var(--navy-85)\"", "Pricing") + el_div("style=\"height:1px;width:4rem;background:linear-gradient(to left,transparent,rgba(0,82,160,.35))\"", "") ) + el_h2("class=\"display-lg pricing-headline reveal\" style=\"transition-delay:80ms\"", "Own it. Don't rent it.") + el_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." ) ) let card_free: String = el_div( "class=\"pricing-card card-dark reveal\"", el_p("class=\"pricing-tier\"", "Free") + el_div( "class=\"pricing-price-row\"", el_span("class=\"pricing-price\"", "$0") + el_span("class=\"pricing-cadence\"", "forever") ) + el_p("class=\"pricing-tagline\"", "Start building your memory. Card required for age verification — you won't be charged.") + el_ul("class=\"pricing-features\"", pricing_free_features()) + el_div("style=\"flex:1\"", "") + el_div( "class=\"pricing-cta pricing-cta-ghost\"", el_button("class=\"pricing-cta-ghost\" data-checkout=\"free\"", "Preorder free tier →") ) ) let card_pro: String = el_div( "class=\"pricing-card card-dark reveal\" style=\"transition-delay:150ms\"", el_p("class=\"pricing-tier\"", "Professional") + el_div( "class=\"pricing-price-row\"", el_span("class=\"pricing-price\"", "$19") + el_span("class=\"pricing-cadence\"", "/ month") ) + el_p("class=\"pricing-tagline\"", "Full access. Use your own API keys now. Neuron Inference when it launches.") + el_ul("class=\"pricing-features\"", pricing_pro_features()) + el_div("style=\"flex:1\"", "") + el_div( "class=\"pricing-cta pricing-cta-navy\"", el_button("class=\"pricing-cta-navy\" data-checkout=\"professional\"", "Preorder →") ) ) let card_founding: String = el_div( "class=\"pricing-card featured reveal\" style=\"transition-delay:300ms\"", el_p("class=\"pricing-tier\"", "Founding Member") + el_div( "class=\"pricing-price-row\"", el_span("class=\"pricing-price\"", "$199") + el_span("class=\"pricing-cadence\"", "lifetime") ) + el_p("class=\"pricing-tagline\"", "Pay once for the platform — free software updates, forever. Inference is pay-per-use at your founding member rate.") + spots_html + el_ul("class=\"pricing-features\"", pricing_founding_features()) + el_div("style=\"flex:1\"", "") + el_div( "class=\"pricing-cta pricing-cta-solid\"", el_button("class=\"pricing-cta-solid\" data-checkout=\"founding\"", "Preorder — claim your spot →") ) ) let grid: String = el_div("class=\"pricing-grid\"", card_free + card_pro + card_founding) let banner_fill: String = el_div( "class=\"founding-banner-fill\" style=\"width:" + pct_str + "%\"", "" ) let banner: String = el_div( "class=\"founding-banner reveal\"", el_div( "", el_p("class=\"founding-banner-label\"", "Founding Member Spots") + el_div( "style=\"display:flex;align-items:baseline;gap:.5rem;margin:.25rem 0\"", el_span("class=\"founding-banner-count\"", remaining_str) + el_span("class=\"founding-banner-sub\"", "remaining of " + el_span("", total_str)) ) + el_div("class=\"founding-banner-bar\"", banner_fill) ) + el_button("class=\"btn-primary\" data-checkout=\"founding\" style=\"white-space:nowrap\"", "Preorder →") ) let fine1: String = el_p("class=\"pricing-fine reveal\" style=\"margin-top:2.5rem\"", "Bring your own API keys  ·  Local inference via Ollama (coming)  ·  Neuron Inference - Q3 2026  ·  Your data stays yours" ) let fine2: String = el_p("class=\"pricing-fine reveal\" style=\"margin-top:1rem;font-size:0.8rem\"", "Includes 2 devices per plan  ·  Additional devices available at a small extra cost  ·  We're not greedy" ) el_section( "id=\"pricing\" aria-label=\"Pricing\"", el_div("class=\"container\"", header + grid + banner + fine1 + fine2) ) }