import { Link } from "react-router-dom"
import {
  ArrowRight,
  BellRing,
  ClipboardCheck,
  ScrollText,
  ShieldCheck,
  Timer,
  Wifi,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Checklist } from "@/components/solenos/checklist"
import {
  ComparisonTable,
  type ComparisonColumn,
  type ComparisonRow,
} from "@/components/solenos/comparison-table"
import { CtaBanner } from "@/components/solenos/cta-banner"
import { FaqAccordion, type FaqItem } from "@/components/solenos/faq-accordion"
import { PortalGaugeIcon } from "@/components/solenos/line-icons"
import { PriceCard } from "@/components/solenos/price-card"
import { StepRail } from "@/components/solenos/process-steps"
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 { SmokeDetectorIllustration } from "@/components/solenos/illustrations"
import { ProductCrossLinks, ProductPage } from "@/pages/products/product-page"

/**
 * Hero art: the glass smoke detector as the subject with the real device
 * beside it and the check orb as the accent – device plus verified operational
 * readiness. Decorative; the copy carries the meaning.
 */
function SmokeAlarmHeroArt() {
  return (
    <div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
      <img
        src={vectors.checkOrb}
        alt=""
        className="absolute top-[4%] right-[6%] w-[20%]"
      />
      <AssetRender
        render={renders.glassSmokeDetector}
        alt=""
        className="mx-auto w-[64%]"
        loading="eager"
      />
      <AssetRender
        render={renders.smokeAlarmAlpha}
        className="absolute bottom-[2%] left-[2%] w-[30%]"
      />
    </div>
  )
}

const DUTIES: Topic[] = [
  {
    icon: <ScrollText />,
    title: "Einbau und Betriebsbereitschaft",
    body: "Rauchwarnmelder sind in Wohnungen nach den Bauordnungen der Länder vorgeschrieben. Wer für die Sicherstellung der Betriebsbereitschaft verantwortlich ist, regelt das jeweilige Landesrecht – in den meisten Ländern der Eigentümer.",
  },
  {
    icon: <ClipboardCheck />,
    title: "Jährliche Inspektion",
    body: "Die Anwendungsnorm DIN 14676-1 verlangt eine Inspektion mindestens einmal jährlich: Energieversorgung, Rauchzutrittsöffnungen und Umfeld des Melders werden geprüft.",
  },
  {
    icon: <Wifi />,
    title: "Ferninspektion nach Norm",
    body: "Die DIN 14676-1 kennt neben der Vor-Ort-Inspektion die Teil- und die vollständige Ferninspektion. Geeignete Melder melden Verschmutzung, Batteriezustand und Demontage selbst – ohne Termin in der Wohnung.",
  },
  {
    icon: <Timer />,
    title: "Austausch nach zehn Jahren",
    body: "Rauchwarnmelder werden spätestens nach zehn Jahren Nutzungsdauer ausgetauscht. Verbaute Melder, Einbauorte und Austauschtermine sind im Portal je Wohnung dokumentiert.",
  },
]

const ROLLOUT_STEPS = [
  {
    media: <AssetRender render={renders.houseSmallIso} imgClassName="w-24" />,
    title: "Bedarf ermitteln",
    description:
      "Aus Wohnungen und Zimmerzahl ergibt sich, wie viele Melder je Einheit benötigt werden.",
  },
  {
    media: (
      <AssetRender render={renders.shippingBoxClosed} imgClassName="w-32" />
    ),
    title: "Vorkonfiguriert erhalten",
    description:
      "Die Melder kommen bereits dem Gebäude und den geplanten Einheiten zugeordnet an.",
  },
  {
    media: <AssetRender render={renders.drillTool} imgClassName="w-28" />,
    title: "Montieren",
    description:
      "Montage durch Sie, Ihren Fachbetrieb oder als Komplettleistung durch SolenOS.",
  },
  {
    media: <AssetRender render={renders.gateway} imgClassName="w-24" />,
    title: "Anbinden",
    description:
      "Die Melder funken über dieselbe Gebäudeinfrastruktur wie die Verbrauchserfassung.",
  },
  {
    media: (
      <AssetRender render={renders.laptopDashboard} imgClassName="w-40" />
    ),
    title: "Ferninspektion läuft",
    description:
      "Status, Meldungen und Inspektionsnachweise stehen laufend im Portal bereit.",
  },
]

const INSPECTION_COLUMNS: ComparisonColumn[] = [
  { title: "Ferninspektion", highlight: true },
  { title: "Vor-Ort-Inspektion", check: false },
]

