type AuthLayoutProps = {
  children: React.ReactNode
}

export function AuthLayout({ children }: AuthLayoutProps) {
  return (
    <div className='relative grid min-h-svh overflow-hidden bg-[#0a1e3d]'>
      {/* Background pattern */}
      <div className='pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(56,103,184,0.15),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(30,64,120,0.1),transparent_50%)]' />

      <div className='relative mx-auto flex w-full max-w-300 items-center gap-0 px-6 py-10 lg:gap-16'>
        {/* Left - Branding */}
        <section className='hidden flex-1 lg:block'>
          <div className='max-w-lg'>
            <img
              src='/images/white-logo.svg'
              alt='Bogazici Denizcilik'
              className='mb-12 h-14'
            />

            <h1 className='text-[2.75rem] leading-[1.15] font-semibold tracking-tight text-white'>
              Yonetim
              <br />
              Paneli
            </h1>

            <div className='mt-6 h-px w-16 bg-linear-to-r from-[#3b7ddd] to-transparent' />

            <p className='mt-6 max-w-sm text-[15px] leading-relaxed text-white/55'>
              Kurs, icerik ve operasyon yonetimini tek bir merkezden kontrol
              edin.
            </p>

            <div className='mt-12 flex items-center gap-8'>
              <div>
                <p className='text-2xl font-semibold text-white'>15+</p>
                <p className='mt-1 text-xs tracking-wide text-white/40 uppercase'>
                  Yonetim Modulu
                </p>
              </div>
              <div className='h-8 w-px bg-white/10' />
              <div>
                <p className='text-2xl font-semibold text-white'>RBAC</p>
                <p className='mt-1 text-xs tracking-wide text-white/40 uppercase'>
                  Rol Tabanli Erisim
                </p>
              </div>
              <div className='h-8 w-px bg-white/10' />
              <div>
                <p className='text-2xl font-semibold text-white'>24/7</p>
                <p className='mt-1 text-xs tracking-wide text-white/40 uppercase'>
                  Erisim
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Right - Login card */}
        <div className='mx-auto w-full max-w-110 shrink-0'>
          {/* Mobile logo */}
          <div className='mb-8 flex justify-center lg:hidden'>
            <img
              src='/images/white-logo.svg'
              alt='Bogazici Denizcilik'
              className='h-10'
            />
          </div>

          <div className='rounded-2xl border border-white/8 bg-white/4 p-8 shadow-2xl backdrop-blur-sm sm:p-10'>
            {children}
          </div>

          <p className='mt-6 text-center text-xs text-white/30'>
            Bogazici Denizcilik Egitim Kurumlari
          </p>
        </div>
      </div>
    </div>
  )
}
