import type { Metadata } from "next";
import { Suspense } from "react";
import Link from "next/link";
import { Logo } from "@/components/brand/logo";
import { Badge } from "@/components/ui/badge";
import { LoginForm } from "./login-form";

export const metadata: Metadata = {
  title: "Connexion",
  description: "Accédez à votre espace client.",
  robots: { index: false, follow: false },
};

export default function LoginPage() {
  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">Bon retour</h1>
            <p className="mt-1.5 text-sm text-text-muted">Connectez-vous à votre espace.</p>
          </div>

          <Suspense fallback={null}>
            <LoginForm />
          </Suspense>

          <div className="mt-6 pt-6 border-t border-border text-center">
            <p className="text-sm text-text-muted">
              Pas encore client ?{" "}
              <Link href="/contact" className="text-accent hover:text-accent-hi font-medium transition-colors">
                Nous contacter
              </Link>
            </p>
          </div>
        </div>

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