import { Link } from "react-router-dom"
import {
  CircleCheck,
  GraduationCap,
  Package,
  PackageX,
  Unlock,
  Users,
  Wrench,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Checklist } from "@/components/gebos/checklist"
import { IconBadge } from "@/components/gebos/icon-tile"
import { ProcessSteps } from "@/components/gebos/process-steps"
import { Section, SectionHeading } from "@/components/gebos/section"
import { AssetRender, renders, vectors } from "@/components/gebos/site-assets"
import { AudiencePage, AudienceClosing } from "@/pages/audiences/audience-page"

const KUNDEN_BEDARFE = [
  "UVI",
  "Heizkostenabrechnung",
  "fernauslesbare Messtechnik",
  "Rauchwarnmelder",
]

const KEINE_HUERDEN = [
  {
    icon: <Unlock />,
    title: "Keine verpflichtende Partnerschaft",
  },
  {
    icon: <PackageX />,
    title: "Keine Mindestabnahme",
  },
  {
    icon: <GraduationCap />,
    title: "Keine verpflichtende GebOS-Vertriebsschulung",
  },
  {
    icon: <Wrench />,
    title: "Keine komplizierte Softwareeinrichtung auf der Baustelle",
  },
]

const GEBOS_BEREITET_VOR = [
  "Gebäudestruktur",
  "Wohnungen beziehungsweise Nutzungseinheiten",
  "Gerätezuordnung",
  "benötigte Hardware",
  "Kommunikationsinfrastruktur",
  "Softwarestruktur",
]

const SIE_UEBERNEHMEN = [
  "fachgerechte Montage",
  "gegebenenfalls Austausch vorhandener Geräte",
  "Einbau der vorgesehenen Messtechnik",
  "Abschluss der Installation",
]

