import { Link } from "react-router-dom"
import {
  Ban,
  Euro,
  LayoutDashboard,
  Package,
  Timer,
  TrendingUp,
  Unlock,
  X,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Section, SectionHeading } from "@/components/gebos/section"
import { CtaBanner } from "@/components/gebos/cta-banner"
import { IconBadge } from "@/components/gebos/icon-tile"
import { NumberedList } from "@/components/gebos/process-steps"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/gebos/site-assets"
import { AudiencePage } from "@/pages/audiences/audience-page"

const deviceExamples = [
  "Wärmemengenzähler",
  "Warmwasserzähler",
  "Kaltwasserzähler",
  "Kommunikationsinfrastruktur",
  "Rauchwarnmelder",
]

const rolloutSteps = [
  {
    title: "Portfolio und Objekte erfassen",
    description:
      "Bei der Auftragserstellung werden die betreffenden Gebäude, Wohnungen und die vorhandene beziehungsweise benötigte Ausstattung erfasst.",
  },
  {
    title: "Gerätebedarf bestimmen",
    description: (
      <>
        Für jedes Objekt wird festgelegt, welche Geräte benötigt werden.
        Beispielsweise:
        <span className="mt-2 flex flex-wrap gap-1.5">
          {deviceExamples.map((device) => (
            <Badge key={device} variant="muted">
              {device}
            </Badge>
          ))}
        </span>
      </>
    ),
  },
  {
    title: "GebOS bereitet den Rollout vor",
    description:
      "Gebäude und Wohnungen werden im System angelegt und die Hardware wird objektbezogen vorbereitet.",
  },
  {
    title: "Installationsfertig liefern",
    description:
      "Die Geräte werden passend zum jeweiligen Gebäude beziehungsweise zur jeweiligen Nutzungseinheit ausgeliefert.",
  },
  {
    title: "Bestehende Monteure installieren",
    description:
      "Eigene Mitarbeiter, Hausmeister oder bestehende Installationspartner können die Montage übernehmen. Eine umfangreiche Softwarekonfiguration vor Ort ist nicht erforderlich.",
  },
  {
    title: "Bewohner einladen",
    description:
      "Nach der Einrichtung müssen im Wesentlichen noch die relevanten Bewohnerdaten ergänzt beziehungsweise Einladungen zum Mieterportal versendet werden.",
  },
]

const noEffortItems = [
  { icon: <Ban />, title: "Keine aufwendige Gerätekonfiguration." },
  { icon: <X />, title: "Keine manuelle Anlage jedes einzelnen Gerätes." },
  {
    icon: <Unlock />,
    title: "Keine spezielle GebOS-Zertifizierung für den Installateur.",
  },
]

const portfolioStats = [
  { value: "48", label: "Gebäude" },
  { value: "384", label: "Wohnungen" },
  { value: "1.746", label: "Geräte" },
]

const statusInfos = [
  "Auftrag angelegt",
  "Hardware vorbereitet",
  "Versendet",
  "Installation begonnen",
  "Installation vollständig",
  "Geräte aktiv",
  "Bewohner eingeladen",
  "Handlungsbedarf",
]

const whyGebos = [
  {
    title: "Schneller Rollout",
    sub: "Standardisierte Abläufe ermöglichen die parallele Umsetzung vieler Objekte.",
  },
  {
    title: "Weniger Administration",
    sub: "Gebäudedaten werden möglichst nur einmal erfasst und anschließend weiterverwendet.",
  },
  {
    title: "Vorkonfigurierte Hardware",
    sub: "Geräte werden bereits passend zu den jeweiligen Objekten vorbereitet.",
  },
  {
    title: "Bestehende Installationspartner",
    sub: "Eigene Hausmeister, technische Mitarbeiter oder externe Fachbetriebe können weiter eingesetzt werden.",
  },
  {
    title: "Zentrale Portfolioübersicht",
    sub: "Gebäude, Wohnungen und Geräte lassen sich gemeinsam betrachten.",
  },
  {
    title: "Ein Ansprechpartner",
    sub: "Technik und laufende digitale Dienstleistungen greifen ineinander.",
  },
]

/** Portfolio/rollout hero per asset kit 06: building, teal bars, consumption ring. */
function PortfolioHeroArt() {
  return (
    <div className="relative aspect-[1.28] w-full">
      <img
        src={vectors.tealBars}
        alt=""
        className="absolute top-[22%] right-0 w-[44%]"
      />
      <AssetRender
        render={renders.building}
        className="absolute inset-x-[8%] top-[4%]"
        imgClassName="w-full"
        loading="eager"
      />
      <img
        src={vectors.consumptionRing}
        alt=""
        className="absolute bottom-[3%] left-[2%] w-[28%]"
      />
    </div>
  )
}

