import { type Metadata } from 'next'
import Link from 'next/link'

import { Container } from '@/components/Container'
import { Footer } from '@/components/partner/Footer'
import { Header } from '@/components/partner/Header'

export const metadata: Metadata = {
  title: 'Was ist UVI? - GebOS',
  description:
    'Die Unterjährige Verbrauchsinformation (UVI) erklärt: Was sie bedeutet, für wen sie gilt und welche Fristen ab 2027 zu beachten sind.',
}

export default function WasIstUvi() {
  return (
    <>
      <Header />
      <main className="py-20 sm:py-28">
        <Container className="max-w-3xl">
          <p className="text-sm font-semibold uppercase tracking-wide text-blue-600">
            Grundlagen
          </p>
          <h1 className="mt-3 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">
            Was ist UVI?
          </h1>

          <div className="mt-8 space-y-6 text-lg leading-8 text-slate-700">
            <p>
              Die Unterjährige Verbrauchsinformation (UVI) ist eine regelmäßige
              Information für Mieter über ihren aktuellen Heiz- und
              Warmwasserverbrauch. Sie ersetzt nicht die jährliche
              Heizkostenabrechnung, sondern hilft Mietern, ihren Verbrauch schon
              während des Jahres besser zu verstehen und gegebenenfalls Energie
              zu sparen.
            </p>
            <p>
              Sind fernablesbare Messgeräte vorhanden, muss die UVI monatlich
              bereitgestellt werden. So sehen Mieter zeitnah, wie sich ihr
              Verhalten auf den Verbrauch auswirkt, statt erst mit der
              Jahresabrechnung.
            </p>
          </div>

          <div className="mt-10 rounded-2xl border-l-4 border-blue-600 bg-blue-50/60 p-6">
            <p className="text-base text-slate-800">
              Ab 2027 müssen grundsätzlich alle Bestandsgeräte fernablesbar
              sein, da nicht fernablesbare Geräte bis{' '}
              <span className="font-semibold text-slate-900">31.12.2026</span>{' '}
              nachgerüstet oder ersetzt werden müssen.
            </p>
          </div>

          <div className="mt-10">
            <Link
              href="/partner-modell#was-ist-uvi"
              className="text-sm font-semibold text-blue-600 hover:text-blue-500"
            >
              <span aria-hidden="true">←</span> Zurück zum Partner-Modell
            </Link>
          </div>
        </Container>
      </main>
      <Footer />
    </>
  )
}
