import Link from 'next/link';
import type { Metadata } from 'next';
import { ROUTES } from '@/lib/routes';
import { RegisterForm } from '@/components/auth/register-form';

export const metadata: Metadata = { title: 'Register' };

export default function RegisterPage() {
  return (
    <section className="bg-beige py-16">
      <div className="container-page flex justify-center">
        <div className="card w-full max-w-md p-8">
          <h1 className="text-center font-serif text-2xl font-bold text-navy-800">Create an Account</h1>
          <p className="mt-1 text-center text-xs text-navy-500">
            Join CeylonHandicrafts.lk to track orders and enquiries.
          </p>

          <RegisterForm />

          <p className="mt-4 text-center text-xs text-navy-400">
            By creating an account, you agree to our{' '}
            <Link href={ROUTES.termsOfUse} className="font-semibold text-gold-600 hover:text-gold-700">Terms of Use</Link>{' '}
            and{' '}
            <Link href={ROUTES.privacyPolicy} className="font-semibold text-gold-600 hover:text-gold-700">Privacy Policy</Link>.
          </p>

          <p className="mt-6 text-center text-sm text-navy-600">
            Already have an account?{' '}
            <Link href={ROUTES.login} className="font-semibold text-gold-600 hover:text-gold-700">Sign In</Link>
          </p>
          <p className="mt-2 text-center text-xs text-navy-400">
            Want to run a marketplace storefront instead?{' '}
            <Link href={ROUTES.vendorShow} className="font-semibold text-gold-600 hover:text-gold-700">Become a Vendor</Link>
          </p>
        </div>
      </div>
    </section>
  );
}