feat(native-el-ui): convert all component files to el-html vessel API

Replaced raw HTML heredoc returns with native el_ function calls across
all 21 component files. styles.el intentionally excluded.

src/efficiency.el

@@ -1,74 +1,89 @@
 // 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 {
-    return <section id="efficiency" aria-label="Token efficiency and environment">
-  <div class="container">
+    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&#39;t afterthoughts - they&#39;re structural properties of the architecture. I built it that way from the start."
+        )
+    )
 
-    <div class="efficiency-header">
-      <div class="efficiency-label-row reveal">
-        <div class="navy-line-left" style="width:4rem;flex-shrink:0"></div>
-        <span class="label">Efficiency</span>
-      </div>
-      <h2 class="display-lg reveal" style="transition-delay:80ms;max-width:32rem">
-        Every token spent <span class="gold">is a choice.</span>
-      </h2>
-      <p class="efficiency-sub reveal" style="transition-delay:160ms;margin-top:1.25rem">
-        Cost and environmental impact aren&#39;t afterthoughts - they&#39;re structural properties of the architecture. I built it that way from the start.
-      </p>
-    </div>
+    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>"
 
-    <div class="efficiency-grid">
+    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.")
+    )
 
-      <div class="efficiency-card card-dark reveal">
-        <div class="efficiency-icon">
-          <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>
-        </div>
-        <p class="efficiency-stat">0 cloud tokens</p>
-        <p class="efficiency-title">Local inference</p>
-        <div class="efficiency-rule"></div>
-        <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.</p>
-      </div>
+    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>"
 
-      <div class="efficiency-card card-dark reveal" style="transition-delay:150ms">
-        <div class="efficiency-icon">
-          <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>
-        </div>
-        <p class="efficiency-stat">Use less</p>
-        <p class="efficiency-title">Per-task routing</p>
-        <div class="efficiency-rule"></div>
-        <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.</p>
-      </div>
+    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.")
+    )
 
-      <div class="efficiency-card card-dark reveal" style="transition-delay:300ms">
-        <div class="efficiency-icon">
-          <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>
-        </div>
-        <p class="efficiency-stat">Fewer tokens</p>
-        <p class="efficiency-title">Same work done</p>
-        <div class="efficiency-rule"></div>
-        <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.</p>
-      </div>
+    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>"
 
-    </div>
+    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.")
+    )
 
-    <div class="efficiency-pullquote reveal">
-      <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.</p>
-    </div>
+    let grid: String = el_div("class=\"efficiency-grid\"", card1 + card2 + card3)
 
-  </div>
-  <div class="container" style="margin-top:5rem"><div class="navy-line"></div></div>
-</section>
+    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
+    )
 }