const INSPECTION_ROWS: ComparisonRow[] = [
  {
    label: "Termin in der Wohnung",
    cells: ["nicht erforderlich", "je Wohnung, inklusive Nachterminen"],
  },
  {
    label: "Prüfung",
    cells: ["laufend durch den Melder", "einmal jährlich vor Ort"],
  },
  {
    label: "Störungen",
    cells: ["werden gemeldet, sobald sie auftreten", "fallen beim Jahrestermin auf"],
  },
  {
    label: "Nachweis",
    cells: ["automatisch dokumentiert", "Protokoll je Begehung"],
  },
  {
    label: "Aufwand für Bewohner",
    cells: ["keine Anwesenheitspflicht", "Anwesenheit erforderlich"],
  },
]

const INCLUDED = [
  "Rauchwarnmelder inklusive Montage und Eigentumsübertragung",
  "Bedarfsermittlung je Wohnung aus den Gebäudedaten",
  "regelmäßige Ferninspektion und Störungsmeldungen",
  "Inspektionsnachweise je Wohnung im Portal",
  "Support für Rückfragen von Verwaltung und Bewohnern",
]

const FAQS: FaqItem[] = [
  {
    question: "Wie oft müssen Rauchwarnmelder geprüft werden?",
    answer:
      "Mindestens einmal jährlich. Die Anwendungsnorm DIN 14676-1 lässt dafür neben der Vor-Ort-Inspektion auch die Teil- und die vollständige Ferninspektion zu, sofern die eingesetzten Melder dafür geeignet sind.",
  },
  {
    question: "Ersetzt die Ferninspektion die Vor-Ort-Prüfung vollständig?",
    answer:
      "Bei Meldern, die für die vollständige Ferninspektion geeignet sind, kann die Sicherstellung der Betriebsbereitschaft über die Gerätelebensdauer aus der Ferne erfolgen. Anlassbezogene Einsätze bleiben möglich – etwa wenn ein Melder demontiert wurde, dauerhaft verschmutzt ist oder ausgetauscht werden muss.",
  },
  {
    question: "Wer ist für die Rauchwarnmelder verantwortlich?",
    answer:
      "Einbau und Sicherstellung der Betriebsbereitschaft richten sich nach der Bauordnung des jeweiligen Landes. In den meisten Ländern trägt der Eigentümer die Verantwortung für die Betriebsbereitschaft; SolenOS liefert die Melder, die Inspektion und die Nachweise, mit denen diese Pflicht erfüllt werden kann.",
  },
  {
    question: "Wann müssen die Melder ausgetauscht werden?",
    answer:
      "Spätestens nach zehn Jahren Nutzungsdauer. Einbaudatum und fälliger Austausch sind je Gerät und Wohnung im Portal hinterlegt, sodass der Austausch mit dem übrigen Gebäudebetrieb geplant werden kann.",
  },
  {
    question: "Sind die Kosten umlagefähig?",
    answer:
      "Die laufenden Kosten der Ferninspektion sind grundsätzlich als Betriebskosten umlagefähig. Die einmaligen Kosten der Hardware inklusive Montage und Eigentumsübertragung sind es nicht – sie sind Anschaffungskosten des Eigentümers.",
  },
  {
    question: "Kann ich Rauchwarnmelder später ergänzen?",
    answer:
      "Ja. Läuft der Messbetrieb bereits über SolenOS, wird die vorhandene Gebäudestruktur weiterverwendet: Wohnungen und Einheiten sind erfasst, die Melder werden lediglich ergänzt und angebunden.",
  },
]

