import { Link } from "react-router-dom"
import {
  ArrowRight,
  Building2,
  Calculator,
  HardHat,
  House,
  Network,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Container, Section, SectionHeading } from "@/components/gebos/section"
import { PageHero } from "@/components/gebos/page-hero"
import { HeroArt } from "@/components/gebos/hero-art"
import { FeatureTile, IconBadge } from "@/components/gebos/icon-tile"
import { ProcessSteps, NumberedList } from "@/components/gebos/process-steps"
import { Checklist } from "@/components/gebos/checklist"
import { CtaBanner } from "@/components/gebos/cta-banner"
import {
  AssetRender,
  icons,
  renders,
  vectors,
} from "@/components/gebos/site-assets"

const features = [
  {
    media: <img src={icons.uvi} alt="" className="size-14" loading="lazy" />,
    title: "UVI",
    sub: "Monatliche Verbrauchsinformation",
  },
  {
    media: (
      <img src={icons.billing} alt="" className="size-14" loading="lazy" />
    ),
    title: "Heizkosten\u00adabrechnung",
    sub: "Jährlich korrekt abrechnen",
  },
  {
    media: (
      <img src={icons.smokeAlarm} alt="" className="size-14" loading="lazy" />
    ),
    title: "Rauchwarnmelder",
    sub: "Sicher überwacht, zentral verwaltet",
  },
  {
    media: <img src={icons.radio} alt="" className="size-14" loading="lazy" />,
    title: "Fernauslesbare Messtechnik",
    sub: "Automatisch erfasst, sicher übertragen",
  },
  {
    media: (
      <img src={icons.portal} alt="" className="size-14" loading="lazy" />
    ),
    title: "Portale & Verwaltung",
    sub: "Alle Daten und Geräte im Blick",
  },
]

const operationsScope = [
  {
    media: <img src={icons.uvi} alt="" className="size-12" loading="lazy" />,
    title: "Unterjährige Verbrauchsinformation",
    text: "Verbrauchsdaten werden automatisch erfasst und die regelmäßigen Verbrauchsinformationen für die Bewohner bereitgestellt.",
  },
  {
    media: (
      <img src={icons.billing} alt="" className="size-12" loading="lazy" />
    ),
    title: "Heizkostenabrechnung",
    text: "Die erfassten Verbrauchsdaten bilden die Grundlage für die jährliche Heizkostenabrechnung.",
  },
  {
    media: (
      <img src={icons.smokeAlarm} alt="" className="size-12" loading="lazy" />
    ),
    title: "Rauchwarnmelder",
    text: "Rauchwarnmelder können gemeinsam mit der übrigen Gebäudetechnik geplant, installiert und zentral verwaltet werden.",
  },
  {
    media: <img src={icons.radio} alt="" className="size-12" loading="lazy" />,
    title: "Fernauslesbare Messtechnik",
    text: "Wärme- und Wasserverbrauch werden über kompatible Geräte automatisch erfasst.",
  },
  {
    media: (
      <AssetRender
        render={renders.gateway}
        className="flex size-12 items-center justify-center"
        imgClassName="w-12"
      />
    ),
    title: "Gateway und Datenübertragung",
    text: "Die Messdaten werden zentral gesammelt und an GebOS übertragen.",
  },
  {
    media: (
      <img src={icons.portal} alt="" className="size-12" loading="lazy" />
    ),
    title: "Portale und Verwaltung",
    text: "Gebäude, Wohnungen, Geräte und Verbrauchsdaten werden zentral verwaltet. Bewohner erhalten Zugriff auf die für sie vorgesehenen Informationen.",
  },
]

function StepMedia({ src }: { src: string }) {
  return (
    <span className="flex size-16 items-center justify-center">
      <img src={src} alt="" className="size-16" loading="lazy" />
    </span>
  )
}