export default function HausverwaltungenPage() {
  return (
    <AudiencePage
      breadcrumb="Hausverwaltungen"
      title="Für Hausverwaltungen"
      tagline="Skalieren Sie Ihre Bestände einfach."
      lead="Rollout über viele Gebäude mit minimalem Aufwand – von der Planung bis zum laufenden Betrieb."
      actions={
        <>
          <Button asChild size="lg">
            <Link to="/konfigurator">Portfolio kalkulieren</Link>
          </Button>
          <Button asChild size="lg" variant="outline">
            <Link to="/kontakt">Rollout besprechen</Link>
          </Button>
        </>
      }
      visual={<PortfolioHeroArt />}
      features={[
        {
          icon: <Package />,
          title: "Vorkonfigurierte Hardware",
        },
        {
          icon: <Timer />,
          title: "Wenig Aufwand vor Ort",
        },
        {
          icon: <LayoutDashboard />,
          title: "Zentrale Übersicht",
        },
        {
          icon: <TrendingUp />,
          title: "Skalierbar für wachsende Portfolios",
        },
      ]}
      closing={
        <Section className="pt-0 sm:pt-0 lg:pt-0">
          <CtaBanner
            icon={<Euro />}
            title="Wie sieht Ihr Portfolio aus?"
            description="Erhalten Sie zunächst mit wenigen Angaben eine Preisindikation für mehrere Gebäude – oder sprechen Sie mit uns über vorhandene Messtechnik und den geplanten Rollout."
            actions={
              <>
                <Button asChild variant="inverse" size="lg">
                  <Link to="/konfigurator">Portfolio kalkulieren</Link>
                </Button>
                <Button asChild variant="inverse" size="lg">
                  <Link to="/kontakt">Rollout besprechen</Link>
                </Button>
              </>
            }
          />
        </Section>
      }
    >
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          eyebrow="Skalierung"
          title="Weniger Projektaufwand pro Gebäude"
          lead="Bei einem einzelnen Gebäude sind manuelle Arbeitsschritte überschaubar. Bei dutzenden Gebäuden werden sie zum Problem. GebOS reduziert genau diese wiederkehrenden Aufgaben."
        />
        <Card className="mx-auto mt-8 max-w-xl border-l-4 border-l-primary">
          <CardContent className="py-6 text-center">
            <p className="text-lg font-bold text-balance text-navy">
              Objekte einmal erfassen. Geräte vorbereitet erhalten. Montieren.
              Betreiben.
            </p>
          </CardContent>
        </Card>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Ablauf"
          title="Bestellung und Installation greifen ineinander"
        />
        <NumberedList className="mt-10 max-w-2xl" steps={rolloutSteps} />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          title="Der Monteur montiert. GebOS kümmert sich um den Rest."
          lead="Die Installation soll nicht davon abhängen, dass vor Ort ein speziell geschulter GebOS-Techniker verfügbar ist."
        />
        <div className="mt-10 grid gap-6 sm:grid-cols-3">
          {noEffortItems.map((item, i) => (
            <Card key={i}>
              <CardContent className="flex flex-col items-center gap-4 py-6 text-center">
                <IconBadge variant="soft" shape="squircle" size="lg">
                  {item.icon}
                </IconBadge>
                <p className="text-sm font-bold text-balance text-navy">
                  {item.title}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>
        <p className="mt-8 text-center text-base text-muted-foreground">
          Damit können bestehende Installationsstrukturen weiter genutzt
          werden.
        </p>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          eyebrow="Übersicht"
          title="Rollout zentral überblicken"
          lead="Bei größeren Portfolios reicht es nicht, Geräte lediglich zu installieren. Die Verwaltung muss erkennen können, wo der Rollout steht und wo Handlungsbedarf besteht."
        />
        <Card className="mx-auto mt-10 max-w-3xl shadow-card-lg">
          <CardContent className="py-6">
            <div className="flex flex-wrap items-start justify-between gap-6">
              <div className="min-w-0 flex-1">
                <p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
                  Beispiel
                </p>
                <h3 className="mt-1 text-xl font-extrabold tracking-tight text-navy">
                  Portfolio
                </h3>
                <div className="mt-5 flex flex-wrap gap-x-10 gap-y-4">
                  {portfolioStats.map((stat) => (
                    <div key={stat.label}>
                      <div className="text-3xl font-extrabold tracking-tight text-navy">
                        {stat.value}
                      </div>
                      <div className="text-xs font-medium text-muted-foreground">
                        {stat.label}
                      </div>
                    </div>
                  ))}
                </div>
                <div className="mt-6 flex flex-wrap gap-2">
                  <Badge>43 Gebäude aktiv</Badge>
                  <Badge variant="muted">3 in Installation</Badge>
                  <Badge variant="destructive">2 mit Handlungsbedarf</Badge>
                </div>
              </div>
              <img
                src={vectors.consumptionRing}
                alt=""
                className="w-36 shrink-0 max-sm:hidden"
              />
            </div>
            <Separator className="my-6" />
            <p className="text-xs font-bold text-muted-foreground">
              Mögliche Statusinformationen
            </p>
            <div className="mt-2.5 flex flex-wrap gap-1.5">
              {statusInfos.map((status) => (
                <Badge key={status} variant="outline">
                  {status}
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          title="Warum GebOS für Hausverwaltungen?"
        />
        <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {whyGebos.map((item) => (
            <Card key={item.title}>
              <CardContent className="py-5">
                <h3 className="text-sm font-bold text-navy">{item.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
                  {item.sub}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          title="Vom kleinen Bestand bis zum wachsenden Portfolio"
          lead="GebOS soll nicht verlangen, dass eine Hausverwaltung zunächst eine eigene Messdienst-Infrastruktur aufbaut. Neue Gebäude können schrittweise ergänzt und nach demselben standardisierten Prozess ausgerollt werden."
        />
      </Section>
    </AudiencePage>
  )
}