import type { Route } from './+types/layout'

import { Outlet, Link } from 'react-router'

import logo from '@repo/ui/components/logo2.svg'

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Criar conta · EDUSEG®' }]
}

export default function Layout() {
  return (
    <>
      <div className="space-y-6">
        <div className="flex justify-center">
          <div className="border border-white/15 bg-white/5 px-2.5 py-3 rounded-xl">
            <img src={logo} alt="EDUSEG®" className="block size-12" />
          </div>
        </div>

        <div className="text-center space-y-1.5">
          <h1 className="text-2xl font-semibold font-display text-balance">
            Criar conta
          </h1>
          <p className="text-white/50 text-sm">
            Já tem uma conta?{' '}
            <Link to="/" className="font-medium text-white hover:underline">
              Faça login
            </Link>
            .
          </p>
        </div>

        <Outlet />

        <p className="text-white/50 text-xs text-center">
          Ao cadastrar, você concorda com nossa{' '}
          <a
            href="//eduseg.com.br/politica"
            target="_blank"
            className="underline hover:no-underline"
          >
            política de privacidade
          </a>
          .
        </p>
      </div>
    </>
  )
}