import type { Metadata } from "next";
import Link from "next/link";
import { Logo } from "@/components/brand/logo";
import { Badge } from "@/components/ui/badge";
import { ForgotForm } from "./forgot-form";

export const metadata: Metadata = {
  title: "Mot de passe oublié",
  description: "Réinitialisez votre mot de passe.",
  robots: { index: false, follow: false },
};

export default function ForgotPasswordPage() {
  return (
    <main
      id="main-content"
      className="min-h-dvh relative overflow-hidden flex items-center justify-center px-4 sm:px-6 py-12"
    >
      <div className="relative z-10 w-full max-w-md">
        <Link href="/" className="block mb-8 text-center" aria-label="Retour à l'accueil">
          <Logo size="lg" />
        </Link>

        <div className="panel p-6 sm:p-8">
          <div className="text-center">
            <h1 className="font-editorial text-3xl font-medium text-text">Mot de passe oublié</h1>
            <p className="mt-1.5 text-sm text-text-muted">
              On vous envoie un lien pour en définir un nouveau.
            </p>
          </div>

          <ForgotForm />

          <div className="mt-6 pt-6 border-t border-border text-center">
            <Link
              href="/connexion"
              className="text-sm text-text-muted hover:text-accent transition-colors"
            >
              Retour à la connexion
            </Link>
          </div>
        </div>

        <div className="mt-6 text-center">
          <Badge tone="muted">RGPD · Données hébergées en France</Badge>
        </div>
      </div>
    </main>
  );
}