export default function InstallateurePage() {
  return (
    <AudiencePage
      breadcrumb="Installateure & Heizungsbauer"
      title={
        <>
          Für Installateure &amp;
          <br />
          Heizungsbauer
        </>
      }
      tagline="Bestellen. Montieren. Fertig."
      lead="GebOS für Ihre Kunden installieren – ohne Partnerprogramm, verpflichtende Zertifizierung oder aufwendige Softwarekonfiguration."
      actions={
        <Button asChild size="lg">
          <Link to="/konfigurator">Gebäude für meinen Kunden konfigurieren</Link>
        </Button>
      }
      visual={
        <div className="relative aspect-[1.28] w-full">
          <img
            src={vectors.checkOrb}
            alt=""
            className="absolute top-[6%] right-[8%] w-[16%]"
          />
          <AssetRender
            render={renders.heatMeter}
            className="absolute top-[30%] left-[2%] w-[38%]"
            imgClassName="w-full"
          />
          <AssetRender
            render={renders.gateway}
            className="absolute top-[24%] right-[16%] w-[46%]"
            imgClassName="w-full"
          />
          <img
            src={vectors.glassCubes}
            alt=""
            className="absolute right-[1%] bottom-[10%] w-[26%]"
          />
        </div>
      }
      features={[
        {
          icon: <Unlock />,
          title: "Keine Partnerpflichten",
          sub: "Keine Mindestmengen",
        },
        {
          icon: <Package />,
          title: "Vorkonfigurierte Hardware",
        },
        {
          icon: <Wrench />,
          title: "Einfache Installation",
          sub: "Keine Softwarekonfiguration",
        },
        {
          icon: <Users />,
          title: "Ihre Kunden",
          sub: "Bleiben Ihre Kunden",
        },
      ]}
      closing={
        <AudienceClosing
          title="GebOS bei einem Kunden einsetzen?"
          lead="Stellen Sie mit wenigen Angaben zunächst die ungefähre Ausstattung und den Preis für das Gebäude zusammen."
          actions={
            <Button asChild size="lg">
              <Link to="/konfigurator">
                Gebäude für meinen Kunden konfigurieren
              </Link>
            </Button>
          }
        />
      }
    >
      {/* 1. Ihr Kunde braucht eine Messdienstlösung? */}
      <Section className="pt-4 sm:pt-6 lg:pt-8">
        <SectionHeading
          eyebrow="Ausgangslage"
          title="Ihr Kunde braucht eine Messdienstlösung?"
          lead="Sie betreuen ein Mehrfamilienhaus und Ihr Kunde benötigt beispielsweise:"
        />
        <div className="mt-6 flex flex-wrap gap-2.5">
          {KUNDEN_BEDARFE.map((bedarf) => (
            <Badge
              key={bedarf}
              variant="outline"
              className="px-4 py-1.5 text-sm font-semibold text-navy"
            >
              <CircleCheck className="text-primary" />
              {bedarf}
            </Badge>
          ))}
        </div>
        <p className="mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground">
          Dann können Sie GebOS einfach für das betreffende Gebäude einsetzen.{" "}
          <strong className="font-semibold text-navy">
            Sie müssen dafür nicht zunächst Teil eines Partnerprogramms werden.
          </strong>
        </p>
      </Section>

      {/* 2. So einfach soll die Installation sein */}
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Ablauf"
          title="So einfach soll die Installation sein"
          align="center"
        />
        <ProcessSteps
          className="mt-12"
          steps={[
            {
              media: (
                <AssetRender
                  render={renders.building}
                  className="flex h-16 items-center justify-center"
                  imgClassName="h-16 w-auto"
                />
              ),
              title: "Gebäude erfassen",
              description:
                "Die benötigte Ausstattung wird für das konkrete Objekt zusammengestellt.",
            },
            {
              media: (
                <img
                  src={vectors.packageBox}
                  alt=""
                  className="h-16 w-16 object-contain"
                />
              ),
              title: "Geräte bestellen",
              description:
                "GebOS liefert die zum Gebäude passenden Geräte.",
            },
            {
              media: (
                <AssetRender
                  render={renders.gateway}
                  className="flex h-16 items-center justify-center"
                  imgClassName="h-16 w-auto"
                />
              ),
              title: "Vorkonfiguriert erhalten",
              description:
                "Die Hardware wird bereits objektbezogen vorbereitet.",
            },
            {
              media: (
                <AssetRender
                  render={renders.heatMeter}
                  className="flex h-16 items-center justify-center"
                  imgClassName="h-16 w-auto"
                />
              ),
              title: "Montieren",
              description: "Sie übernehmen die fachgerechte Installation.",
            },
            {
              media: (
                <img
                  src={vectors.checkOrb}
                  alt=""
                  className="h-16 w-16 object-contain"
                />
              ),
              title: "Fertig",
              description:
                "Die digitale Einrichtung und der laufende Betrieb werden von GebOS übernommen.",
            },
          ]}
        />
      </Section>

      {/* 3. Kein klassisches Partnerprogramm erforderlich */}
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Ohne Einstiegshürden"
          title="Kein klassisches Partnerprogramm erforderlich"
          lead="Für die normale Installation von GebOS sollen keine unnötigen Einstiegshürden entstehen."
          align="center"
        />
        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {KEINE_HUERDEN.map((item, i) => (
            <Card key={i} className="items-start gap-4 p-6">
              <IconBadge variant="soft" shape="squircle">
                {item.icon}
              </IconBadge>
              <p className="text-sm font-bold leading-snug text-navy">
                {item.title}
              </p>
            </Card>
          ))}
        </div>
        <p className="mx-auto mt-8 max-w-2xl text-center text-base leading-relaxed text-muted-foreground">
          <strong className="font-semibold text-navy">
            Der Fachbetrieb bleibt der Fachbetrieb des Kunden.
          </strong>{" "}
          GebOS stellt das Produkt und die digitale Infrastruktur bereit.
        </p>
      </Section>

      {/* 4. Sie können bei Ihren bestehenden Kunden bleiben */}
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          title="Sie können bei Ihren bestehenden Kunden bleiben"
          lead={
            <>
              GebOS ist besonders interessant, wenn ein Kunde Sie ohnehin mit
              Arbeiten an Heizungs-, Wasser- oder Gebäudetechnik beauftragt und
              zusätzlich eine Lösung für Messdienstleistungen benötigt. Sie
              können die Installation übernehmen, ohne selbst einen
              vollständigen Messdienst aufbauen zu müssen.
            </>
          }
        />
      </Section>

      {/* 5. Was GebOS vorbereitet / Was Sie übernehmen */}
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <div className="grid gap-6 lg:grid-cols-2">
          <Card className="gap-0 p-6 sm:p-8">
            <h3 className="text-xl font-extrabold tracking-tight text-navy">
              Was GebOS vorbereitet
            </h3>
            <p className="mt-1 text-sm text-muted-foreground">Je nach Auftrag:</p>
            <Checklist className="mt-5" items={GEBOS_BEREITET_VOR} />
            <p className="mt-5 text-sm leading-relaxed text-muted-foreground">
              Damit soll vor Ort möglichst wenig zusätzliche digitale Arbeit
              entstehen.
            </p>
          </Card>
          <Card className="gap-0 p-6 sm:p-8">
            <h3 className="text-xl font-extrabold tracking-tight text-navy">
              Was Sie übernehmen
            </h3>
            <p className="mt-1 text-sm text-muted-foreground">
              Das Handwerk bleibt bei Ihnen:
            </p>
            <Checklist className="mt-5" items={SIE_UEBERNEHMEN} />
          </Card>
        </div>
      </Section>

      {/* 6. Und wenn Sie regelmäßig GebOS installieren? */}
      <Section className="pt-0 pb-10 sm:pt-0 sm:pb-12 lg:pt-0 lg:pb-14">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-2xl font-extrabold tracking-tight text-balance text-navy sm:text-3xl">
            Und wenn Sie regelmäßig GebOS installieren?
          </h2>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
            Auch dann soll der Einstieg freiwillig bleiben. Für Fachbetriebe mit
            größerem Volumen können später zusätzliche Konditionen oder
            Leistungen angeboten werden. Das normale Installieren von GebOS
            bleibt davon unabhängig.
          </p>
        </div>
      </Section>
    </AudiencePage>
  )
}