fix: literally everything about the calculator

* CSS
* Logic
* Everything else

src/components/Checkbox.tsx

@@ -0,0 +1,31 @@
+import type { JSX } from "preact";
+
+export interface CheckboxProps {
+  name: string;
+  id: string;
+  labelText: string;
+  required?: boolean;
+}
+
+export function Checkbox({
+  name,
+  id,
+  labelText,
+  required,
+}: CheckboxProps): JSX.Element {
+  return (
+    <div class="top-16 flex w-72 flex-col items-center gap-4">
+      <label class="text-lg" for={id}>
+        {labelText}
+      </label>
+      <input
+        name={name}
+        type="checkbox"
+        /* Removal of ring based on https://romansorin.com/blog/disabling-the-tailwind-input-ring */
+        class="cursor-default rounded border-2 border-gray-500 bg-slate-200 shadow-md focus:outline-none focus:ring-1 focus:ring-offset-0 focus-visible:border-blue-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-800"
+        id={id}
+        required={required}
+      />
+    </div>
+  );
+}

src/content/geothermal/what.mdx

@@ -12,6 +12,13 @@ However, it’s important to remember that geothermal energy isn’t a new conce
 Humans have been using it for over 10,000 years for functions such as heating hot springs, cooking, and even space heating in cities such as Pompeii.
 Nowadays, it’s still mainly used for heating; however, if you install a converter, it can also be used for electricity.
 Due to this many large universities such as Yale, Brown, and Missouri S&T have been installing geothermal systems to power their campuses.
-The switch to geothermal is still beginning but it will be a worthy investment for the future.
+The switch to geothermal is still beginning, but it will be a worthy investment for the future.
 
-<img src="/images/geothermal_what.avif" alt="Geothermal mountain"/>
+<img src="/images/geothermal_what.avif" alt="Geothermal mountain" />
+
+There are four types of geothermal energy solutions.
+
+1.  Horizontal loop: Horizontal loop systems are best for properties with more land, as they are bigger and require deeper trenches.
+2.  Vertical Loop: Vertical loop systems are very narrow and great for residential areas!
+3.  Closed Loop: Closed loop systems mix water and antifreeze to accommodate cold climates, making them optimal for northern locations.
+4.  Open Loop: Open loop systems circulate water from an outside source, meaning that they are optimal for properties with a steady water source.

src/content/geothermal/worth-it.mdx

@@ -7,10 +7,13 @@ sectionHeader: Is It Worth It?
 Deciding to invest in a geothermal energy solution can be tricky.
 When comparing it to solar it’s a lot more expensive to start and can take up to 20 years to pay itself off.
 The pumps also require electricity to power so it’s not technically _free_.
-Similar to solar energy, there are also federal tax credits that range from 22% to 30%, applicable on the installation.
+Similar to solar energy, there are also federal tax credits that range from 22% to 30%, applicable on installation.
+When considering what solution to buy, keep in mind that estimates are rarely over $4000 off, though the actual prices vary depending on local labor costs and other factors.
+Additionally, if your state has high geothermic activity, then you will recoup your cost faster.
 However, geothermal can be much more efficient than wind and solar as it isn’t impacted by weather.
 It will always run as long as it’s powered.
 Also, depending on the loop system you choose and how it corresponds to your environment you can generate a lot more energy.
 Overall, investing in geothermal can be a smart choice depending on your location and budget as it will save you money over time and lessen carbon emissions.
+Feel free to ask our Why Switch AI chatbot for more information!
 
-<img src="/images/geothermal_worth.avif" alt="Geothermal plant"/>
+<img src="/images/geothermal_worth.avif" alt="Geothermal plant" />

src/islands/StateSelector.tsx → src/islands/Selector.tsx

@@ -2,22 +2,34 @@ import { IS_BROWSER } from "$fresh/runtime.ts";
 import { Combobox, Transition } from "@headlessui/react";
 import { useSignal } from "@preact/signals";
 import { Fragment, type JSX } from "preact";
-import { type State, states } from "../utils/calc.ts";
 import { IconCheck, IconChevronDown } from "../utils/icons.ts";
 import { tw } from "../utils/tailwind.ts";
 
