import { Link, Head } from "@inertiajs/react";

export default function Guest({ children }) {
  return (
    <>
      <Head>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet" />
      </Head>

      <div className="font-['Poppins'] antialiased min-h-screen flex items-center justify-center relative bg-[linear-gradient(135deg,#5138b3_0%,#3a2585_100%)] overflow-hidden z-0 dark:bg-gray-900 text-white selection:bg-purple-300 selection:text-purple-900">
        <div className="absolute inset-0 bg-[linear-gradient(125deg,transparent_40%,rgba(20,10,50,0.6)_40%)] -z-10"></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 h-screen w-full flex flex-col md:flex-row items-center justify-center md:justify-between relative z-10">

          <div className="w-full md:w-1/2 flex flex-col justify-center items-center md:items-start md:order-2 text-center md:text-right p-6 md:p-12 animate-fade-in-up">
            <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight text-white drop-shadow-lg mb-2 md:ml-auto">
              Selamat Datang!
            </h1>
            <p className="text-purple-200 text-sm md:text-lg opacity-80 mt-2 max-w-xl mx-auto md:mr-0 md:ml-auto">
              Silakan masuk untuk melanjutkan akses ke <span className="text-white">Sistem Anggaran HBM</span>
            </p>
          </div>

          {/* Right Side - Form Container */}
          <div className="w-full max-w-md md:w-1/2 md:order-1 p-4">
            {children}
          </div>

        </div>

        {/* Background Orbs */}
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
          <div className="absolute -top-[20%] -left-[10%] w-[50%] h-[50%] bg-purple-500/20 rounded-full blur-[100px]"></div>
          <div className="absolute bottom-[10%] right-[10%] w-[40%] h-[40%] bg-blue-900/40 rounded-full blur-[80px]"></div>
        </div>

      </div>
    </>
  );
}
