import { Link } from "react-router-dom"
import { ArrowDown, Code2, Layers, ShieldCheck, Tag } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Section, SectionHeading } from "@/components/gebos/section"
import { Checklist } from "@/components/gebos/checklist"
import { FaqAccordion, type FaqItem } from "@/components/gebos/faq-accordion"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/gebos/site-assets"
import { AudiencePage, AudienceClosing } from "@/pages/audiences/audience-page"

const platformRequirements = [
  "kompatible Messtechnik",
  "Kommunikationsinfrastruktur",
  "Gateways",
  "sichere Datenerfassung",
  "Geräteverwaltung",
  "Monitoring",
  "Verbrauchsdatenverarbeitung",
  "Nutzerportale",
  "Schnittstellen",
  "laufender technischer Betrieb",
]

const whiteLabelItems = [
  "eigenes Branding",
  "eigene Kundenbeziehung",
  "mandantenfähige Verwaltung",
  "Endkundenportale",
  "APIs und Datenexporte",
  "Geräteverwaltung",
  "technischer Support",
]

const platformCapabilities = [
  {
    title: "Gerätekompatibilität",
    sub: "Einbindung unterschiedlicher Zähler- und Gerätetypen auf Basis geeigneter Standards.",
  },
  {
    title: "Gateway-Infrastruktur",
    sub: "Zentrale Erfassung und sichere Übertragung der Gerätedaten.",
  },
  {
    title: "Gerätemanagement",
    sub: "Verwaltung großer Gerätebestände über Gebäude und Kunden hinweg.",
  },
  {
    title: "Monitoring",
    sub: "Probleme und Ausfälle erkennen, bevor daraus manueller Aufwand beim Kunden entsteht.",
  },
  {
    title: "APIs und Integrationen",
    sub: "Anbindung an eigene Systeme und bestehende Geschäftsprozesse.",
  },
  {
    title: "Mandantenfähigkeit",
    sub: "Kunden und Bestände getrennt innerhalb einer gemeinsamen Plattform verwalten.",
  },
  {
    title: "White Label",
    sub: "GebOS-Infrastruktur unter der Marke des Messdienstleisters einsetzen.",
  },
]

const businessComponents = [
  "Einkaufspreise für Hardware",
  "Plattformgebühren",
  "Mengenstaffeln",
  "wiederkehrende Gebühren",
  "White-Label-Konditionen",
  "Support- und Servicelevel",
  "mögliche Mindestmengen",
]

const stackFlow = ["Ihre Kunden", "Ihr Messdienst", "GebOS Plattform"]

const faqs: FaqItem[] = [
  {
    question: "Können wir GebOS unter unserer eigenen Marke anbieten?",
    answer:
      "Ja. GebOS ist als technische Grundlage für Dienstleistungen unter Ihrer Marke vorgesehen – mit eigenem Branding, mandantenfähiger Verwaltung und Endkundenportalen in Ihrem Auftritt.",
  },
  {
    question: "Behalten wir die Kundenbeziehung?",
    answer:
      "Ja. Sie betreuen Ihre Kunden und verkaufen Ihre Dienstleistungen. GebOS stellt Hardware, Datenerfassung, Software und Betrieb im Hintergrund bereit.",
  },
  {
    question: "Wie integrieren wir GebOS in unsere Systeme?",
    answer:
      "Über offene Schnittstellen: APIs und Datenexporte für Verbrauchsdaten, Geräte- und Objektstrukturen. Damit lässt sich GebOS an bestehende Abrechnungs- und Verwaltungssysteme anbinden.",
  },
  {
    question: "Wer betreibt die Plattform technisch?",
    answer:
      "GebOS – einschließlich Kommunikationsinfrastruktur, Gateways, Datenerfassung, Geräteverwaltung und Monitoring. Sie müssen dafür keine eigene Hardware- und Softwareentwicklung aufbauen.",
  },
  {
    question: "Wie werden die Konditionen festgelegt?",
    answer:
      "Individuell beziehungsweise mengenabhängig – mit anderen Geschäftsmodellen, Mengenstaffeln und gegebenenfalls White-Label-Konditionen als im öffentlichen Preiskonfigurator. Die konkreten Konditionen werden nicht öffentlich dargestellt.",
  },
]

/** Platform hero per asset kit 07: laptop dashboard, glass cubes, cloud support. */
function PlatformHeroArt() {
  return (
    <div className="relative flex aspect-[1.45] w-full items-center">
      <img
        src={vectors.cloudSupport}
        alt=""
        className="absolute top-0 right-0 w-[26%]"
      />
      <AssetRender
        render={renders.laptopDashboard}
        className="mx-auto w-full"
        imgClassName="w-full"
        loading="eager"
      />
      <img
        src={vectors.glassCubes}
        alt=""
        className="absolute bottom-[2%] left-0 w-[24%]"
      />
    </div>
  )
}

