feat: Begins hvac system performance

Sources/ViewController/Views/DehumidifierSize.swift

@@ -4,6 +4,13 @@ import Routes
 import Styleguide
 
 struct DehumidifierSizeForm: HTML {
+
+  let response: DehumidifierSize.Response?
+
+  init(response: DehumidifierSize.Response? = nil) {
+    self.response = response
+  }
+
   var content: some HTML {
     FormHeader(label: "Dehumidifier Sizing Calculator", svg: .droplets)
     form(
@@ -32,7 +39,11 @@ struct DehumidifierSizeForm: HTML {
         }
       }
     }
-    div(.id("result")) {}
+    div(.id("result")) {
+      if let response {
+        DehumidifierSizeResult(response: response)
+      }
+    }
   }
 }
 
@@ -41,16 +52,59 @@ struct DehumidifierSizeResult: HTML {
 
   var content: some HTML {
     ResultContainer(reset: .dehumidifierSize(.index)) {
-      div(.class("""
-        p-2 rounded-lg shadow-lg bg-blue-500
-        """
-      )) {
-        p { "Recommended Size: \(response.recommendedSize)" }
+      div(.class("py-4 block")) {
+        // Display calculated metrics.
+        div(.class("""
+        mb-6 sm:grid sm:grid-cols-1 sm:gap-4 lg:flex items-center lg:justify-between
+        text-blue-500 dark:text-slate-200
+        """)) {
+          div {
+            span(.class("font-semibold")) { "Base Moisture Load: " }
+            span(.class("font-light")) { "\(double: response.pintsPerDay) pints/day" }
+          }
+          if response.requiredCapacity != response.pintsPerDay {
+            div {
+              span(.class("font-semibold")) { "Required Capacity (derated): " }
+              span(.class("font-light")) { "\(double: response.requiredCapacity) pints/day" }
+            }
+          }
+        }
+
+        p(.class("font-semibold mb-4 dark:text-yellow-300")) { "Recommended Size:" }
+
+        a(
+          .target("_blank"), .href(response.recommendedUrl ?? "#"), .rel("noopener noreferrer")
+        ) {
+          div(.class("""
+            px-8 py-2 flex items-center justify-between border border-blue-700 rounded-lg shadow-lg group
+            dark:bg-blue-400 hover:bg-blue-300 hover:dark:bg-blue-600
+            transition-colors
+          """)) {
+            div {
+              span(.class("font-extrabold text-4xl text-blue-800")) { "\(response.recommendedSize) PPD" }
+              p(.class("text-sm mt-1")) { "Click to view recommended model →" }
+            }
+
+            div(.class("""
+              w-12 h-12 rounded-full flex items-center justify-center
+              bg-blue-500 dark:bg-blue-600
+              group-hover:bg-blue-600 group-hover:dark:bg-blue-700
+              transition-colors
+            """)) {
+              SVG(.droplets, color: .white)
+            }
+          }
+        }
       }
 
       // Display warnings, if applicable
       if response.warnings.count > 0 {
-        div(.class("w-full mt-8 p-4 rounded-lg shadow-lg text-amber-500 bg-amber-200 border border-amber-500")) {
+        div(.class("""
+          w-full mt-6 p-4 rounded-lg shadow-lg
+          text-amber-500
+          bg-amber-100 dark:bg-amber-200
+          border border-amber-500
+        """)) {
           span(.class("font-semibold mb-4 border-b")) { "Warning\(response.warnings.count > 1 ? "s:" : ":")" }
           ul(.class("list-disc mx-10")) {
             for warning in response.warnings {