// components/efficiency.el - Token efficiency and environment section.
// Three cards: local inference / per-task routing / context compression.

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

fn efficiency() -> String {
    let header: String = el_div(
        "class=\"efficiency-header\"",
        el_div(
            "class=\"efficiency-label-row reveal\"",
            el_div("class=\"navy-line-left\" style=\"width:4rem;flex-shrink:0\"", "") +
            el_span("class=\"label\"", "Efficiency")
        ) +
        el_h2(
            "class=\"display-lg reveal\" style=\"transition-delay:80ms;max-width:32rem\"",
            "Every token spent " + el_span("class=\"gold\"", "is a choice.")
        ) +
        el_p(
            "class=\"efficiency-sub reveal\" style=\"transition-delay:160ms;margin-top:1.25rem\"",
            "Cost and environmental impact aren't afterthoughts - they're structural properties of the architecture. I built it that way from the start."
        )
    )

    let 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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z\"/>" +
        "<path d=\"M8 12s1.5-2 4-2 4 2 4 2\"/>" +
        "<path d=\"M9 9h.01M15 9h.01\"/>" +
        "<path d=\"M12 17c-1.5 0-3-.5-3-1.5S10 14 12 14s3 .5 3 1.5S13.5 17 12 17z\"/>" +
        "</svg>"

    let card1: String = el_div(
        "class=\"efficiency-card card-dark reveal\"",
        el_div("class=\"efficiency-icon\"", svg1) +
        el_p("class=\"efficiency-stat\"", "0 cloud tokens") +
        el_p("class=\"efficiency-title\"", "Local inference") +
        el_div("class=\"efficiency-rule\"", "") +
        el_p("class=\"efficiency-body\"", "The design: run inference entirely on-device via Ollama. No API calls, no inference cost, no carbon footprint from model compute. Full memory and context, zero cloud dependency. This is coming.")
    )

    let 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=\"6\" cy=\"18\" r=\"2\"/><circle cx=\"18\" cy=\"6\" r=\"2\"/><circle cx=\"18\" cy=\"18\" r=\"2\"/>" +
        "<path d=\"M6 16V8l6-4 6 4\"/><path d=\"M6 16l6 4 6-4\"/><path d=\"M12 4v16\"/>" +
        "</svg>"

    let card2: String = el_div(
        "class=\"efficiency-card card-dark reveal\" style=\"transition-delay:150ms\"",
        el_div("class=\"efficiency-icon\"", svg2) +
        el_p("class=\"efficiency-stat\"", "Use less") +
        el_p("class=\"efficiency-title\"", "Per-task routing") +
        el_div("class=\"efficiency-rule\"", "") +
        el_p("class=\"efficiency-body\"", "Simple tasks route to small, fast models. Complex reasoning escalates to frontier models only when necessary. And because every model has full access to your accumulated context, cheaper models punch well above their weight.")
    )

    let 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\">" +
        "<rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/>" +
        "<path d=\"M9 9h6M9 12h6M9 15h4\"/>" +
        "<path d=\"M16 15l2 2 2-2\"/>" +
        "</svg>"

    let card3: String = el_div(
        "class=\"efficiency-card card-dark reveal\" style=\"transition-delay:300ms\"",
        el_div("class=\"efficiency-icon\"", svg3) +
        el_p("class=\"efficiency-stat\"", "Fewer tokens") +
        el_p("class=\"efficiency-title\"", "Same work done") +
        el_div("class=\"efficiency-rule\"", "") +
        el_p("class=\"efficiency-body\"", "Every time you open ChatGPT and explain who you are again, that&#39;s computation that didn&#39;t need to happen. Persistent context means shorter, more targeted prompts. The same outcome with less compute - and a smaller footprint on the planet.")
    )

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

    let pullquote: String = el_div(
        "class=\"efficiency-pullquote reveal\"",
        el_p("", "The frontier model without memory of you is starting from scratch every time. A smaller, faster model with years of accumulated context on your work, your decisions, and your patterns will outperform it. The intelligence isn&#39;t in the model - it&#39;s in what the model knows about you.")
    )

    let bottom_line: String = el_div(
        "class=\"container\" style=\"margin-top:5rem\"",
        el_div("class=\"navy-line\"", "")
    )

    el_section(
        "id=\"efficiency\" aria-label=\"Token efficiency and environment\"",
        el_div("class=\"container\"", header + grid + pullquote) + bottom_line
    )
}