// components/how_it_works.el - "Three moments. Permanent context." steps.

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_br() -> String

fn how_it_works() -> String {
    let header: String = el_div(
        "class=\"hiw-header\"",
        el_div("class=\"navy-line\" style=\"margin-bottom:5rem\"", "") +
        el_div(
            "class=\"hiw-label-row reveal\"",
            el_div("class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"", "") +
            el_span("class=\"label\"", "How it works")
        ) +
        el_h2(
            "class=\"display-lg hiw-headline reveal\" style=\"transition-delay:80ms\"",
            "Three moments." + el_br() + el_span("class=\"gold\"", "Permanent context.")
        )
    )

    let step1: String = el_div(
        "class=\"reveal\"",
        el_div(
            "class=\"step-circle-row\"",
            el_div("class=\"step-circle\"", el_span("class=\"step-num\"", "01")) +
            el_span("class=\"step-aside\"", "5 minutes")
        ) +
        el_h3("class=\"display-md step-title\"", "Create your account") +
        el_p("class=\"step-body\"", "Sign up once. Your account links your license key to your identity - that's what keeps your memory yours and nobody else's. Then install with a single command. Runs locally. No cloud sync, no permissions you didn't grant.")
    )

    let step2: String = el_div(
        "class=\"reveal\" style=\"transition-delay:180ms\"",
        el_div(
            "class=\"step-circle-row\"",
            el_div("class=\"step-circle\"", el_span("class=\"step-num\"", "02")) +
            el_span("class=\"step-aside\"", "Just once")
        ) +
        el_h3("class=\"display-md step-title\"", "Your first session") +
        el_p("class=\"step-body\"", "Introduce yourself once. Neuron builds a model of your work, your preferences, and your context from the first conversation.")
    )

    let step3: String = el_div(
        "class=\"reveal\" style=\"transition-delay:360ms\"",
        el_div(
            "class=\"step-circle-row\"",
            el_div("class=\"step-circle\"", el_span("class=\"step-num\"", "03")) +
            el_span("class=\"step-aside\"", "Every session")
        ) +
        el_h3("class=\"display-md step-title\"", "Never start over") +
        el_p("class=\"step-body\"", "Open a new session days or months later. Neuron remembers. Every project, every decision, every thread - exactly where you left it.")
    )

    let steps_grid: String = el_div("class=\"steps-grid\"", step1 + step2 + step3)

    el_section(
        "id=\"how-it-works\" aria-label=\"How it works\"",
        el_div("class=\"container\"", header + steps_grid)
    )
}