const processSteps = [
  {
    media: <StepMedia src={vectors.uviBadge} />,
    title: "Gebäude erfassen",
    description: "Daten zum Gebäude und den Wohnungen erfassen.",
  },
  {
    media: (
      <AssetRender
        render={renders.building}
        className="flex size-16 items-center justify-center"
        imgClassName="w-16"
      />
    ),
    title: "Gerätebedarf bestimmen",
    description: "GebOS ermittelt die benötigte Ausstattung automatisch.",
  },
  {
    media: <StepMedia src={vectors.packageBox} />,
    title: "Vorkonfiguriert liefern",
    description: "Hardware wird für Ihr Objekt vorbereitet geliefert.",
  },
  {
    media: (
      <AssetRender
        render={renders.heatMeter}
        className="flex size-16 items-center justify-center"
        imgClassName="w-16"
      />
    ),
    title: "Geräte montieren",
    description: "Montage vor Ort – ohne aufwendige Softwarekonfiguration.",
  },
  {
    media: <StepMedia src={vectors.wirelessOrb} />,
    title: "Automatisch betreiben",
    description: "GebOS übernimmt Daten, Services und laufenden Betrieb.",
  },
]

const lessEffort = [
  {
    vector: vectors.packageBox,
    title: "Vorkonfigurierte Hardware",
    text: "Geräte werden passend zum jeweiligen Gebäude und zur vorgesehenen Nutzung vorbereitet.",
  },
  {
    vector: vectors.checkOrb,
    title: "Keine aufwendige Einrichtung auf der Baustelle",
    text: "Der Installateur kann sich auf die fachgerechte Montage konzentrieren.",
  },
  {
    vector: vectors.checkOrb,
    title: "Bestehende Fachbetriebe nutzen",
    text: "Kein spezieller GebOS-Partner erforderlich – eigene Hausmeister, Heizungsbauer oder bestehende Installationspartner können weiterhin eingesetzt werden.",
  },
  {
    vector: vectors.checkOrb,
    title: "Weniger doppelte Dateneingabe",
    text: "Informationen aus Bestellung und Konfiguration werden für den späteren Betrieb weiterverwendet.",
  },
]

const systemTasks = [
  {
    media: <img src={icons.uvi} alt="" className="size-10" loading="lazy" />,
    title: "UVI",
    text: "Regelmäßige Verbrauchsinformation für Bewohner.",
  },
  {
    media: (
      <img src={icons.billing} alt="" className="size-10" loading="lazy" />
    ),
    title: "Heizkostenabrechnung",
    text: "Verbrauchsdaten strukturiert erfassen und für die jährliche Abrechnung nutzen.",
  },
  {
    media: (
      <img src={icons.smokeAlarm} alt="" className="size-10" loading="lazy" />
    ),
    title: "Rauchwarnmelder",
    text: "Rauchwarnmelder gemeinsam mit der übrigen Gebäudetechnik planen und verwalten.",
  },
  {
    media: <img src={icons.radio} alt="" className="size-10" loading="lazy" />,
    title: "Messtechnik und Infrastruktur",
    text: "Fernauslesbare Zähler, Sensoren und Kommunikationsinfrastruktur für den laufenden Betrieb.",
  },
]

