import Elementary
import ElementaryHTMX
import Routes
import Styleguide

struct HomePage: HTML, Sendable {

  var content: some HTML {
    div(.class("grid grid-cols-2 gap-4 justify-items-start")) {
      group(
        label: "Mold Risk",
        description: MoldRisk.description,
        svg: .thermometer,
        route: .moldRisk(.index)
      )
      group(
        label: "Dehumdifier Sizing",
        description: DehumidifierSize.description,
        svg: .droplets,
        route: .dehumidifierSize(.index)
      )
      group(
        label: "Attic Ventilation",
        description: AtticVentilation.description,
        svg: .wind,
        route: .atticVentilation(.index)
      )
      group(
        label: "HVAC System Performance",
        description: HVACSystemPerformance.description,
        svg: .thermometerSun,
        route: .hvacSystemPerformance(.index)
      )
      group(
        label: "Room Pressure",
        description: RoomPressure.description,
        svg: .leftRightArrow,
        route: .roomPressure(.index)
      )
      group(
        label: "Capacitor Calculator",
        description: Capacitor.description,
        svg: .zap,
        route: .capacitor(.index)
      )
      group(
        label: "Filter Sizing",
        description: FilterPressureDrop.description,
        svg: .funnel,
        route: .filterPressureDrop(.index)
      )
      group(
        label: "Heating Balance Point",
        description: HeatingBalancePoint.description,
        svg: .scale,
        route: .heatingBalancePoint(.index)
      )
      group(
        label: "Psychrometrics",
        description: Psychrometrics.description,
        svg: .droplets,
        route: .psychrometrics(.index)
      )
      group(
        label: "Hydronic System Pressure",
        description: HydronicSystemPressure.description,
        svg: .circleGauge,
        route: .hydronicSystemPressure(.index)
      )
    }
  }

  private func group(
    label: String,
    description: String,
    svg: SVGType,
    route: SiteRoute.View
  ) -> some HTML {
    button(
      .hx.get(route: route), .hx.target("#content"), .hx.pushURL(true),
      .class("""
      w-full rounded-xl shadow-lg border border-blue-600 justify-items-start
      hover:bg-blue-600 hover:border-yellow-300 hover:text-yellow-300 transition-colors
      """)
    ) {
      div(.class("p-4 content-start")) {
        div(.class("flex mb-6")) {
          SVG(svg, color: .blue)
            .attributes(.class("pe-2"))
          h2(.class("font-bold text-2xl")) { label }
        }
        p { description }
      }
    }
  }
}