import { Link } from "react-router-dom"
import { ArrowRight, Euro } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { CtaBanner } from "@/components/gebos/cta-banner"
import { Container, Section, SectionHeading } from "@/components/gebos/section"
import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
import { AssetRender, renders } from "@/components/gebos/site-assets"

const products = [
  {
    title: "UVI",
    sub: "Monatliche Verbrauchsinformation",
    description:
      "Verbrauchsdaten werden automatisch erfasst und die regelmäßigen Verbrauchsinformationen für die Bewohner bereitgestellt.",
    illustration: (
      <div className="relative">
        <AssetRender render={renders.gateway} imgClassName="w-28" />
      </div>
    ),
  },
  {
    title: "Heizkostenabrechnung",
    sub: "Verbrauchsdaten korrekt abrechnen",
    description:
      "Verbrauchsdaten strukturiert erfassen und für die jährliche Abrechnung nutzen.",
    illustration: <AssetRender render={renders.glassDonutShadow} alt="" className="w-28" />,
  },
  {
    title: "Rauchwarnmelder",
    sub: "Sicher überwacht, zentral verwaltet",
    description:
      "Rauchwarnmelder gemeinsam mit der übrigen Gebäudetechnik planen und verwalten.",
    illustration: <AssetRender render={renders.smokeAlarm} imgClassName="w-28" />,
  },
]

export default function ProductsPage() {
  return (
    <>
      <div className="bg-hero-glow">
        <Container>
          <Section className="pt-6 pb-10 sm:pt-7 sm:pb-12 lg:pt-8 lg:pb-14">
            <PageBreadcrumb
              className="mb-4"
              items={[
                { label: "Startseite", to: "/" },
                { label: "Produkte" },
              ]}
            />
            <SectionHeading
              title="Unsere Produkte"
              lead="Hier finden Sie eine Übersicht unserer Produkte für Messtechnik, Abrechnung und Verwaltung."
            />
            <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {products.map((s) => (
                <Card key={s.title} className="gap-0 p-6 sm:p-7">
                  <h3 className="text-xl font-extrabold tracking-tight text-navy">
                    {s.title}
                  </h3>
                  <p className="mt-1 text-sm text-muted-foreground">{s.sub}</p>
                  <div className="my-6 flex h-32 flex-1 items-center justify-center">
                    {s.illustration}
                  </div>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {s.description}
                  </p>
                  <Button
                    variant="link"
                    className="mt-3 self-start px-0"
                    asChild
                  >
                    <Link to="/produkte">
                      Mehr erfahren
                      <ArrowRight />
                    </Link>
                  </Button>
                </Card>
              ))}
            </div>
            <Card className="mt-6 flex-col items-start gap-4 p-5 sm:flex-row sm:items-center sm:p-6">
              <AssetRender
                render={renders.gateway}
                className="shrink-0"
                imgClassName="w-14"
              />
              <div className="min-w-0 flex-1">
                <h3 className="text-sm font-bold text-navy">
                  Messtechnik und Infrastruktur
                </h3>
                <p className="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                  Fernauslesbare Zähler, Sensoren und
                  Kommunikationsinfrastruktur für den laufenden Betrieb.
                </p>
              </div>
              <Button variant="link" className="shrink-0 px-0 sm:px-4" asChild>
                <Link to="/produkte">
                  Mehr erfahren
                  <ArrowRight />
                </Link>
              </Button>
            </Card>
          </Section>
        </Container>
      </div>
      <Container>
        <Section className="pt-0">
          <CtaBanner
            icon={<Euro />}
            title="Jetzt Preis für Ihr Gebäude berechnen"
            description="In wenigen Minuten zur ersten Preisindikation."
            actions={
              <Button variant="inverse" size="lg" asChild>
                <Link to="/konfigurator">Preis berechnen</Link>
              </Button>
            }
          />
        </Section>
      </Container>
    </>
  )
}