-export interface StateSelectorProps {
-  currentState?: State | undefined;
+export interface SelectorProps<T extends string, U extends T> {
+  name: string;
+  question: string;
+  list: SelectorListObject<T>[];
+  current?: U | undefined;
+  required?: boolean;
 }
 
-export function StateSelector({
-  currentState,
-}: StateSelectorProps): JSX.Element {
-  const state = useSignal(currentState);
+export interface SelectorListObject<T extends string> {
+  name: string;
+  value: T;
+}
+
+export function Selector<T extends string, U extends T>({
+  name,
+  question,
+  list,
+  current: currentValue,
+  required,
+}: SelectorProps<T, U>): JSX.Element {
+  const current = useSignal(list.find((val) => val.name === currentValue));
   const query = useSignal("");
 
-  const filteredStates = states.filter((state) =>
-    state
+  const filtered = list.filter((item) =>
+    item.name
       .toLowerCase()
       .replace(/\s+/g, "")
       .includes(query.value.toLowerCase().replace(/\s+/g, "")),
@@ -27,20 +39,20 @@ export function StateSelector({
     <div class="top-16 flex w-72 flex-col items-center gap-4">
       <Combobox
         disabled={!IS_BROWSER}
-        value={state.value}
-        onChange={(newState) => {
-          state.value = newState;
+        value={current.value}
+        onChange={(newValue) => {
+          current.value = newValue;
         }}
       >
-        <Combobox.Label class="text-lg">
-          What state are you from?
-        </Combobox.Label>
+        <Combobox.Label class="text-lg">{question}</Combobox.Label>
         <div class="relative mt-1 w-min">
           <div class="relative w-full cursor-default rounded-lg bg-slate-200 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm dark:bg-slate-800 dark:focus-visible:ring-black/75 dark:focus-visible:ring-offset-teal-700">
             <Combobox.Input
-              name="region"
+              name={name}
               class="rounded border-2 border-gray-500 bg-slate-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-800"
               autoComplete="off"
+              required={required}
+              displayValue={(state: SelectorListObject<T>) => `${state.name}`}
               onChange={(event) => {
                 if (event.target instanceof HTMLInputElement) {
                   query.value = event.target.value;
@@ -66,17 +78,17 @@ export function StateSelector({
               query.value = "";
             }}
           >
-            <Combobox.Options class="absolute mt-1 max-h-60 w-full max-w-full overflow-auto rounded-md bg-slate-200 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm dark:bg-slate-800">
-              {filteredStates.length === 0 && query.value !== "" ? (
+            <Combobox.Options class="absolute z-10 mt-1 max-h-60 w-full max-w-full overflow-auto rounded-md bg-slate-200 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm dark:bg-slate-800">
+              {filtered.length === 0 && query.value !== "" ? (
                 <div class="relative cursor-default select-none px-4 py-2 text-gray-700">
                   No results found
                 </div>
               ) : (
-                filteredStates.map((state) => (
+                filtered.map((item) => (
                   <Combobox.Option
-                    key={state}
+                    key={item.name}
                     class="relative cursor-default select-none rounded-md py-2 pl-10 pr-4 ui-active:bg-green-500 ui-active:text-white ui-not-active:text-gray-900 dark:ui-active:bg-green-700 ui-not-active:dark:text-gray-100"
-                    value={state}
+                    value={item}
                   >
                     {({ selected, active }) => (
                       <>
@@ -85,17 +97,17 @@ export function StateSelector({
                             selected ? tw`font-medium` : tw`font-normal`
                           }`}
                         >
-                          {state}
+                          {item.name}
                         </span>
-                        {selected ? (
+                        {selected && (
                           <span
                             class={tw`absolute inset-y-0 left-0 flex items-center pl-3 ${
                               active ? tw`text-white` : tw`text-green-700`
                             }`}
                           >
                             <IconCheck class="h-5 w-5" aria-hidden="true" />
                           </span>
-                        ) : undefined}
+                        )}
                       </>
                     )}
                   </Combobox.Option>