import { Link } from "react-router-dom"
import { BarChart3, KeyRound, Puzzle, RadioTower, ShieldCheck } from "lucide-react"

import { Button } from "@/components/ui/button"
import { CtaBanner } from "@/components/solenos/cta-banner"
import { IconBadge } from "@/components/solenos/icon-tile"
import { Section, SectionHeading } from "@/components/solenos/section"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/solenos/site-assets"
import {
  TopicCards,
  type Topic,
} from "@/components/solenos/topic-cards"
import { heizkostenv } from "@/lib/legal"
import { WissenArticle, WissenRelated } from "@/pages/wissen/wissen-article"

const requirements: Topic[] = [
  {
    icon: <BarChart3 />,
    title: "Unterjährige Verbrauchsinformation",
    body: "Monatliche Verbrauchsinformationen auf Basis der erfassten Verbrauchs- und Ablesewerte – zur Umsetzung der Anforderungen des § 6a HeizkostenV.",
    source: { cite: "§ 6a HeizkostenV", href: heizkostenv("6a") },
  },
  {
    icon: <RadioTower />,
    title: "Fernablesbarkeit",
    body: "Verbrauchswerte werden ohne Zugang zu den einzelnen Wohnungen ausgelesen und zentral für Verbrauchsinformation und Abrechnung bereitgestellt.",
  },
  {
    icon: <Puzzle />,
    title: "Interoperable Messtechnik",
    body: "Die eingesetzten Verbrauchserfassungsgeräte sind OMS-fähig. Soweit für die jeweilige Ausstattung anwendbar, erfüllt die gelieferte Messtechnik die Anforderungen an Interoperabilität und Stand der Technik nach § 5 HeizkostenV.",
    source: { cite: "§ 5 HeizkostenV", href: heizkostenv("5") },
  },
]

/**
 * Hero art: the UVI pane as the subject with the consumption donut and the
 * UVI badge beside it – what the requirements produce for the resident.
 * Decorative; the copy carries the meaning.
 */
function RequirementsHeroArt() {
  return (
    <div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
      <img
        src={vectors.uviBadge}
        alt=""
        className="absolute top-0 right-[4%] w-[22%]"
      />
      <AssetRender
        render={renders.uviGlassPane}
        alt=""
        className="mx-auto w-[74%]"
        loading="eager"
      />
      <AssetRender
        render={renders.glassDonutShadow}
        alt=""
        className="absolute bottom-0 left-0 w-[30%]"
      />
    </div>
  )
}

export default function GesetzlicheAnforderungenPage() {
  return (
    <WissenArticle
      breadcrumb="Gesetzliche Anforderungen"
      eyebrow="Technik & Anforderungen"
      title="Gesetzliche Anforderungen an den Messbetrieb"
      tagline="Für den Messbetrieb gebaut."
      lead="SolenOS verbindet fernablesbare Messtechnik, Verbrauchsinformationen und Abrechnung in einer klaren technischen und organisatorischen Struktur."
      visual={<RequirementsHeroArt />}
    >
      <Section className="pt-2 sm:pt-4 lg:pt-6">
        <SectionHeading
          eyebrow="Anforderungen"
          title="Was die Heizkostenverordnung verlangt"
          lead="Verbrauchsinformation, Fernablesbarkeit und Interoperabilität sind keine getrennten Themen – sie hängen an derselben Messtechnik und derselben Datenerfassung."
        />
        <TopicCards
          items={requirements}
          className="sm:grid-cols-2 lg:grid-cols-3"
        />

        <aside className="mt-6 flex flex-col gap-5 rounded-3xl border border-brand-200 bg-brand-50/50 p-6 sm:flex-row sm:items-center sm:gap-6 sm:p-8">
          <IconBadge
            variant="solid"
            shape="squircle"
            size="lg"
            className="shadow-band"
          >
            <KeyRound />
          </IconBadge>
          <div className="min-w-0 flex-1">
            <h3 className="text-base font-bold text-balance text-navy sm:text-lg">
              Ein Wechsel des Messdienstleisters bleibt möglich
            </h3>
            <p className="mt-2 text-sm leading-relaxed text-pretty text-navy/80 sm:text-base">
              Die AES-Schlüssel der Verbrauchserfassungsgeräte bleiben verfügbar
              und können dem Gebäudeeigentümer bereitgestellt werden. Dadurch
              bleibt ein späterer Wechsel des Messdienstleisters technisch
              möglich.
            </p>
          </div>
        </aside>
      </Section>

      <WissenRelated
        to="/wissen/datenschutz-sicherheit"
        title="Datenschutz und technische Sicherheit"
        summary="Datenstandort, verschlüsselte Übertragung, Rollen und Zugriffsrechte sowie kontrollierbare Geräteschlüssel."
      />

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <CtaBanner
          icon={<ShieldCheck />}
          title="Erfüllt Ihr Gebäude die Anforderungen bereits?"
          description="Wir prüfen Ausstattung, Fernablesbarkeit und Verbrauchsinformation für Ihr Gebäude konkret."
          actions={
            <>
              <Button asChild variant="inverse" size="lg">
                <Link to="/kontakt">Kontakt aufnehmen</Link>
              </Button>
              <Button asChild variant="inverseOutline" size="lg">
                <Link to="/konfigurator">Preis berechnen</Link>
              </Button>
            </>
          }
        />
      </Section>
    </WissenArticle>
  )
}