export default function MessdienstleisterPage() {
  return (
    <AudiencePage
      breadcrumb="Messdienstleister"
      title="Für Messdienstleister"
      tagline="Ihre Services. Unsere Plattform."
      lead="Nutzen Sie GebOS als technische Grundlage für Ihren eigenen Messdienst – skalierbar und zuverlässig."
      actions={
        <>
          <Button asChild size="lg">
            <Link to="/kontakt">Plattform kennenlernen</Link>
          </Button>
          <Button asChild size="lg" variant="outline">
            <Link to="/kontakt">Konditionen anfragen</Link>
          </Button>
        </>
      }
      visual={<PlatformHeroArt />}
      features={[
        {
          icon: <Tag />,
          title: "White Label",
          sub: "Ihr Branding, Ihre Kunden",
        },
        {
          icon: <Code2 />,
          title: "Offene APIs",
          sub: "Einfach integrieren",
        },
        {
          icon: <Layers />,
          title: "Skalierbare Plattform",
          sub: "Für jedes Geschäftsmodell",
        },
        {
          icon: <ShieldCheck />,
          title: "Zuverlässiger Betrieb",
          sub: "Sicher und performant",
        },
      ]}
      closing={
        <AudienceClosing
          title="Möchten Sie GebOS für Ihren Messdienst einsetzen?"
          lead="Wir zeigen Ihnen Plattform, technische Möglichkeiten und mögliche Geschäftsmodelle."
          actions={
            <>
              <Button asChild size="lg">
                <Link to="/kontakt">Plattform kennenlernen</Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link to="/kontakt">Konditionen anfragen</Link>
              </Button>
            </>
          }
        />
      }
    >
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Infrastruktur"
          title="Messdienstleistungen anbieten, ohne die gesamte Plattform selbst zu entwickeln"
          lead="Moderne Messdienstleistungen benötigen mehr als einzelne Zähler. Erforderlich sind unter anderem:"
        />
        <div className="mt-8 grid max-w-3xl gap-x-10 gap-y-2.5 sm:grid-cols-2">
          <Checklist items={platformRequirements.slice(0, 5)} />
          <Checklist items={platformRequirements.slice(5)} />
        </div>
        <p className="mt-8 text-base font-bold text-navy">
          GebOS stellt diese Infrastruktur als Plattform bereit.
        </p>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          title="Konzentrieren Sie sich auf Ihre Kunden"
          lead="Der Messdienstleister betreut seine Kunden und verkauft seine Dienstleistungen. GebOS stellt die technische Infrastruktur im Hintergrund bereit."
        />
        <Card className="mx-auto mt-10 max-w-md">
          <CardContent className="flex flex-col items-center gap-2.5 py-8">
            {stackFlow.map((label) => (
              <div
                key={label}
                className="flex flex-col items-center gap-2.5"
              >
                <div className="rounded-full border border-border bg-card px-6 py-2.5 text-sm font-bold text-navy shadow-pill">
                  {label}
                </div>
                <ArrowDown className="size-4 text-primary" />
              </div>
            ))}
            <div className="rounded-full bg-brand-gradient px-6 py-2.5 text-center text-sm font-bold text-white shadow-band">
              Hardware · Datenerfassung · Software · Betrieb
            </div>
          </CardContent>
        </Card>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Ihre Marke"
          title="White Label"
          lead="GebOS kann als technische Grundlage für Dienstleistungen unter Ihrer eigenen Marke eingesetzt werden. Je nach Geschäftsmodell können unter anderem relevant sein:"
        />
        <div className="mt-8 grid max-w-3xl gap-x-10 gap-y-2.5 sm:grid-cols-2">
          <Checklist items={whiteLabelItems.slice(0, 4)} />
          <Checklist items={whiteLabelItems.slice(4)} />
        </div>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          eyebrow="Technik"
          title="Technische Plattform"
          lead="Für Messdienstleister steht die technische Leistungsfähigkeit deutlich stärker im Vordergrund."
        />
        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {platformCapabilities.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"
          eyebrow="Konditionen"
          title="Das Geschäftsmodell muss funktionieren"
          lead="Eine Plattform für Messdienstleister ist nur interessant, wenn auch der wirtschaftliche Rahmen stimmt. Deshalb werden kommerzielle Konditionen individuell beziehungsweise mengenabhängig vereinbart – mit anderen Geschäftsmodellen, Mengenstaffeln und gegebenenfalls White-Label-Konditionen als im öffentlichen Preiskonfigurator."
        />
        <div className="mx-auto mt-8 max-w-2xl text-center">
          <p className="text-xs font-bold text-muted-foreground">
            Mögliche Bestandteile
          </p>
          <div className="mt-2.5 flex flex-wrap justify-center gap-1.5">
            {businessComponents.map((component) => (
              <Badge key={component} variant="outline">
                {component}
              </Badge>
            ))}
          </div>
          <p className="mt-6 text-sm text-muted-foreground italic">
            Die konkreten Konditionen werden nicht öffentlich auf der Website
            dargestellt.
          </p>
        </div>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          title="Gemeinsam skalieren"
          lead="GebOS soll insbesondere Messdienstleistern ermöglichen, neue digitale Dienstleistungen anzubieten, ohne dafür eine vollständige eigene Hardware- und Softwareentwicklung aufbauen zu müssen. Der Messdienstleister behält dabei seine Kundenbeziehung und sein eigenes Geschäftsmodell."
        />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          eyebrow="Häufige Fragen"
          title="Was Messdienstleister am häufigsten fragen"
        />
        <FaqAccordion className="mt-10" items={faqs} />
      </Section>
    </AudiencePage>
  )
}