export default function RauchwarnmelderProductPage() {
  return (
    <ProductPage
      breadcrumb="Rauchwarnmelder"
      eyebrow="Produkt"
      title="Rauchwarnmelder"
      tagline="Geprüft, ohne zu klingeln."
      lead="Ferninspizierbare Rauchwarnmelder inklusive Montage, jährlicher Inspektion nach DIN 14676-1 und lückenloser Dokumentation – über dieselbe Gebäudeinfrastruktur wie die Verbrauchserfassung."
      actions={
        <>
          <Button asChild size="lg">
            <Link to="/konfigurator">Konfiguration für mein Gebäude starten</Link>
          </Button>
          <Button asChild variant="outline" size="lg">
            <Link to="/klarpreis">Gesamtangebot ansehen</Link>
          </Button>
        </>
      }
      note="Wenige Angaben · vollständige Prüfung im Folgeprozess"
      visual={<SmokeAlarmHeroArt />}
      features={[
        {
          icon: <Wifi strokeWidth={1.6} />,
          title: "Ferninspizierbar",
          sub: "Prüfung ohne Termin und ohne Anwesenheit der Bewohner.",
        },
        {
          icon: <BellRing strokeWidth={1.6} />,
          title: "Störung fällt sofort auf",
          sub: "Verschmutzung, Batterie und Demontage werden gemeldet.",
        },
        {
          icon: <ClipboardCheck strokeWidth={1.6} />,
          title: "Nachweis je Wohnung",
          sub: "Inspektionen und Austauschfristen sind dokumentiert.",
        },
        {
          icon: <PortalGaugeIcon />,
          title: "Im selben Portal",
          sub: "Melder stehen neben Zählern und Verbrauchsdaten.",
        },
      ]}
      closing={
        <Section className="pt-0 sm:pt-0 lg:pt-0">
          <CtaBanner
            icon={<ShieldCheck />}
            title="Rauchwarnmelder für Ihr Gebäude"
            description="Bedarf, Montage und Ferninspektion in einem Schritt – auch zusätzlich zu einem laufenden Messbetrieb."
            actions={
              <>
                <Button asChild variant="inverse" size="lg">
                  <Link to="/konfigurator">Konfiguration starten</Link>
                </Button>
                <Button asChild variant="inverseOutline" size="lg">
                  <Link to="/kontakt">Kontakt aufnehmen</Link>
                </Button>
              </>
            }
          />
        </Section>
      }
    >
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Pflichten"
          title="Was für Rauchwarnmelder gilt"
          lead="Einbaupflicht, jährliche Inspektion und Austausch nach zehn Jahren sind gesetzt. Unterschiedlich ist nur, wie viel Aufwand daraus entsteht."
        />
        <TopicCards items={DUTIES} className="sm:grid-cols-2 lg:grid-cols-4" />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Schritt für Schritt"
          title="Von der Bedarfsermittlung zur laufenden Inspektion"
        />
        <StepRail steps={ROLLOUT_STEPS} className="mt-10" />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Im Vergleich"
          title="Ferninspektion oder Vor-Ort-Inspektion"
          lead="Beide Verfahren erfüllen die Norm. Der Unterschied liegt im Aufwand für Verwaltung und Bewohner – und darin, wie früh eine Störung auffällt."
        />
        <ComparisonTable
          className="mt-10"
          columns={INSPECTION_COLUMNS}
          rows={INSPECTION_ROWS}
          labelHead="Inspektionsverfahren"
        />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Gesamtangebot"
          title="Hardware, Ferninspektion und Montage transparent zusammenführen"
          lead="Geräteanzahl, Inspektionsumfang und gewählte Montagevariante werden nach der vollständigen Objektkonfiguration geprüft und gemeinsam angeboten."
        />
        <div className="mt-10 grid gap-6 lg:grid-cols-[1fr_1fr_1.1fr]">
          <PriceCard
            title="Rauchwarnmelder"
            cadence="Gesamtangebot"
            price="Nach Prüfung"
            unit="Geräteanzahl und Montagevariante"
            description="Benötigte Rauchwarnmelder, vereinbarte Montage und Eigentumsübertragung."
            media={<SmokeDetectorIllustration />}
          />
          <PriceCard
            title="Ferninspektion"
            cadence="Gesamtangebot"
            price="Nach Prüfung"
            unit="passend zum vereinbarten Leistungsumfang"
            description="Regelmäßige Prüfung, Nachweise, Meldungen und Support."
            media={
              <div className="relative">
                <SmokeDetectorIllustration />
                <Wifi className="absolute top-1 -right-1 size-5 text-primary" />
              </div>
            }
          />
          <Card className="gap-0 p-6 sm:p-7">
            <h3 className="text-base font-bold text-navy">Enthalten</h3>
            <Checklist items={INCLUDED} className="mt-5" />
            <Button
              asChild
              variant="link"
              className="mt-6 h-auto self-start p-0 font-bold"
            >
              <Link to="/konfigurator">
                Gesamtangebot konfigurieren
                <ArrowRight />
              </Link>
            </Button>
          </Card>
        </div>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          eyebrow="Häufige Fragen"
          title="Fragen zu Rauchwarnmeldern"
        />
        <FaqAccordion className="mt-10" items={FAQS} />
      </Section>

      <ProductCrossLinks current="/produkte/rauchwarnmelder" />
    </ProductPage>
  )
}