"use client";

export function SleekForm() {
  return (
    <form className="w-full max-w-md rounded-2xl border border-border bg-[#0a0a0a] p-8 shadow-xl" onSubmit={(e) => e.preventDefault()}>
      <div className="mb-8">
        <h2 className="text-xl font-semibold text-foreground mb-1">Welcome back</h2>
        <p className="text-sm text-muted-foreground">Enter your details to sign in to your account.</p>
      </div>
      <div className="space-y-4 mb-6">
        <div className="space-y-2 flex flex-col">
          <label className="text-sm font-medium text-foreground text-left">Email</label>
          <input 
            type="email" 
            placeholder="m@example.com" 
            className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground transition-shadow"
          />
        </div>
        <div className="space-y-2 flex flex-col">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-foreground">Password</label>
            <a href="#" className="text-xs text-muted-foreground hover:text-foreground">Forgot password?</a>
          </div>
          <input 
            type="password" 
            placeholder="••••••••" 
            className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-foreground transition-shadow"
          />
        </div>
      </div>
      <button className="w-full rounded-md bg-foreground text-background py-2.5 text-sm font-medium hover:bg-[#e0e0e0] transition-colors">
        Sign In
      </button>
    </form>
  );
}