import { Logo } from '@/assets/logo'

type AuthLayoutProps = {
  children: React.ReactNode
}

export function AuthLayout({ children }: AuthLayoutProps) {
  return (
    <div className='relative grid min-h-svh overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(56,103,184,0.22),_transparent_38%),linear-gradient(180deg,_#07162e_0%,_#0a2347_48%,_#f4f7fb_48%,_#f4f7fb_100%)] px-6 py-10'>
      <div className='pointer-events-none absolute inset-0 bg-[linear-gradient(135deg,transparent_0%,rgba(255,255,255,0.04)_50%,transparent_100%)]' />
      <div className='relative mx-auto grid w-full max-w-6xl items-center gap-10 lg:grid-cols-[1.15fr_0.85fr]'>
        <section className='hidden lg:block'>
          <div className='max-w-xl text-white'>
            <div className='mb-8 inline-flex items-center gap-3 rounded-full border border-white/14 bg-white/6 px-4 py-2 text-xs font-semibold tracking-[0.28em] text-white/72 uppercase backdrop-blur'>
              <Logo className='size-5 text-[#d7b16d]' />
              Bogazici Denizcilik Yonetim Merkezi
            </div>
            <h1 className='max-w-lg text-5xl leading-tight font-semibold tracking-tight'>
              Operasyon, personel ve icerik akisini tek ekranda yonetin.
            </h1>
            <p className='mt-6 max-w-lg text-base leading-7 text-white/72'>
              Premium yonetim deneyimi; hizli karar alma, net yetkilendirme ve
              kurumsal icerik kontrolu icin tasarlandi.
            </p>
            <div className='mt-10 grid max-w-md grid-cols-3 gap-4'>
              <div className='rounded-2xl border border-white/10 bg-white/6 p-4 backdrop-blur'>
                <p className='text-3xl font-semibold'>24/7</p>
                <p className='mt-2 text-sm text-white/65'>
                  Operasyon gorunurlugu
                </p>
              </div>
              <div className='rounded-2xl border border-white/10 bg-white/6 p-4 backdrop-blur'>
                <p className='text-3xl font-semibold'>RBAC</p>
                <p className='mt-2 text-sm text-white/65'>Rol bazli erisim</p>
              </div>
              <div className='rounded-2xl border border-white/10 bg-white/6 p-4 backdrop-blur'>
                <p className='text-3xl font-semibold'>v1</p>
                <p className='mt-2 text-sm text-white/65'>
                  Canli API entegrasyonu
                </p>
              </div>
            </div>
          </div>
        </section>

        <div className='mx-auto flex w-full max-w-[520px] flex-col justify-center space-y-2'>
          <div className='mb-5 flex items-center justify-center gap-3 text-slate-900 lg:hidden'>
            <Logo className='size-7 text-[#1f4b87]' />
            <div className='text-center'>
              <p className='text-lg font-semibold tracking-tight'>
                Bogazici Admin
              </p>
              <p className='text-xs tracking-[0.24em] text-slate-500 uppercase'>
                Denizcilik Yonetim Paneli
              </p>
            </div>
          </div>
          <div className='rounded-[28px] border border-white/70 bg-white/92 p-3 shadow-[0_32px_80px_rgba(6,22,45,0.18)] backdrop-blur sm:p-4'>
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}
