import { Outlet } from 'react-router'
import { Regular as Logo } from '~/components/logo'
import Pulse from './_pulse'
import WomanImg from './woman.png'

export default function Auth() {
  const year = new Date().getFullYear()

  return (
    <>
      <div className="min-h-screen xl:grid grid-cols-3 relative">
        <div className="col-span-2 max-xl:hidden relative overflow-hidden">
          <Pulse className="absolute -inset-y-1/4" />

          <img
            src={WomanImg}
            alt="Educação que garente sua segurança"
            className="absolute bottom-0 inset-x-1/2 h-4/6"
          />

          <div className="absolute text-4xl top-12 left-12 font-bold">
            Educação que
            <br />
            garante sua segurança
          </div>

          <div className="absolute left-12 bottom-12 text-gray-600 dark:text-gray-400 space-y-0.5">
            <p>
              &copy; {year} EDUSEG<sup>&reg;</sup>. Todos os direitos
              reservados.
            </p>
          </div>
        </div>

        <div className="bg-yellow-terciary/70 dark:bg-gray-800/50 min-h-screen p-4 2xl:py-12 flex flex-col">
          <div className="flex flex-col flex-1 justify-center items-center">
            <Logo className="w-52 mb-8" />

            <div className="space-y-2.5 xl:space-y-5">
              <Outlet />
            </div>
          </div>

          <div className="text-center mt-2.5 aria-hidden:hidden">
            <a href="#">Precisa de ajuda? Fale conosco</a>
          </div>
        </div>
      </div>
    </>
  )
}