import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { KeyRound, ArrowLeft } from "lucide-react";
import { Container } from "@/components/Container";
import { ForgotPasswordForm } from "./ForgotPasswordForm";

export const metadata: Metadata = {
  title: "Forgot password",
  description: "Request a password reset link for your OrthoGlobe account.",
  robots: { index: false, follow: false },
};

export default function ForgotPasswordPage() {
  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto w-full max-w-md">
          <div className="flex flex-col items-center text-center">
            <Link href="/" aria-label="OrthoGlobe home" className="inline-flex">
              <Image
                src="/brand/orthoglobe-logo-512.webp"
                alt="OrthoGlobe"
                width={512}
                height={512}
                priority
                className="h-24 w-auto md:h-28"
              />
            </Link>
            <div className="mt-6 inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              <KeyRound className="h-3 w-3" aria-hidden />
              Password reset
            </div>
            <h1 className="mt-4 font-display text-[32px] md:text-[40px] font-extrabold leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)]">
              Reset your password
            </h1>
            <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
              Enter the email on your OrthoGlobe account and we&rsquo;ll send you a
              secure link to set a new password. Links expire after 60 minutes.
            </p>
          </div>

          <div className="mt-8 rounded-2xl border border-[var(--color-line)] bg-white p-6 shadow-sm md:p-8">
            <ForgotPasswordForm />
          </div>

          <p className="mt-6 flex items-center justify-center gap-2 text-center text-sm text-[var(--color-slate)]">
            <ArrowLeft className="h-4 w-4 text-[var(--color-blue)]" aria-hidden />
            Remembered your password?{" "}
            <Link
              href="/login"
              className="font-semibold text-[var(--color-blue)] hover:underline"
            >
              Back to sign in.
            </Link>
          </p>
        </div>
      </Container>
    </section>
  );
}
