import type { Metadata } from 'next';
import { BackToHome } from './components/BackToHome';

import Image from 'next/image';
export const metadata: Metadata = {
  title: {
    template: '%s | Garam Cap Kapal',
    default: 'Autentikasi | Garam Cap Kapal',
  },
};

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
      <BackToHome />

      {/* Decorative Background Blobs */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-yellow-200/40 rounded-full blur-[100px]" />
        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-yellow-300/30 rounded-full blur-[100px]" />
      </div>

      {/* Mascot Integration */}
      <div className="absolute bottom-0 left-10 pointer-events-none opacity-80 hidden lg:block z-0 transform translate-y-12">
        {}
        <Image
          src="/images/mascots/salta-saltu-salto-with-garamkapal-pose.avif"
          alt="Mascot Garam Cap Kapal"
          className="w-[450px] object-contain drop-shadow-2xl"
          width={500}
          height={500}
        />
      </div>

      {/* Children akan diisi otomatis oleh page.tsx (Login/Register) */}
      <div className="max-w-md w-full relative z-10">{children}</div>
    </div>
  );
}