neuron-web/src/marketplace.el

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

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_h3(attrs: String, text: String) -> String
extern fn el_p(attrs: String, children: String) -> String
extern fn el_button(attrs: String, label: String) -> String
extern fn el_form(attrs: String, children: String) -> String
extern fn el_label(for_id: String, attrs: String, children: String) -> String
extern fn el_input(type_attr: String, attrs: String) -> String
extern fn el_textarea(attrs: String, value: String) -> String
extern fn el_script_src(src: String, defer_load: Bool) -> String

fn marketplace_svg1() -> String {
    "<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>"
}

fn marketplace_svg2() -> String {
    "<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>"
}

fn marketplace_svg3() -> String {
    "<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>"
}

fn marketplace_cards() -> String {
    let card1: String = el_div(
        "class=\"marketplace-card card-dark\"",
        el_div("class=\"marketplace-card-icon\"", marketplace_svg1()) +
        el_h3("class=\"display-md marketplace-card-title\"", "Plugins that know you") +
        el_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.")
    )
    let card2: String = el_div(
        "class=\"marketplace-card card-dark\" style=\"transition-delay:120ms\"",
        el_div("class=\"marketplace-card-icon\"", marketplace_svg2()) +
        el_h3("class=\"display-md marketplace-card-title\"", "Built by domain experts") +
        el_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.")
    )
    let card3: String = el_div(
        "class=\"marketplace-card card-dark\" style=\"transition-delay:240ms\"",
        el_div("class=\"marketplace-card-icon\"", marketplace_svg3()) +
        el_h3("class=\"display-md marketplace-card-title\"", "Revenue for builders") +
        el_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.")
    )
    el_div("class=\"marketplace-grid reveal\" style=\"transition-delay:200ms\"", card1 + card2 + card3)
}

fn marketplace_tags_block(label: String, tags: String) -> String {
    el_div(
        "style=\"margin-bottom:2rem\"",
        el_p("class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\"", label) +
        el_div("class=\"marketplace-tags\"", tags)
    )
}

fn marketplace_tag(t: String) -> String {
    el_span("class=\"marketplace-tag\"", t)
}

fn marketplace_categories() -> String {
    let connectors: String =
        marketplace_tag("Gmail") + marketplace_tag("Slack") + marketplace_tag("Google Calendar") + marketplace_tag("Google Drive") +
        marketplace_tag("Notion") + marketplace_tag("GitHub") + marketplace_tag("Linear") + marketplace_tag("More connectors at launch")
    let following: String =
        marketplace_tag("Process packets") + marketplace_tag("Knowledge packets")
    let imprints: String =
        marketplace_tag("CEO") + marketplace_tag("CTO") + marketplace_tag("CFO") + marketplace_tag("CMO") + marketplace_tag("COO") + marketplace_tag("More C-suite")

    el_div(
        "class=\"marketplace-categories reveal\" style=\"transition-delay:320ms\"",
        marketplace_tags_block("Connectors - day one", connectors) +
        marketplace_tags_block("Following launch", following) +
        el_div(
            "",
            el_p("class=\"label\" style=\"margin-bottom:1rem;color:var(--navy-65)\"", "Imprints - starting with") +
            el_div("class=\"marketplace-tags\"", imprints)
        )
    )
}

fn marketplace_dev_form() -> String {
    let input_style: String = "class=\"dev-input\""
    let field_name: String = el_div(
        "class=\"dev-field\"",
        el_label("dev-name", "class=\"dev-label\"", "Name") +
        el_input("text", "id=\"dev-name\" required placeholder=\"Your name\" " + input_style)
    )
    let field_email: String = el_div(
        "class=\"dev-field\"",
        el_label("dev-email", "class=\"dev-label\"", "Email") +
        el_input("email", "id=\"dev-email\" required placeholder=\"you@example.com\" " + input_style)
    )
    let field_idea: String = el_div(
        "class=\"dev-field dev-field-full\"",
        el_label("dev-idea", "class=\"dev-label\"", "What do you want to build?") +
        el_textarea("id=\"dev-idea\" required rows=\"5\" placeholder=\"Tell me about the plugin or integration you have in mind...\" class=\"dev-input dev-textarea\"", "")
    )
    let submit_row: String = el_div(
        "class=\"dev-field-full\"",
        el_button("type=\"submit\" class=\"btn-primary\"", "Send interest &rarr;") +
        el_p("id=\"dev-msg\" style=\"font-family:var(--body);font-size:0.8rem;color:var(--t3);margin-top:0.75rem;display:none\"", "")
    )
    el_form("id=\"dev-form\" class=\"dev-form-grid\"", field_name + field_email + field_idea + submit_row)
}

fn marketplace_style() -> String {
    let css: String = "#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; } }
  .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>" + css + "</style>"
}

fn marketplace() -> String {
    let header: String = el_div(
        "class=\"marketplace-header\"",
        el_div(
            "class=\"marketplace-label-row reveal\"",
            el_div("class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"", "") +
            el_span("class=\"label\" style=\"color:var(--navy-85)\"", "Marketplace") +
            el_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")
        ) +
        el_h2(
            "class=\"display-lg reveal\" style=\"transition-delay:80ms;max-width:38rem\"",
            "Extend Neuron." + el_span("class=\"gold\" style=\"display:block\"", "Build for it.")
        ) +
        el_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."
        )
    )

    let cta: String = el_div(
        "class=\"marketplace-cta reveal\" style=\"transition-delay:400ms\"",
        el_div(
            "class=\"marketplace-cta-inner\"",
            el_div(
                "",
                el_p("style=\"font-family:var(--body);font-weight:500;font-size:1rem;color:var(--t1);margin-bottom:0.5rem\"", "Building something?") +
                el_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."
                )
            ) +
            el_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;"
            )
        )
    )

    let dev_section: String = el_div(
        "id=\"developer-interest\" class=\"container\" style=\"display:none;margin-top:4rem;padding-top:4rem;border-top:1px solid rgba(0,82,160,.10)\"",
        el_div(
            "style=\"max-width:42rem\"",
            el_p("class=\"label\" style=\"margin-bottom:0.75rem;color:var(--navy-85)\"", "Developer Program") +
            el_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") +
            el_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."
            ) +
            marketplace_dev_form()
        )
    )

    el_section(
        "id=\"marketplace\" aria-label=\"Neuron Marketplace\"",
        el_div("class=\"container\"", header + marketplace_cards() + marketplace_categories() + cta) +
        dev_section +
        el_script_src("/js/marketplace.js", true) +
        marketplace_style()
    )
}