Login — Split

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Separator } from "@/components/ui/separator";

/**
 * Login (Split) — 분할 로그인 템플릿.
 *
 * 좌: 로그인 폼(이메일/비밀번호 + 소셜 + 보조 링크).
 * 우: 비주얼 패널 — 그라데이션 + 인용/캡션. 실제로는 <img>/<Image>로 교체.
 *
 * 반응형: lg 미만에서 우측 패널 숨김(폼만).
 */
export function LoginSplitTemplate() {
  return (
    <div className="grid min-h-[560px] w-full lg:grid-cols-2">
      {/* 좌: 폼 */}
      <div className="flex items-center justify-center p-8">
        <div className="w-full max-w-sm">
          <div className="mb-8 flex items-center gap-2">
            <span className="flex size-7 items-center justify-center rounded-md bg-foreground text-xs font-bold text-background">
              G
            </span>
            <span className="font-semibold tracking-tight">Groudit</span>
          </div>

          <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
          <p className="mt-1.5 text-sm text-muted-foreground">
            Sign in to continue to your workspace.
          </p>

          <form className="mt-6 space-y-4" onSubmit={(e) => e.preventDefault()}>
            <div className="space-y-1.5">
              <Label htmlFor="login-email">Email</Label>
              <Input id="login-email" type="email" placeholder="you@example.com" />
            </div>
            <div className="space-y-1.5">
              <div className="flex items-center justify-between">
                <Label htmlFor="login-password">Password</Label>
                <a href="#" className="text-xs text-muted-foreground hover:text-foreground">
                  Forgot?
                </a>
              </div>
              <Input id="login-password" type="password" placeholder="••••••••" />
            </div>
            <label className="flex items-center gap-2 text-sm">
              <Checkbox id="login-remember" defaultChecked />
              <span>Remember me</span>
            </label>
            <Button type="submit" className="w-full">
              Sign in
            </Button>
          </form>

          <div className="my-5 flex items-center gap-3">
            <Separator className="flex-1" />
            <span className="text-xs text-muted-foreground">or</span>
            <Separator className="flex-1" />
          </div>

          <div className="space-y-2">
            <Button variant="outline" className="w-full">
              Continue with Google
            </Button>
            <Button variant="outline" className="w-full">
              Continue with GitHub
            </Button>
          </div>

          <p className="mt-6 text-center text-sm text-muted-foreground">
            Don’t have an account?{" "}
            <a href="#" className="font-medium text-foreground hover:underline">
              Sign up
            </a>
          </p>
        </div>
      </div>

      {/* 우: 비주얼 패널 — 이미지로 교체 가능 */}
      <div className="relative hidden overflow-hidden border-l border-border bg-gradient-to-br from-indigo-500/15 via-sky-400/10 to-transparent lg:flex">
        {/* 실제로는 이 자리에 <img className="absolute inset-0 h-full w-full object-cover" /> 또는 next/image */}
        <div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_1px_1px,var(--color-foreground)_1px,transparent_0)] [background-size:22px_22px]" />
        <div className="relative z-10 mt-auto p-10">
          <blockquote className="text-lg font-medium leading-relaxed text-foreground">
            “Copy-paste components, ship faster. Groudit UI is the toolkit our
            team reaches for.”
          </blockquote>
          <p className="mt-3 text-sm text-muted-foreground">
            Jiwon Lee · Product Engineer
          </p>
        </div>
      </div>
    </div>
  );
}