// components/pillars.el - Three core pillars section.
//
// I. Remembers / II. Learns / III. Yours
// Cards use reveal animation class (CSS IntersectionObserver polyfill
// provided by a tiny inline <script> in the page shell).

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_h3(attrs: String, text: String) -> String
extern fn el_p(attrs: String, children: String) -> String

fn pillars() -> String {
    let label_row: String = el_div(
        "class=\"pillars-label reveal\"",
        el_div("class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"", "") +
        el_span("class=\"label\"", "Why Neuron")
    )

    let card1: String = el_div(
        "class=\"pillar-card card-dark reveal\"",
        el_span("class=\"pillar-numeral\" aria-hidden=\"true\"", "I") +
        el_h3("class=\"display-md pillar-title\"", "Remembers") +
        el_div("class=\"pillar-rule\"", "") +
        el_p("class=\"pillar-body\"", "Every session picks up where you left off. Every project. Every context. No more re-explaining who you are, what you&#39;re building, or what matters to you.") +
        el_p("class=\"pillar-detail\"", "Zero re-orientation")
    )

    let card2: String = el_div(
        "class=\"pillar-card card-dark reveal\" style=\"transition-delay:150ms\"",
        el_span("class=\"pillar-numeral\" aria-hidden=\"true\"", "II") +
        el_h3("class=\"display-md pillar-title\"", "Sharpens") +
        el_div("class=\"pillar-rule\"", "") +
        el_p("class=\"pillar-body\"", "The longer you use it, the sharper it gets. Every session builds on the last. Neuron Inference arrives Q3 2026 - not a wrapper around someone else&#39;s model. Purpose-built. Built for you.") +
        el_p("class=\"pillar-detail\"", "Specific to you")
    )

    let card3: String = el_div(
        "class=\"pillar-card card-dark reveal\" style=\"transition-delay:300ms\"",
        el_span("class=\"pillar-numeral\" aria-hidden=\"true\"", "III") +
        el_h3("class=\"display-md pillar-title\"", "Yours") +
        el_div("class=\"pillar-rule\"", "") +
        el_p("class=\"pillar-body\"", "Runs locally. Your data never leaves. No cloud dependency, no telemetry, no training on your conversations. Complete ownership. And unlike every other AI subscription - we&#39;re not charging you to remember you.") +
        el_p("class=\"pillar-detail\"", "Fully private")
    )

    let grid: String = el_div("class=\"pillars-grid\"", card1 + card2 + card3)

    el_section(
        "id=\"pillars\" aria-label=\"Core pillars\"",
        el_div("class=\"container\"", label_row + grid)
    )
}