import Link from "next/link";
import AuthLayout from "@/components/AuthLayout";
import FormField from "@/components/FormField";
import AuthForm from "@/components/AuthForm";

export default function LoginPage() {
  return (
    <AuthLayout
      eyebrow="Welcome back"
      title="Log in to Villa"
      subtitle="Access your saved properties, messages, and listings."
      footer={
        <>
          Don&apos;t have an account?{" "}
          <Link href="/signup" className="text-forest font-semibold hover:underline">Sign up</Link>
        </>
      }
    >
      {/* Email + password */}
      <AuthForm mode="login" submitLabel="Signing in…">
        <FormField label="Email address" type="email" name="email" placeholder="you@example.com" autoComplete="email" />
        <FormField label="Password" type="password" name="password" placeholder="••••••••" autoComplete="current-password" />

        <div className="flex items-center mb-6 text-sm">
          <label className="flex items-center gap-2 text-ink-soft cursor-pointer">
            <input type="checkbox" name="remember" className="w-4 h-4 accent-forest" />
            Remember me
          </label>
        </div>
      </AuthForm>
    </AuthLayout>
  );
}