const audiences = [
  {
    icon: <House />,
    name: "Hauseigentümer",
    headline: "Messdienstleistungen für Ihr Mehrfamilienhaus",
    text: "Installieren Sie vorkonfigurierte Technik selbst beziehungsweise mit Ihrem bestehenden Fachbetrieb – oder überlassen Sie GebOS die komplette Umsetzung.",
    points: [
      "einfache Installation",
      "transparente Kosten",
      "zuverlässiger laufender Betrieb",
    ],
    cta: "GebOS für Hauseigentümer",
    to: "/fuer-wen/hauseigentuemer",
  },
  {
    icon: <Building2 />,
    name: "Hausverwaltungen",
    headline: "Viele Gebäude. Ein einfacher Rollout.",
    text: "Erfassen Sie Ihre Objekte einmal, erhalten Sie vorkonfigurierte Hardware und nutzen Sie bestehende Mitarbeiter oder Installationspartner für die Montage.",
    points: [
      "standardisierter Rollout",
      "vorkonfigurierte Geräte",
      "zentrale Portfolioverwaltung",
    ],
    cta: "GebOS für Hausverwaltungen",
    to: "/fuer-wen/hausverwaltungen",
  },
  {
    icon: <Network />,
    name: "Messdienstleister",
    headline: "Ihre Messdienstleistung. Unsere Infrastruktur.",
    text: "Nutzen Sie GebOS als technische Grundlage für Ihre eigenen Dienstleistungen – mit Hardware, Plattform, Gerätemanagement und optionalem White Label.",
    points: ["technische Plattform", "Skalierbarkeit", "APIs und White Label"],
    cta: "GebOS für Messdienstleister",
    to: "/fuer-wen/messdienstleister",
  },
  {
    icon: <HardHat />,
    name: "Installateure & Heizungsbauer",
    headline: "Bestellen. Montieren. Fertig.",
    text: "Setzen Sie GebOS bei Ihren bestehenden Kunden ein, ohne zunächst ein Partnerprogramm durchlaufen zu müssen.",
    points: [
      "kein verpflichtender Partnerstatus",
      "keine Mindestabnahme",
      "vorkonfigurierte Hardware",
    ],
    cta: "GebOS für Installateure",
    to: "/fuer-wen/installateure",
  },
]

const scaleFlows = [
  {
    vector: vectors.tealBars,
    label: "1 Gebäude",
    sub: "Ein Eigentümer kann ein Mehrfamilienhaus konfigurieren.",
    steps: [
      { title: "GebOS konfigurieren" },
      { title: "Installieren" },
      { title: "Betreiben" },
    ],
  },
  {
    vector: vectors.consumptionRing,
    label: "50 Gebäude",
    sub: "Eine Hausverwaltung kann denselben Prozess auf viele Gebäude übertragen.",
    steps: [
      { title: "Nach demselben Prozess konfigurieren" },
      { title: "Rollout organisieren" },
      { title: "Zentral betreiben" },
    ],
  },
]

const priceFlow = [
  { title: "Wenige Angaben" },
  { title: "Erste Preisindikation" },
  { title: "Konfiguration speichern" },
  { title: "Gebäude vollständig konfigurieren" },
  { title: "Genauer Preis" },
]

