import type { ReactNode } from "react"
import { Link } from "react-router-dom"
import { Calculator, ChevronRight } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { CtaBanner } from "@/components/gebos/cta-banner"
import { ProcessSteps } from "@/components/gebos/process-steps"
import { Container, Section, SectionHeading } from "@/components/gebos/section"
import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/gebos/site-assets"

function StepMedia({ children }: { children: ReactNode }) {
  return (
    <div className="flex h-16 items-end justify-center gap-1">{children}</div>
  )
}

const steps = [
  {
    media: (
      <StepMedia>
        <img src={vectors.uviBadge} alt="" className="w-16" />
      </StepMedia>
    ),
    title: "Gebäude erfassen",
    description:
      "Bei der Konfiguration werden Gebäude, Wohnungen und die benötigten Leistungen erfasst.",
  },
  {
    media: (
      <StepMedia>
        <AssetRender render={renders.building} imgClassName="w-16" />
      </StepMedia>
    ),
    title: "Gerätebedarf bestimmen",
    description:
      "Auf Basis der Gebäudedaten wird ermittelt, welche Messtechnik, Rauchwarnmelder und weiteren Komponenten benötigt werden.",
  },
  {
    media: (
      <StepMedia>
        <img src={vectors.packageBox} alt="" className="w-16" />
      </StepMedia>
    ),
    title: "Vorkonfiguriert liefern",
    description:
      "Gebäude, Wohnungen und Geräte werden bereits vorbereitet. Die Hardware wird objektbezogen und installationsfertig geliefert.",
  },
  {
    media: (
      <StepMedia>
        <AssetRender render={renders.heatMeter} imgClassName="w-12" />
        <AssetRender render={renders.gateway} imgClassName="w-9" />
      </StepMedia>
    ),
    title: "Geräte montieren",
    description: (
      <>
        Die Geräte müssen vor Ort im Wesentlichen nur noch fachgerecht montiert
        werden.{" "}
        <strong className="font-bold text-navy">
          Keine aufwendige Softwarekonfiguration bei der Installation.
        </strong>
      </>
    ),
  },
  {
    media: (
      <StepMedia>
        <img src={vectors.wirelessOrb} alt="" className="w-16" />
      </StepMedia>
    ),
    title: "Automatisch betreiben",
    description:
      "Nach der Installation übernimmt GebOS die laufende Datenerfassung und die gebuchten digitalen Dienstleistungen.",
  },
]

const journey = [
  "Besucher versteht GebOS",
  "identifiziert seinen Anwendungsfall",
  "berechnet einen ungefähren Preis",
  "speichert seine Konfiguration",
  "ergänzt die tatsächlichen Gebäudedaten",
  "erhält den genauen Preis",
  "erteilt den Auftrag",
  "GebOS bereitet Gebäude und Geräte vor",
  "vorkonfigurierte Hardware wird geliefert",
  "Montage vor Ort",
  "automatischer laufender Betrieb",
]

export default function HowItWorksPage() {
  return (
    <>
      <div className="bg-hero-glow">
        <Container>
          <Section className="pt-6 pb-10 sm:pt-7 sm:pb-12 lg:pt-8 lg:pb-14">
            <PageBreadcrumb
              className="mb-4 justify-center"
              items={[
                { label: "Startseite", to: "/" },
                { label: "So funktioniert’s" },
              ]}
            />
            <SectionHeading
              align="center"
              title="So funktioniert GebOS"
              lead="Von der Bestellung bis zum laufenden Betrieb. GebOS verbindet Bestellung, Konfiguration und Installation miteinander."
            />
            <Card className="mt-10 gap-0 p-8 sm:mt-12 sm:p-10">
              <ProcessSteps steps={steps} />
            </Card>
          </Section>
        </Container>
      </div>
      <Container>
        <Section>
          <SectionHeading
            align="center"
            eyebrow="Gesamtprozess"
            title="Der Gesamtprozess aus Kundensicht"
            lead="Website, Konfigurator und operativer Rollout sind keine getrennten Systeme – sie bauen aufeinander auf."
          />
          <div className="mx-auto mt-10 flex max-w-4xl flex-wrap items-center justify-center gap-x-1.5 gap-y-3">
            {journey.map((station, i) => (
              <span key={station} className="flex items-center gap-1.5">
                <Badge variant="outline" className="bg-card">
                  {station}
                </Badge>
                {i < journey.length - 1 ? (
                  <ChevronRight
                    aria-hidden="true"
                    className="size-4 shrink-0 text-brand-400"
                  />
                ) : null}
              </span>
            ))}
          </div>
          <div className="mx-auto mt-10 max-w-2xl text-center">
            <p className="text-base font-bold text-navy sm:text-lg">
              Der Konfigurator ist der Beginn des
              GebOS-Bestell- und Rolloutprozesses.
            </p>
            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
              Die einmal eingegebenen Gebäudedaten werden nicht erneut erfasst,
              sondern durch den gesamten Prozess weiterverwendet.
            </p>
            <p className="mt-6 font-mono text-xs tracking-wide text-muted-foreground uppercase">
              Preisschätzung → Konfiguration → Bestellung → Gerätevorbereitung →
              Installation → Betrieb
            </p>
          </div>
        </Section>
      </Container>
      <Container>
        <Section className="pt-0">
          <CtaBanner
            icon={<Calculator />}
            title="Was kostet GebOS für Ihr Gebäude?"
            description="Mit wenigen Angaben erhalten Sie eine erste Preisindikation."
            actions={
              <Button variant="inverse" size="lg" asChild>
                <Link to="/konfigurator">Preis berechnen</Link>
              </Button>
            }
          />
        </Section>
      </Container>
    </>
  )
}