"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { useState, useEffect } from "react";
import BackgroundWrapper from "@/components/BackgroundWrapper";

export default function Home() {
  const router = useRouter();
  const [windowDimensions, setWindowDimensions] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    function handleResize() {
      setWindowDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    // Set initial dimensions
    handleResize();

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <BackgroundWrapper>
      <div className="mx-10 h-screen">
        <div className="h-full flex flex-col justify-around pt-10">
          {/* Logo Container */}
          <div className="w-full" style={{ aspectRatio: "368/89" }}>
            <Image
              src="/images/logo/logo.png"
              alt="Logo"
              width={368}
              height={89}
              className="w-full h-full object-contain"
              priority
            />
          </div>

          {/* Login Graphic */}
          <div className="w-full h-1/2">
            <Image
              src="/images/static/login-graphic-1.png"
              alt="Login illustration"
              width={400}
              height={300}
              className="w-full h-full object-contain"
            />
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col gap-4">
            <button
              onClick={() => router.replace("/login")}
              className="w-full h-[60px] flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200"
            >
              <span
                className="font-medium"
                style={{ fontFamily: "Montserrat, sans-serif" }}
              >
                Login
              </span>
            </button>

            <p
              className="text-center font-medium"
              style={{ fontFamily: "Montserrat, sans-serif" }}
            >
              Don't have an account?{" "}
              <Link href="/register" className="text-[#276ac0] hover:underline">
                Register here
              </Link>
            </p>
          </div>
        </div>
      </div>
    </BackgroundWrapper>
  );
}