export default function HomePage() {
  return (
    <>
      <PageHero
        title={
          <>
            Messdienstleistungen
            <br className="hidden sm:block" />{" "}
            <span className="text-primary">einfach</span> gemacht.
          </>
        }
        lead="Unterjährige Verbrauchsinformation (UVI), Heizkostenabrechnung und Rauchwarnmelder – von der vorkonfigurierten Hardware bis zum laufenden Betrieb."
        actions={
          <>
            <Button asChild size="lg">
              <Link to="/konfigurator">Preis berechnen</Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link to="/so-funktionierts">So funktioniert GebOS</Link>
            </Button>
          </>
        }
        visual={<HeroArt />}
      />

      <Container>
        <Section className="pt-0">
          <div className="rounded-2xl border border-border bg-card p-6 shadow-card sm:p-8">
            <div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
              {features.map((feature) => (
                <FeatureTile key={feature.sub} {...feature} />
              ))}
            </div>
          </div>
        </Section>

        <Section>
          <SectionHeading
            align="center"
            eyebrow="Das System"
            title="Alles, was für den laufenden Messbetrieb benötigt wird"
            lead="GebOS verbindet Messtechnik, Datenerfassung und Software zu einem durchgängigen System. Statt einzelne Komponenten selbst zusammenzustellen und miteinander zu verbinden, erhalten Sie eine Lösung, bei der Bestellung, Hardware, Konfiguration und laufender Betrieb zusammenspielen."
          />
          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {operationsScope.map((item) => (
              <Card key={item.title} className="p-6 gap-0">
                <CardContent className="flex h-full flex-col items-start gap-3 p-0">
                  {item.media}
                  <h3 className="text-base font-bold text-navy">
                    {item.title}
                  </h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {item.text}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </Section>

        <Section>
          <SectionHeading
            align="center"
            eyebrow="Der Prozess"
            title="So funktioniert GebOS"
            lead="Von der Bestellung bis zum laufenden Betrieb – GebOS verbindet Bestellung, Konfiguration und Installation miteinander."
          />
          <ProcessSteps steps={processSteps} className="mt-12" />
          <p className="mt-10 text-center text-base font-semibold italic text-navy">
            „Bestellung, Konfiguration und Installation greifen ineinander.“
          </p>
          <div className="mt-6 flex justify-center">
            <Button asChild size="lg">
              <Link to="/konfigurator">Preis für mein Gebäude berechnen</Link>
            </Button>
          </div>
        </Section>

        <Section>
          <SectionHeading
            align="center"
            eyebrow="Installation"
            title="Weniger Aufwand vor Ort"
            lead="Die Installation eines Messsystems sollte nicht daran scheitern, dass vor Ort komplizierte Software eingerichtet oder jedes Gerät manuell zugeordnet werden muss. GebOS bereitet die digitale Struktur bereits vor der Installation vor."
          />
          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {lessEffort.map((item) => (
              <Card key={item.title} className="p-6 gap-0">
                <CardContent className="flex h-full flex-col items-start gap-3 p-0">
                  <img
                    src={item.vector}
                    alt=""
                    className="size-12"
                    loading="lazy"
                  />
                  <h3 className="text-base font-bold text-navy">
                    {item.title}
                  </h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {item.text}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </Section>

        <Section>
          <SectionHeading
            align="center"
            eyebrow="Leistungen"
            title="Ein System für mehrere Aufgaben"
            lead="GebOS bündelt wiederkehrende Mess- und Gebäudedienstleistungen auf einer gemeinsamen technischen Grundlage."
          />
          <Card className="mt-12 divide-y divide-border p-0 gap-0">
            {systemTasks.map((task) => (
              <div
                key={task.title}
                className="flex flex-col gap-3 p-5 sm:flex-row sm:items-center sm:gap-5 sm:px-7"
              >
                {task.media}
                <div className="min-w-0 flex-1">
                  <h3 className="text-sm font-bold text-navy">{task.title}</h3>
                  <p className="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                    {task.text}
                  </p>
                </div>
                <Button
                  asChild
                  variant="link"
                  className="h-auto shrink-0 self-start p-0 sm:self-center"
                >
                  <Link to="/loesungen">
                    Mehr erfahren
                    <ArrowRight />
                  </Link>
                </Button>
              </div>
            ))}
          </Card>
        </Section>

        <Section>
          <SectionHeading
            align="center"
            eyebrow="Skalierung"
            title="Vom einzelnen Mehrfamilienhaus bis zum Portfolio"
            lead="GebOS ist so aufgebaut, dass derselbe grundlegende Prozess sowohl für ein einzelnes Gebäude als auch für größere Bestände funktioniert. Neue Objekte werden nach einem einheitlichen Schema ergänzt und ausgerollt."
          />
          <Card className="mt-12 p-0 gap-0 overflow-hidden">
            <div className="grid divide-y divide-border sm:grid-cols-2 sm:divide-x sm:divide-y-0">
              {scaleFlows.map((flow) => (
                <div key={flow.label} className="flex flex-col gap-5 p-6 sm:p-8">
                  <div className="flex items-center gap-4">
                    <img
                      src={flow.vector}
                      alt=""
                      className="size-14"
                      loading="lazy"
                    />
                    <div>
                      <h3 className="text-xl font-extrabold tracking-tight text-navy">
                        {flow.label}
                      </h3>
                      <p className="mt-0.5 text-sm text-muted-foreground">
                        {flow.sub}
                      </p>
                    </div>
                  </div>
                  <NumberedList steps={flow.steps} className="mt-1" />
                </div>
              ))}
            </div>
          </Card>
        </Section>

        <Section>
          <SectionHeading
            eyebrow="Preis"
            title="Was kostet GebOS?"
            lead="Mit dem GebOS-Konfigurator erhalten Sie bereits mit wenigen Angaben eine erste Preisindikation."
          />
          <div className="mt-10 grid items-start gap-10 lg:grid-cols-2 lg:gap-14">
            <div>
              <p className="text-sm leading-relaxed text-muted-foreground">
                Dafür werden zunächst nur grundlegende Informationen benötigt,
                beispielsweise:
              </p>
              <Checklist
                className="mt-4"
                items={[
                  "gewünschte Leistungen",
                  "Anzahl der Gebäude",
                  "Anzahl der Wohnungen",
                  "Art der Wärmeverteilung",
                  "durchschnittliche Anzahl der Zimmer",
                ]}
              />
              <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                Auf Basis dieser Angaben schätzt GebOS die voraussichtlich
                benötigte Geräteanzahl und berechnet einen ungefähren Preis.
              </p>
              <h3 className="mt-8 text-lg font-extrabold tracking-tight text-navy">
                Erst schätzen. Dann genau konfigurieren.
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                Der Schnellkonfigurator arbeitet bewusst mit Annahmen. Für
                einen genauen Preis können Sie die Konfiguration anschließend
                speichern und Ihre Gebäude detailliert erfassen. Die bereits
                eingegebenen Daten werden übernommen.
              </p>
              <Button asChild size="lg" className="mt-6">
                <Link to="/konfigurator">Preis berechnen</Link>
              </Button>
            </div>
            <div>
              <Card className="p-6 gap-0 sm:p-8">
                <CardContent className="p-0">
                  <div className="flex items-center gap-4">
                    <img
                      src={vectors.euroOrb}
                      alt=""
                      className="size-14"
                      loading="lazy"
                    />
                    <h3 className="text-base font-bold text-navy">
                      In fünf Schritten zum genauen Preis
                    </h3>
                  </div>
                  <NumberedList steps={priceFlow} className="mt-6" />
                </CardContent>
              </Card>
              <p className="mt-5 text-xs leading-relaxed text-muted-foreground italic">
                Die erste Berechnung ist eine unverbindliche Preisindikation.
                Die tatsächliche Ausstattung und der genaue Preis ergeben sich
                aus der vollständigen Objektkonfiguration.
              </p>
            </div>
          </div>
        </Section>

        <Section>
          <SectionHeading
            align="center"
            eyebrow="Zielgruppen"
            title="Für wen ist GebOS?"
            lead="GebOS wird von unterschiedlichen Kundengruppen eingesetzt. Wählen Sie aus, was am besten zu Ihnen passt."
          />
          <div className="mt-12 grid gap-5 sm:grid-cols-2">
            {audiences.map((audience) => (
              <Card key={audience.to} className="p-6 gap-0 sm:p-7">
                <CardContent className="flex h-full flex-col items-start gap-3 p-0">
                  <div className="flex items-center gap-3">
                    <IconBadge variant="soft" shape="squircle" size="lg">
                      {audience.icon}
                    </IconBadge>
                    <span className="text-xs font-bold tracking-wide text-primary uppercase">
                      {audience.name}
                    </span>
                  </div>
                  <h3 className="text-lg font-extrabold tracking-tight text-navy">
                    {audience.headline}
                  </h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {audience.text}
                  </p>
                  <p className="mt-1 text-xs font-bold tracking-wide text-navy uppercase">
                    Besonders wichtig für Sie
                  </p>
                  <Checklist items={audience.points} className="mb-2" />
                  <Button asChild variant="outline" className="mt-auto">
                    <Link to={audience.to}>{audience.cta}</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </Section>

        <Section>
          <CtaBanner
            icon={<Calculator />}
            title="Messdienstleistungen müssen nicht kompliziert sein."
            description="Gebäude erfassen, passende Technik erhalten, montieren und anschließend zentral betreiben."
            actions={
              <>
                <Button asChild variant="inverse" size="lg">
                  <Link to="/konfigurator">Preis berechnen</Link>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="border-white/40 bg-transparent text-white hover:bg-white/10 hover:text-white"
                >
                  <Link to="/so-funktionierts">So funktioniert GebOS</Link>
                </Button>
              </>
            }
          />
        </Section>
      </Container>
    </>
  )
}