import type { Metadata } from "next";
import { Brand } from "@/components/brand/Brand";
import { RequestResetForm } from "./RequestResetForm";

export const metadata: Metadata = { title: "Passwort zurücksetzen" };

export default function ResetRequestPage() {
  return (
    <div className="card animate-in" style={{ padding: "clamp(28px, 4vw, 48px)" }}>
      <div className="flex flex-col items-center text-center gap-5">
        <Brand size={46} />
        <div className="flex flex-col gap-2">
          <span className="eyebrow justify-center">Konto-Wiederherstellung</span>
          <h1>Passwort zurücksetzen</h1>
          <p className="text-muted text-sm max-w-[36ch] mx-auto">
            Gib deine E-Mail-Adresse ein. Wir senden dir einen sicheren Link zum
            Zurücksetzen.
          </p>
        </div>
      </div>

      <div className="mt-7">
        <RequestResetForm />
      </div>

      <div className="mt-6 text-center">
        <a
          href="/login"
          className="text-sm font-bold text-muted hover:text-[color:var(--blue)] transition-colors"
        >
          ← Zurück zur Anmeldung
        </a>
      </div>
    </div>
  );
}