gebos-landing/component-library/src/pages/klarpreis.tsx

import { ClipboardCheck, Euro, House, ShieldCheck, Tag, Users2, Wifi } from "lucide-react"

import { Separator } from "@/components/ui/separator"
import { Container, Section } from "@/components/gebos/section"
import { PageHero } from "@/components/gebos/page-hero"
import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
import { HeroVisual } from "@/components/gebos/hero-visual"
import { IconBadge } from "@/components/gebos/icon-tile"
import { PriceCard } from "@/components/gebos/price-card"
import {
  SensorCubesIllustration,
  SmokeDetectorIllustration,
} from "@/components/gebos/illustrations"

const trustItems = [
  { icon: ClipboardCheck, label: ["Klare", "Vertragsstruktur"] },
  { icon: ShieldCheck, label: ["Keine versteckten", "Gebühren"] },
  { icon: Users2, label: ["Rabatte für", "große Objekte"] },
] as const

export default function KlarpreisPage() {
  return (
    <>
      <PageHero
        breadcrumb={
          <PageBreadcrumb
            items={[
              { label: "Startseite", to: "/" },
              { label: "GebOS Klarpreis" },
            ]}
          />
        }
        title={
          <>
            GebOS <span className="text-primary">Klarpreis</span>
          </>
        }
        lead="Drei sauber getrennte Leistungen. Einfache Preise. Keine Überraschungen."
        extra={
          <div className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-4 py-2 text-sm text-muted-foreground shadow-pill">
            <IconBadge variant="soft" size="sm">
              <House />
            </IconBadge>
            <span>Ideal für Wohngebäude, Hausverwaltungen und Bestandshalter.</span>
          </div>
        }
        visual={
          <HeroVisual
            media={<SmokeDetectorIllustration className="mx-auto w-48" />}
            chipTitle="Inspektion OK"
            chipSub="Letzte Prüfung 06.05.2024"
          />
        }
      />

      <Container>
        <Section className="pt-0">
          <div className="grid gap-6 lg:grid-cols-3">
            <PriceCard
              title="RWM-Hardware"
              cadence="Einmalig"
              price="42,00 €"
              unit="je Wohnung einmalig"
              allocation={{ label: "Nicht umlagefähig", tone: "negative" }}
              description="Rauchwarnmelder inklusive Montage und Eigentumsübertragung."
              media={<SmokeDetectorIllustration />}
            />
            <PriceCard
              title="Ferninspektion"
              cadence="Monatlich"
              price="2,20 €"
              unit="je Wohnung / Monat"
              allocation={{ label: "Grundsätzlich umlagefähig", tone: "positive" }}
              description="Regelmäßige Prüfung, Nachweise, Meldungen und Support."
              media={
                <div className="relative">
                  <SmokeDetectorIllustration />
                  <Wifi className="absolute -right-1 top-1 size-5 text-primary" />
                </div>
              }
            />
            <PriceCard
              title={
                <span className="text-[1.15rem] whitespace-nowrap">
                  UVI-Komplettbetrieb
                </span>
              }
              cadence="Monatlich"
              price="10,50 €"
              unit="je Wohnung / Monat"
              allocation={{ label: "Grundsätzlich umlagefähig", tone: "positive" }}
              description="Sensoren, Daten, Portal und Verbrauchsinformation inklusive."
              media={<SensorCubesIllustration />}
            />
          </div>

          <div className="mt-6 grid gap-6 lg:grid-cols-[1.4fr_1fr]">
            {/* total band */}
            <div className="flex flex-wrap items-center gap-6 rounded-2xl bg-brand-gradient p-6 shadow-band sm:flex-nowrap sm:p-7">
              <IconBadge variant="glass" size="xl">
                <Euro />
              </IconBadge>
              <div>
                <div className="font-semibold text-white/80">
                  Gesamtkosten laufend
                </div>
                <div className="mt-1 flex flex-wrap items-baseline gap-x-3">
                  <span className="text-4xl font-extrabold tracking-tight text-white">
                    12,70 €
                  </span>
                  <span className="text-sm text-white/75">
                    je Wohnung / Monat
                  </span>
                </div>
              </div>
              <Separator
                orientation="vertical"
                className="hidden self-stretch bg-white/25 sm:block"
              />
              <div className="flex items-center gap-3">
                <IconBadge variant="glass" size="sm">
                  <Tag />
                </IconBadge>
                <p className="max-w-56 text-sm leading-snug text-white/80">
                  Alle laufenden Leistungen klar gebündelt – ohne versteckte
                  Zusatzkosten.
                </p>
              </div>
            </div>

            {/* trust card */}
            <div className="grid grid-cols-3 divide-x divide-border rounded-2xl bg-card p-6 shadow-card">
              {trustItems.map(({ icon: Icon, label }) => (
                <div
                  key={label[1]}
                  className="flex flex-col items-center justify-center gap-2.5 px-2 text-center"
                >
                  <IconBadge variant="soft" size="lg" shape="circle">
                    <Icon />
                  </IconBadge>
                  <div className="text-sm leading-snug font-bold text-navy">
                    {label[0]}
                    <br />
                    {label[1]}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Section>
      </Container>
    </>
  )
}