import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

export default function Register() {
  return (
    <main className='min-h-screen bg-[#fffdf9] px-5 py-20 text-[#19192d]'>
      <Head><title>{getPageTitle('Invitation required')}</title></Head>
      <section className='mx-auto max-w-xl border border-[#19192d]/10 bg-white p-8 text-center'>
        <p className='text-sm font-bold uppercase tracking-[0.28em] text-[#147568]'>Private workspace</p>
        <h1 className='mt-4 text-3xl font-semibold'>An invitation is required</h1>
        <p className='mt-4 leading-7 text-[#5f6675]'>
          Client accounts are linked to one client record by the coach. Use the single-use link in your invitation email, or ask your coach to resend it.
        </p>
        <Link href='/login/' className='mt-7 inline-block bg-[#147568] px-6 py-3 font-semibold text-white'>
          Return to login
        </Link>
      </section>
    </main>
  );
}

Register.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
