'use client';

import { FindPwForm } from "@/components/auth/findpw-form"
import Image from "next/image"

export default function FindPwPage() {
  return (
    <div className="grid min-h-svh lg:grid-cols-2">
      {/* 데스크톱: 왼쪽 로고 이미지 영역 */}
      <div className="bg-white relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="한우 유전체 컨설팅 로고"
          fill
          className="object-contain p-16 -translate-y-12 translate-x-24"
          priority
        />
      </div>

      {/* 오른쪽 폼 영역 */}
      <div className="flex flex-col p-4 md:p-10 bg-white">
        {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
          <div className="w-full max-w-[300px] lg:max-w-sm">
            {/* 모바일: 로고 - 폼 바로 위에 붙어있음 */}
            <div className="lg:hidden flex justify-center mb-2">
              <Image
                src="/logo-graphic.svg"
                alt="한우 유전체 컨설팅 로고"
                width={120}
                height={120}
                className="object-contain"
                priority
              />
            </div>

            <FindPwForm />
          </div>
        </div>
      </div>
    </div>
  )
}
