import { createFileRoute, Link } from "@tanstack/react-router";
import { Box } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { MockupNav } from "@/components/layout/MockupNav";

export const Route = createFileRoute("/login")({
  head: () => ({ meta: [{ title: "Sign in — warpbox.dev" }] }),
  component: Login,
});

function Login() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/30 px-4">
      <div className="absolute right-4 top-4"><MockupNav /></div>
      <Link to="/" className="mb-6 flex items-center gap-2 text-lg font-semibold">
        <Box className="h-6 w-6 text-primary" /> warpbox.dev
      </Link>
      <Card className="w-full max-w-sm">
        <CardContent className="p-6">
          <h1 className="text-xl font-semibold">Sign in</h1>
          <p className="mt-1 text-sm text-muted-foreground">Welcome back.</p>
          <div className="mt-6 space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="you@example.com" />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="password">Password</Label>
              <Input id="password" type="password" />
            </div>
            <Button className="w-full">Sign in</Button>
          </div>
          <div className="mt-4 flex justify-between text-xs text-muted-foreground">
            <Link to="/register" className="hover:text-foreground">Create account</Link>
            <Link to="/" className="hover:text-foreground">Back to home</Link>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}