import Image from "next/image";
import { Suspense } from "react";
import { withCDN } from "@/lib/utils";
import LoginOTP from "../components/form";

export default function LoginForm() {
  return (
    <section className="relative w-full flex h-full min-h-[600px] min-[1360px]:min-h-[700px] items-center overflow-hidden">

      {/* Background */}
      <div
        className="absolute inset-0 z-0 bg-cover bg-top"
        style={{
          backgroundImage: "url('https://YEOLMS.b-cdn.net/BG-12.png')",
          backgroundRepeat: "no-repeat",
        }}
      />

      {/* Content */}
      <div className="relative z-10 max-w-7xl mx-auto w-full grid grid-cols-1 min-[1190px]:grid-cols-3 gap-2 px-5 login-form">

        {/* LEFT */}
        <div className="text-white flex flex-col justify-center max-[1190px]:items-center  max-[1190px]:my-[30px] xl:mt-[-180px] content-left">
          <Image
            src={withCDN("/logo_horizontal%20(1)%20(1).png")}
            alt="logo"
            width={160}
            height={52}
            unoptimized
            className="object-contain w-[150px] h-[45px] xl:w-[160px] xl:h-[52px] mb-[30px]"
          />

          <h2 className="text-[40px] md:text-[60px] tracking-[2px] leading-tight uppercase font-bold mt-4">
            Welcome
          </h2>

          <p className="text-[18px] md:text-[25px] tracking-[2px] leading-tight uppercase font-bold text-center xl:text-left">
            to algobrix building instructions portal
          </p>
        </div>

        {/* CENTER (OTP) */}
        <div className="flex justify-center items-center">
          <Suspense fallback={null}>
            <LoginOTP />
          </Suspense>
        </div>

        {/* RIGHT (Empty or decoration) */}
        <div className="flex justify-center items-center xl:absolute xl:top-[-83px] xl:right-0 robo-img">
           <Image
            src={withCDN("/Patrol-Police%20(1)%20(1).png")}
            alt="logo"
            width={600}
            height={552}
            unoptimized
            className="object-contain w-full h-[360px] xl:w-[600px] xl:h-[578px] md:mr-[-40%] my-5 md:my-0"
          />
        </div>
        <div />
      </div>
    </section>
  );
}